MiniDoc: Creating a CSS Drop-down Menu

[technopuzzle]

If I remember correctly you need to give it a module or menu suffix of -nav

[tjmoyer]

Changing the module and menu sufix from -suckerfish-horizontal to -nav doesn't seem to make a difference, one way or another. Still works in IE, but not in FF.

[g-c]

....but in FF it's just one big vertical list...........

Same here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Unbelivable.....
I attach a screenshot....

[g-c]

Hi, i wrote the creator of the menu and the menu-templates.
he points me/us with the Problem to his FAQ-entry at: http://de.siteof.de/extended-menu-faq-v ... ontal.html
So its "only" a "width" problem. I'll try to look a bit at it tomorrow...

Regards, Christian

[g-c]

Yes i changed it and it works....
I changed the class

Code: Select all

ul.mainlevel-suckerfish-horizontal

from width:auto; to a fixed width.
Sadly... i would like it more if there were a automatic-way of handling this.

Also i discovered a nother error  - only in IE7, the expanding sublevel-entires appear a bit to much right - not direct under the mainlevel entires of the suckerfish-menu....


Regards, Christian

[makamba]

Hi all,

After my first website with Horizontal CSS Drop down menu (Extended Menu) I tried it again for my own website. I want my website to be a showcase of what I can. But although I have done it in the not so distant past, I can't get it to work.

What did I do up until now:

    * Made the menu structure as I wanted it
    * Uploaded the module mod_exmenu_1.0.3.zip
    * In 'Modules -> Site Modules' I unpublished Top Menu
    * I published Extended Menu, choose position 'User3' (where Top Menu resided)
    * Entered for 'Menu Class Suffix' and 'Module Class Suffix' "mainnav"
    * For 'Menu Name' I choose "topmenu"
    * For 'Menu Style' I choose "Flat List"
    * Set 'Expand Menu' to "Yes"
    * Created an extra css file, called menu_css.css where I added the CSS code for Extended Menu
    * Copied the IE specific code to index.php
    * Added menu_css.css to my template_css.css, which is called from templateDetails.xml
    * Added menu_css.css to templateDetails.xml


But the end result was that I now have a bulleted list instead of a nice folding out menu (see included image menu_as_it_is.jpg. The starting point of the menu, can be found in menu_as_starting_point.jpg the menu as it was in the original template). So what am I doing wrong, or did I forget?

Michel

[technopuzzle]

Did you set the list style to none in your CSS?

Code: Select all

	list-style: none;

[makamba]

Yes. It is part of the code I copied from Compass.

Edit:
I included the code for menu_css.css

Code: Select all

#mainlevelmainnav,#mainlevelmainnav ul{
	float: left;
	list-style: none;
        etc.
}

[tbianco]

So I'm having the most frustrating time trying to figure out why my sub nav menu only works on the section/category/article page that the menu item belongs to. For example I have several sub links under services which belongs to a service section and category. When I'm a page that is not services related the subnavs do not render. Meaning they don't even show up in the HTML code.

I know I'm doing something wrong but I just don't know what I am doing wrong Joomla wise. I have build suckerfish menus from scratch hundreds of times but Joomla's set up is kicking my butt. Any suggestions?

[technopuzzle]

Can you provide a link?

[tbianco]

Unfortunately I'm developing from my localhost. Here's the output when I'm on my company page for the menu area, notices that there is no sub menu items in the services section. How I have things set up is that each main menu item link is a section blog layout and each sub menu item is a category blog layout. I'm new to Joomla so I'm not even sure if that's how I should be doing it. Also another thing to take notice in is that in my menu items it doesn't output the item1, item2, item3...classes.

Oh and I know this is the wrong forum area but, but I'm on Joomla 1.5

Code: Select all

<ul>
	<li>
		<a href="index.php/main_page">
			<span>main page/</span>

		</a>
	</li>
	<li id="current" class="parent active">
		<a href="index.php/company">
			<span>company/</span>
		</a>
		<ul>
			<li>

				<a href="index.php/company/about_patron_saint_media">
					<span>about us</span>
				</a>
			</li>
			<li>
				<a href="index.php/company/our_values">
					<span>our values</span>
				</a>

			</li>
			<li>
				<a href="index.php/company/consultants">
					<span>consultants</span>
				</a>
			</li>
			<li>
				<a href="index.php/company/what_to_expect">

					<span>what to expect</span>
				</a>
			</li>
		</ul>
	</li>
	<li class="parent">
		<a href="index.php/solutions">
			<span>solutions/</span>

		</a>
	</li>
	<li>
		<a href="index.php/jobs">
			<span>jobs/</span>
		</a>
	</li>
	<li>

		<a href="index.php/contact">
			<span>contact/</span>
		</a>
	</li>
</ul>

[technopuzzle]

Have you tried using the Suckerfish and ExtMenu solution?

[tbianco]

no I don't need it cause I finally figured it out it's this one setting "Always show submenu items" that is in the module manager for the main menu that I was overlooking that allowed me to do what I needed. But yeah I was about ready to pull my hair out over that one.

[nattyman]

After exhaustedly researching this issue I haven't found any explanation for the problem I am having  .  Within my Main Menu I added 2 child links, one for Linux Today under News and one for Google under Links.  In the left hand column under the Main Menu you can see the 2 sub-links and in the HTML it has them differentiated by adding the tag class="sublevel" to the a link.  However it does not appear in the Extended Menu at all.  Only if I go to the parent page.  For example if I go to News then the Linux Today link appears in an added line below it as a submenu.

How do I get the child links to appear as a drop-down links when you hover over the parent instead of submenus?  More specifically how do I get the child links to appear in the Extended Menu Tree?  Even if I remove the suckerfish css the Extended Menu does not show all the same links as the Main Menu (i.e. it doesn't show the child links).

Here are some of my settings

Menu Class Suffix: mainnav
Module Class Suffix: mainnav

Menu Name: mainmenu
Source Type: menu

Menu Style: Tree List
Expand Menu: Yes

Do I need to do anything with "Parent Menu Item", "Begin With Current Item Level" or "Begin With Level"?

I am experienced in HTML and CSS but pretty new to Joomla.  I apologize if I am not using the correct terminology. The main thing is that I want drop down menus not submenus!  I would really appreciate any help! 

Here is the link to my site: http://www.wichitashome.com/index.php

[tbianco]

First off, read the reply I made in the previous post that will help you with outputting the sub links.

Okay now that we have that out of the way, let me better see if I can clarify your question. More specifically what you are asking is "How do I get my sub menu links to show at all time so I can apply styles to them (in the case of the suckerfish CSS method) so that I can turn them into drop downs?"

Is that the correct question?

[nattyman]

tbianco, thanks for the reply.

I can't find the option "Always show submenu items".  I am using Joomla! 1.0.13 Stable, is that different from yours?  I looked in both the main menu module and the Extended Menu module.

Yes I believe that you have my question right:

"How do I get my sub menu links to show at all time so I can apply styles to them (in the case of the suckerfish CSS method) so that I can turn them into drop downs?"

In other words the submenu items are not appearing in the of the Extended Menu list.

[nattyman]

I finally made a breakthrough!!  I set "Split Menu" to 2 and that finally added the subpages to the tree list and now the drop downs are working (and there was much rejoicing!)... in Fire Fox that is, unfortunately it is not working in IE6 (blah!).

I realize there is a lot above here that talks about problems with Explorer, so now I will start trudging for that answer.

Think how much easier all of our lives would be if only we didn't have to worry about Explorer not getting along with everyone else and not following the standards of the rest of the world.

[tbm2020]

Hey guys

I ve managed to build  a drop down and get it working locally but then when its running online its the thing starts to misbehave and it  actually becomes quite annoying.

Link Below

http://d495462.u41.ukisp.com/index.php

Basically view the page and rollover the services and facilty buttons. They both have drop down menus but the only work when your actually on that page, furthermore when you move from the parent to the submens it disappaears unless you move it quickly lol . Anyone help  with this i think its javascript issue for first prob but a css issue for the second.

Code: Select all

/*Start of Menu .......................................................................................*/



#nav, #nav ul {

	padding: 1px 0 0 0;

	margin: 0;

	height:24px;

	list-style: none;

}



#nav a {

	display: block;

	width: 10em;

}



#nav li {

	float: left;

	width: 80px;/* C2 :Menu width change to suite size of text on the menu*/

	

}



#nav li a{

	height:22px;

	color:white;

	text-decoration: none;

	text-align: center;

	width:85px; /*Match this preference to C2*/

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-weight: normal;

	font-size: 80%;

	text-transform: none;

	letter-spacing: 0px;

	word-spacing: 1px;

	background-image: url(images/button.jpg);

}



#nav li a:hover{

	text-decoration:none;

	background-image: url(images/buttonhover.jpg);

}



#nav li ul li a{

        background-color: #325f2f;

        background-image: none;

	width:180px;

	text-align: left;

	padding:0 0 0 4px;

}



#nav li ul li a:hover{

background-color: #A9C9AE;

background-image: none;

	color: black;

	

}



/*puts the 1st level drop down out of view*/

#nav li ul {

	position: absolute;

	width: 85px;/*Match this preference to C2*/

	left: -999em;

}



/*Brings the 1st level drop down into view and into position*/

#nav li:hover ul, #nav li.sfhover ul {

	left: auto;

}



/*End of Menu .........................................................................................*/

thats the css

and javascript

Code: Select all

<script type="text/javascript"><!--/-->![CDATA[//>!--

sfHover=function(){var sfEls=document.getElementById("nav").getElementsByTagName("LI");for(var i=0;i<sfEls.length;i++){sfEls[i].onmouseover=function(){this.className+=" sfhover";}

sfEls[i].onmouseout=function(){this.className=this.className.replace(new RegExp(" sfhover\\b"),"");}}}

if(window.attachEvent)window.attachEvent("onload",sfHover);//-->!]]>

<!--function MM_reloadPage(init) {  //reloads the window if Nav4 resized  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();} MM_reloadPage(true);//-->

</script>

Any hlep much appreciated

[jclanin]

Hi all,

I'm new to Joomla!  Trying to create a simple site with drop-down menus.  I don't see anything in my Joomla! menu manager about creating sub-menus. 

How is this done?

I have several static content pages linking from the horizontal menu at the top.  I now need to create sub-menus and sub-sub-menus that drop down  from the top-most menu items.  I've installed a template from Joomlashack.com.

thanks,

--JC

[technopuzzle]

Menu's are primarily controlled by your template and it's CSS file(s). Check your css for the mainlevel / sublevel class. There are also extensions available that will create the menu's for you.

What template are you using?

I'm new to Joomla!  Trying to create a simple site with drop-down menus.  I don't see anything in my Joomla! menu manager about creating sub-menus. 

How is this done?

I have several static content pages linking from the horizontal menu at the top.  I now need to create sub-menus and sub-sub-menus that drop down  from the top-most menu items.  I've installed a template from Joomlashack.com.