CSS/HTML Override for top menu start and end level

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
ilangutman
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 28, 2010 12:55 pm

CSS/HTML Override for top menu start and end level

Post by ilangutman » Thu Oct 28, 2010 1:11 pm

Hi,

I am using a template which appears to have the top main menu module hard coded, as I am not able to see it when I go into the Module Manager. The menu is working in suckerfish format which is what I want. The only problem is it is displaying all levels of navigation, but I would only like it to display the primary and secondary levels of navigation. If I could see the menu in the module manager I know I could just change the Start Level and End Level parameters. Seeing as this is not possible, I am hoping there is a way to set these parameters in the CSS/HTML. Does anyone know how this can be done?

Any help would be much appreciated.

Thanks,

Ilan

ilangutman
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Oct 28, 2010 12:55 pm

Re: CSS/HTML Override for top menu start and end level

Post by ilangutman » Thu Oct 28, 2010 11:40 pm

OK,

So I worked it out by setting the #navmenu li ul ul { to display: none;. I also removed the arrow that showed up for the 3rd level of navigation, so it is looking like it's almost there. The only problem now is that when I have an active parent menu item, only a line in the very far right part of the active sub-menu items change colour when I hover over them. For the non-active parent items, when I hover over their sub-menu items, the full box is changing colour.

I'm attaching two images - in both cases, the "News & Events" menu item has been selected. You can see the difference when you hover over "Calendar" or "News" compared to "Location" or "School Photos".

I'm also including the CSS suckerfish code:

/* @group NAVBAR */

.menubar {
font: 14px Georgia, "Times New Roman", Times, serif;
width: 100%;
margin: 0px;
}

#navmenu {
height: 36px;
padding: 0px 0px 0px 10px;
margin: 0;
position: relative;
z-index: 10000;
float: none;
}

#navmenu ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
margin-left: 2px;
}

#navmenu ul li {
position: relative;
margin: 0;
}

/*PARENT MENU*/

#navmenu a {
float: left;
text-decoration: none;
display: block;
cursor: pointer;
height: 36px;
line-height: 34px;
padding: 0px 15px;
}

/*PARENT MENU ITEM HOVER*/
#navmenu li a:hover {
height: 36px;
}
#navmenu li a:hover {
/*background-color: red;*/
}

/*ALL LISTS*/

#navmenu li {
float: left;
padding: 0;
background: none;
}

#navmenu ul ul a {
background: none;
border: none;
}

#navmenu li:hover ul,
#navmenu li li:hover ul,
#navmenu li li li:hover ul,
#navmenu li li li li:hover ul,
#navmenu li.iehover ul,
#navmenu li li.iehover ul,
#navmenu li li li.iehover ul,
#navmenu li li li li.iehover ul {
}

/*PARENT ITEM SEPARATOR*/

#navmenu li a {
/* border-right: 1px solid red; */
}




/*DEFINE HOVER COLORS*/

#navmenu li:hover a, #navmenu li.iehover a {
}

#navmenu ul li a:hover,
#navmenu ul li ul li a:hover,
#navmenu ul li ul li ul li a:hover {
}

/*SUBLEVEL STYLES*/

/*SUBLEVEL TEXT STYLES*/

#navmenu li li a {
font-weight: normal;
padding: 0;
height: 26px;
line-height: 26px;
text-indent: 5px;
}

#navmenu ul ul a {
display: block;
text-decoration: none;
width: 170px;
text-transform: none;
}

#navmenu li li {
padding: 0;
background: none;
/*DONT SHOW THE BACKGROUND IMAGE*/
}

/*SUBLEVEL POSITIONING*/

#navmenu li li {
float: left;
padding: 0;
width: 173px;
}

#navmenu li ul ul {
display: none;
margin: -36px 0 0 173px;
}

#navmenu li:hover, #navmenu li.iehover {
left: 0;
}

/*SUBLEVEL HOVER STYLES*/

#navmenu ul ul a:hover {
background: none;
height: 26px;
line-height: 26px;
padding: 0;
margin: 0;
}

#navmenu li li:hover {
}
/* BECAUSE IE DOESNT UNDERSTAND CSS EVEN IN 2007 */

#navmenu li.iehover ul li.iehover {
}


#navmenu li ul {
top: 36px;
position: absolute;
left: -999em;
height: auto;
width: 173px;
font-weight: normal;
border: none;
margin: 0;
padding: 0;
}


#navmenu li.active a {
}
#navmenu li.active a:hover {
}

/* NO SUBLEVEL ACTIVE STYLES */
#navmenu ul li.active ul li a,
#navmenu ul li.active ul li,
#navmenu ul li.active ul li a:hover,
#navmenu ul li.active ul li.hover {
background-image: none;
}
/*SUBLEVEL PARENT INDICATORS*/


#navmenu ul li ul li a.child,
#navmenu ul li ul li a.child:hover {
background-image: none;
}

#navmenu ul li.active ul li a.child,
#navmenu ul li.active ul li a.child:hover {
background-image: none;
}


#navmenu ul li ul li a:hover {
background-image: none;
}

/* HIDE OTHER LISTS FROM IE */

#navmenu li:hover ul ul,
#navmenu li:hover ul ul ul,
#navmenu li:hover ul ul ul ul,
#navmenu li.iehover ul ul,
#navmenu li.iehover ul ul ul,
#navmenu li.iehover ul ul ul ul {
left: -999em;
}

#navmenu li:hover ul,
#navmenu li li:hover ul,
#navmenu li li li:hover ul,
#navmenu li li li li:hover ul,
#navmenu li.iehover ul,
#navmenu li li.iehover ul,
#navmenu li li li.iehover ul,
#navmenu li li li li.iehover ul {
z-index: 100;
left: 0;
}


/* @end */

Thanks,

Ilan
You do not have the required permissions to view the files attached to this post.


Locked

Return to “Templates for Joomla! 1.5”