Page 1 of 1

Customizing CSS Vertical Menu

Posted: Mon Feb 12, 2007 7:41 am
by asim
Hi,

I have managed to work through my Navigation CSS to stylize the navigation as I wish for it to appear, I kinda got it working but having some difficulty with "active" pages. Basically, I wish for every page that is active to become white like how the current "home page" is but it does not happen on any of the other links. For example if you click on "Link One", it still has the background image on it, also I added a extra page with no sub-menu and this does the same thing, can you help?

Here is working example: http://www.asimjanjua.com/admin

CSS Used:

Code: Select all


/* Vertical menu for the CMS CSS Menu Module */
/* by Asim Janjua */


/* The wrapper determines the width of the menu elements */

#menuwrapper {
width:135px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
margin:0;
margin-left:1px;
border:0;
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
list-style: none; 
margin: 0px; 
padding: 0px; 
margin-left: -1px;
}
#primary-nav ul { 
position: absolute; 
top: 0; 
left: 100%; 
display: none; 
}
#primary-nav li { 
margin-bottom: -1px; 
position: relative; 
}


/* Styling the GLOBAL apperance of the menu elements */
#primary-nav li a { 
display: block;
height:22px;
line-height:20px;
margin: 0px; 
padding: 5px 10px; 
color:#676767;
text-decoration: none; 
background: transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/ 
}
#primary-nav li, #primary-nav li.menuparent { 
background-color: #ececec; 
border-right:#BDBDBE solid 1px;
min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive,li.menuactiveh { 
background-color: #FFF;
border:none;
}

/* Styling the basic apperance of the menuparents (main menu) - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparenth {
color: #666666; 
background:  url(admin/themes/jmt/images/main-menu-grad-light.gif) no-repeat; 
}

#primary-nav li.menuparent:hover{
color: #035CC0; 
background:  url(admin/themes/jmt/images/main-menu-grad-dark.gif) no-repeat;

}

/*SUB MENU STYLING*/
#primary-nav li ul li{
width:135px;
font-size:10px;
border:1px solid #E4E4E4;
border-bottom-width:0;
line-height:20px;
margin-left:3px;
background-color:#DC3175;
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
}

#primary-nav li ul li a {
color:#FFF;
}

#primary-nav li ul li:hover {
background-color: #222222;
}

/* Styling the apperance of menu items on hover 
/*#primary-nav li:hover,
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
background-color: #C4C5C6; 
}*/


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
display: block; 
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
border-left: 1px solid #006699; 
border-top: 1px solid #006699; 
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0.5em;
background-color: #fff;
margin: 0;
width: 100%;
}


/* separator */
#primary-nav li hr.separator {
display:block;
height: 0.5em;
color: #abb0b6;
background-color: #abb0b6;
width: 100%;
border:0;
margin:0;
padding:0;
border-top: 1px solid #006699;
border-right: 1px solid #006699;
}

.clearb{
background:  url(admin/themes/jmt/images/main-menu-grad-bottom.gif) no-repeat;
height:150px;
}


Re: Customizing CSS Vertical Menu

Posted: Mon Feb 12, 2007 8:03 am
by RonnyK
asim,

I'm using the following code, so that hovering works correctly.

Code: Select all

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   background-image: url(images/cms/arrowts.gif);
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #000080; 
}
Ronny

Re: Customizing CSS Vertical Menu

Posted: Mon Feb 12, 2007 3:16 pm
by asim
Hi Ronny,

That worked! Thanks. I was wondering if you could give me an idea of how to style the sub menu items (just the second level) independtly of the main nav.

Cheers,

Asim

Re: Customizing CSS Vertical Menu

Posted: Mon Feb 12, 2007 4:02 pm
by RonnyK
asim,

the code I included was basically the default css for the "Navigation: CSSMenu - Vertical". If you'll check that css, you'll find the structure.

Ronny

Re: Customizing CSS Vertical Menu

Posted: Mon Feb 12, 2007 6:07 pm
by asim
Sorry about that I should have checked.

I have it working now.

Asim

Re: Customizing CSS Vertical Menu

Posted: Mon Feb 12, 2007 7:58 pm
by RonnyK
Asim,

no problem, I was just pointing to the quickest way on working examples, and the easiest startpoint for editing them. I just copy on of the working ones and edit them.

Ronny