Horizontal Menu & Submenu using CSS only

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Horizontal Menu & Submenu using CSS only

Post by abasel » Tue Jul 29, 2008 6:54 am

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?
Andre
==============================
To learn is to live!

herb200mph
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3226
Joined: Sun Jun 25, 2006 12:12 am
Location: Salisbury, NC/USA (N. of Charlotte)
Contact:

Re: Horizontal Menu & Submenu using CSS only

Post by herb200mph » Tue Jul 29, 2008 12:45 pm

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.
http://www.200mphMedia.net
Author: Joomla! 3: Boot Camp book @ Amazon.com

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Tue Jul 29, 2008 7:22 pm

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.
Andre
==============================
To learn is to live!

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Wed Jul 30, 2008 12:01 pm

The "Extended Menu" module seems to create the correct div tags for me... will keep you posted..
Andre
==============================
To learn is to live!

User avatar
TheAnt
Joomla! Explorer
Joomla! Explorer
Posts: 350
Joined: Wed Aug 31, 2005 7:43 am
Location: Milano - Italy

Re: Horizontal Menu & Submenu using CSS only

Post by TheAnt » Wed Feb 18, 2009 9:28 am

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

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Wed Feb 18, 2009 10:07 am

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;
}
}
Andre
==============================
To learn is to live!

User avatar
TheAnt
Joomla! Explorer
Joomla! Explorer
Posts: 350
Joined: Wed Aug 31, 2005 7:43 am
Location: Milano - Italy

Re: Horizontal Menu & Submenu using CSS only

Post by TheAnt » Wed Feb 18, 2009 10:21 am

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

User avatar
TheAnt
Joomla! Explorer
Joomla! Explorer
Posts: 350
Joined: Wed Aug 31, 2005 7:43 am
Location: Milano - Italy

Re: Horizontal Menu & Submenu using CSS only

Post by TheAnt » Wed Feb 18, 2009 11:25 am

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

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Wed Feb 18, 2009 6:35 pm

List

All the best :-)
Andre
==============================
To learn is to live!

User avatar
TheAnt
Joomla! Explorer
Joomla! Explorer
Posts: 350
Joined: Wed Aug 31, 2005 7:43 am
Location: Milano - Italy

Re: Horizontal Menu & Submenu using CSS only

Post by TheAnt » Wed Feb 18, 2009 7:02 pm

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

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Wed Feb 18, 2009 7:38 pm

That's great.. in the end I dumped extended menu and simply used two instances of the standard menu. :D
Andre
==============================
To learn is to live!

User avatar
TheAnt
Joomla! Explorer
Joomla! Explorer
Posts: 350
Joined: Wed Aug 31, 2005 7:43 am
Location: Milano - Italy

Re: Horizontal Menu & Submenu using CSS only

Post by TheAnt » Mon Feb 23, 2009 1:46 pm

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?
You do not have the required permissions to view the files attached to this post.

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Mon Feb 23, 2009 10:44 pm

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
Andre
==============================
To learn is to live!

User avatar
nkwajoomla
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Sat Oct 11, 2008 1:46 pm

Re: Horizontal Menu & Submenu using CSS only

Post by nkwajoomla » Thu Oct 22, 2009 2:39 pm

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?

User avatar
travitzki
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sat Mar 06, 2010 5:42 pm
Location: São Paulo, Brasil
Contact:

Horizontal Menu with horizontal Submenu in Ja_purity

Post by travitzki » Wed Apr 07, 2010 6:05 am

nkwajoomla wrote: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 &nbsp; 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
Rodrigo Travitzki
http://rizomas.net

User avatar
ant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 158
Joined: Sun Sep 18, 2005 1:22 pm
Location: Italy
Contact:

Re: Horizontal Menu & Submenu using CSS only

Post by ant » Fri Sep 10, 2010 2:49 pm

abasel wrote: 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! :geek:

Thank you for the tip! ;)
Ant at Artimediali Web Design
Realizzazione siti web Joomla!
http://www.artimediali.net

mojoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Dec 13, 2006 6:24 pm

Re: Horizontal Menu & Submenu using CSS only

Post by mojoe » Wed Dec 08, 2010 11:26 am

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.

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Fri Dec 10, 2010 4:02 am

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;
}
Andre
==============================
To learn is to live!

mojoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Dec 13, 2006 6:24 pm

Re: Horizontal Menu & Submenu using CSS only

Post by mojoe » Sat Dec 11, 2010 7:05 am

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?

User avatar
abasel
Joomla! Explorer
Joomla! Explorer
Posts: 338
Joined: Wed Nov 07, 2007 7:58 pm
Location: Auckland, New Zealand

Re: Horizontal Menu & Submenu using CSS only

Post by abasel » Sat Dec 11, 2010 11:04 pm

What has me confused is what determine's its left indent
Andre
==============================
To learn is to live!

mojoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Dec 13, 2006 6:24 pm

Re: Horizontal Menu & Submenu using CSS only

Post by mojoe » Sun Dec 12, 2010 12:15 am

Exactly. I don't get it either.


Locked

Return to “Templates for Joomla! 1.5”