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;
}
