Horizontal Menu & Submenu using CSS only

[abasel]

I am trying to get a horizontal menu with horizontal sub menus, using only CSS, without using any java scripts.

My feeble attempt can be seen at http://cc.internetlinked.com

Is someone able to point me in the right direction? I've found excellent tutorials on the web (like those at http://css.maxdesign.com.au/listamatic/, but they require extra DIV ID's to be inserted in the HTML code.

How do I achieve this?

[herb200mph]

The horizontal menu in J! is a "legacy-horizontal" format with usually a "-nav" suffix.

So, create your menu and place the menu module in the location on the page.

Then, go into the template/CSS file and modify the CSS identifiers and declarations that contain the "-nav" string.

Note: the main menu vertical format uses "_menu" as the suffix, so don't confuse the two.

[abasel]

I've done this and now my menu code looks as follows, but I still can't see how to distinguish the mainlevel from sub levels

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td nowrap="nowrap"><a href="/index.php?option=com_content&view=frontpage&Itemid=1" class="mainlevel-nav" id="active_menu-nav">Home</a><a href="/index.php?option=com_content&view=category&id=1&Itemid=2" class="mainlevel-nav" >No Scroll Bar 1</a><a href="/index.php?option=com_content&view=category&id=1&Itemid=3" class="mainlevel-nav" >Scroll Bar</a><a href="#" class="mainlevel-nav" >Submenu 1</a><a href="#" class="mainlevel-nav" >Test</a><a href="#" class="mainlevel-nav" >Submenu 3</a></td>
  </tr>
</table>

The Menu structure is as follows
Home
- Submenu 1
No Scroll Bar 1
- Test
Scroll Bar
- Submenu 3

All levels seem to have the class mainlevel-nav assosciated with them.

[abasel]

The "Extended Menu" module seems to create the correct div tags for me... will keep you posted..

[TheAnt]

I need the same menu, please abasel can you explain me how to get the main and sublevel horizontal
best regards

[abasel]

Ok... I'll give it a try.... wish I could find the original article. I'll go through each of the steps and see if that makes it clear.

1) From the menu manager create the whole menu (together with its submenus)

2) In the modules menu, create a copy of the menu you have just created. Call one main_menu and the other sub_menu

3) Edit the main_menu in the module section and make the following changes:
Under Module parameters make the start level 0 and the end level one.
Under the Advanced parameters set menu class suffix to _top
Can't remember if this is the default set Always show submenus to no.

4) Now edit the sub_menu
Under Module parameters make the start level 1 and the end level one.
Under the Advanced parameters set menu class suffix to _sub
Can't remember if this is the default set Always show submenus to no.
Also, using the menu assignment options, you can make this submenu appear only on certain pages.

Below is an example of the CSS that I then use (I am by no means an expert or even good at this so there are probably better ways to do this.) The final result can be seen at http://www.calvarychapel.org.nz

Code: Select all

/* CSS Document */

#mainmenu a, #submenu a {
	color: #cccccc;
}
a {
	color: #333333;
}
/* Main Horizontal Rollover lists */

#mainmenu ul.menu_top {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
	position: relative;
	right: 12px;
	background-image: url(../images/mainmenudivide.jpg);
	background-repeat: no-repeat;
	background-position: left center;
}
#mainmenu .menu_top li {
	display: inline;
	list-style-type: none;
}
#mainmenu .menu_top a {
	background-image: url(../images/mainmenudivide.jpg);
	background-repeat: no-repeat;
	width: 106px;
	padding: 0px;
	text-align: center;
	float: left;
	display:block;
	height: 42px;
	line-height: 42px;
	background-position: right center;
}
#mainmenu .menu_top a:link, #mainmenu .menu_top a:visited {
	text-decoration: none;
}
#mainmenu .menu_top a:hover, #mainmenu .menu_top #current a, #mainmenu .menu_top li.active a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	background-image: url(../images/mainmenuhoverbackground.jpg);
	background-repeat: repeat-x;
}#newsshow-latestnews
#mainmenu .menu_top li.active {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	background-image: url(../images/mainmenuhoverbackground.jpg);
	background-repeat: repeat-x;
}
#mainmenu .menu_top {
	line-height: 42px;
	height: 42px;
	vertical-align: middle;
	font-size: 14;
	color: #cccccc;
}
/* Sub Horizontal Rollover lists */

#submenu ul.menu_top {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
	position: relative;
	right: 12px;
	background-image: url(../images/submenudivide.jpg);
	background-repeat: no-repeat;
	background-position: left center;
}
#submenu .menu_top li {
	display: inline;
	list-style-type: none;
}
#submenu a {
	font-size: 10px;
	padding: 0px 20px;
	background-image: url(../images/submenudivide.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
#submenu .menu_top a:link, #submenu .menu_top a:visited {
	text-decoration: none;
}
#submenu .menu_top a:hover, #submenu .menu_top #current a {
	color: #ffffff;
	text-decoration: underline;
}
}

[TheAnt]

Great, thanks a lot. I'm going to try it.

[TheAnt]

just a question: is their style list, legacy vert or hor, or legacy flat list?

[abasel]

List

All the best :-)

[TheAnt]

Thanks a lot, using two instance of extended menu it work!

[abasel]

That's great.. in the end I dumped extended menu and simply used two instances of the standard menu.

[TheAnt]

abassel
does your menus show both active items? I mean into mainlevel and sublevel.
I can't get both active, just only one. Please see attach nr. 1 and nr 2

01.gif

02.gif

I need it show the current active mainlevel item AND current active sublevel, just into attach nr. 3

03.gif

Have you any suggestion about?

[abasel]

Hi,

Yes it does, but only if an option from the submenu has been selected.

I can't really look at it now as I'm off to a conference for three days... I'll try and look at it next week.

Cheers
Andre

[nkwajoomla]

This is cool. But is there a way to have the submenu drop down automatically while hovering on the menu buttons? (This is for the Ja_Purity template.)

I would like for the submenu to display horizontally beneath the top row of the mainmenu items in the hornav position.

I have been able to get the submenu to display horizontally, however it is relative to the position of it's parent mainmenu item, so it starts running off the right side of the site.

I'd like to modify the existing menu as it works the way I want it other than this. Has anyone found a solution to this already or has any ideas of how to make this horizontal submenu work?

[travitzki]

I would like for the submenu to display horizontally beneath the top row of the mainmenu items in the hornav position.

I finally found the solution for this problem (in Ja_purity), on this site: http://bnmngcomputing.wordpress.com/201 ... -template/
In my case (maybe because I'm using green header), some extra job were necessary. The final result is here:
http://rizomas.net/
(click on something and submenu appears)

First the basic instructions:

1- Editing files:
>>>Open up index.php, which is in the ja-purity folder. There are two blocks of code which contain the word “hornav”. One block is around line 47 and the other is around line 145. My line numbers may be off because I’ve done some other messing around with my file. Copy each of these blocks and paste the copy right below. In the first copied block, replace “hornav” with “subhornav” and ja-sosdmenu.css with ja-sosdsubmenu.css. In the second copied block, replace “hornav” with “subhornav”, “mainnavwrap” with “subnavwrap”, and “mainnav” with “subnav”.

In your templateDetails.xml file, make a “subhornav” position line below the existing “hornav” position line.

Now, copy the file ja-sosdmenu.css to a new file called ja-sosdsubmenu.css. In ja-sosdsubmenu.css, look for all blocks with the word “sub” in them and delete them ( I don’t know if you have to do this, but you don’t need them and it might prevent some confusion later). Then do a global search and replace on the word “main” and replace it with the word “sub”. This is the css file that will control the way your submenu looks. In the block that starts with “#ja-subnav a {“, I changed “padding 10px 20px” to “padding 1px 20px”, and did the same in the block which starts with “#ja-subnav ul.menu li a {“. This made the submenubar thinner than the main menubar.

2- At the backend
Make a submenu for each menu item in your horizontal menu, even if that submenu only has one, blank menu item. You can use   for the title of the blank item, and the link can be to your home page. If you don’t have something there then the menu bar won’t display, and it doesn’t look good for the submenubar to appear and disappear as users click around.

For each new submenu, make a copy of the Main Menu module and associate the copy with the submenu. Edit the new module, and set the position of the module to “subhornav”. YOU CAN USE ONE MODULE FOR EACH MENU (NOT SUBMENU), DONT NEED SO MANY MODULES! The secret is changing module parameters ("start level" and "end level"), in my case, to 1 and 1.

In the Menu Assignment section, choose the option labeled “Select Menu Item(s) from the List”, and select the appropriate menu items for which you want the particular submenu to appear. That will include the parent item from the main horizontal menu, and the siblings from the submenu. You have to keep up on this when you add new menu items.

3- Some fixes I added:

>> After installing the horizontal submenu, the dropdown submenu lost the green background. To fix it, I have to change the ja-sosdmenu.css file, setting the old green collor on two "background:none" lines (2nd and 3rd levels of menu).
>> To set the color of my new submenu, I added a line in ja-sosdsubmenu.css file. The line: (change the color)

#ja-subnav { background: #622400; }

>> To reduce the code, I removed all things relative to second, third and above levels of menu in the ja-sosdsubmenu.css file. I want only one line of horizontal submenu.

Thats it

[ant]

4) Now edit the sub_menu
Under Module parameters make the start level 1 and the end level one.
Under the Advanced parameters set menu class suffix to _sub

This is the greatest solution I found! No tables, no javascript... Just pure HTML!

Thank you for the tip!

[mojoe]

Thank you for this great thread - it was much more difficult to find this solution than I anticipated.

I still have two remaining issues:
You can see them at the test site: http://gisecv2.ccsfgis.org/

1) The selected parent menu displays both the subnavhorz & the drop-down list too. The modules have everything related to dropdowns off.

2) the subnavhorz floats left all the way on my ja_purity which has a defined width of 1024.

Any ideas?

Thanks,
m.

[abasel]

I'm a little confused, what part of the CSS sets the Main menu's left position? I need to understand this first before looking at the Submenu.

One other issue:

In http://gisecv2.ccsfgis.org/templates/ja ... sdmenu.css, there is an error... there is a \ in the width statement.

Code: Select all

#ja-mainnav ul.menu li ul {
	width: 16.4em;
	position: absolute; /* second-level lists */
	z-index: 99;
	height: auto;
	w\idth: 15.9em;
}

[mojoe]

the float seems to control the sub-menu position:

Code: Select all

#ja-subnav ul.menu {
	margin: 0; /* all lists */
	padding: 0;
	float: left;
	border-right: 1px solid #555555;
}

I don't know the css to auto set with template width. Thoughts?

[abasel]

What has me confused is what determine's its left indent

[mojoe]

Exactly. I don't get it either.