Highligh parent and child navigation menu when active or current
Would someone show me how to highlight parent and child navigation menu when active or current. Thank you.
#menu { font-weight:700; list-style:none; width:990px; margin:0px auto 0px auto; height:29px; padding:0px 0px 0px 0px; /* Rounded Corners */ -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; /* Background color and gradients */ background: #014464; background: -moz-linear-gradient(top, #, #); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#)); /* Borders */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } #menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 5px 4px 5px; margin-right:0px; margin-top:0px; border:none; z-index: 1; } #menu li:hover { border: 1px solid #777777; padding: 2px 4px 4px 4px; /* Background color and gradients */ background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); /* Rounded corners */ -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; } #menu li a { font-family:Arial Narrow; font-size:15px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 0px 0px 0px #000; } #menu li:hover a { color:#161616; text-shadow: 0px 0px 0px #ffffff; } |
I just play with Firebug to figure out these things virtually. In this case how about using
HTML Code:
.current_page_item a |
Thanks lmilesw! Worked like a charm.
etask, i used the css lmilesw mentioned and just specified color. I don't have child menu, but hopefully this helps: .current_page_item a { background: #cccccc !important; border: 1px solid #cccccc !important; color: #787878 !important: } |
1 Attachment(s)
Atahualpa 3.7.9
WP 3.4.2 http://www.nodesignstein.com Altho, using the .current_page_item a prevents the a: hover style from taking effect. Anyway around that? I'm thinking it's the !important in my css: Quote:
Also, even after placing the css above, i'm still noticing a 1 pixel border around my 'active' state which seems to be inherited (?) from the "background color" option in ATO>MENU 1 (Page Menu). It's really only noticeable on the bottom of the 'active' menu bar item, but i'd like that menu bar item to 'bleed' right into the main body color. I thought that placing !important; in a:hover state would override what is in the ATO>MENU 1 (Page Menu) options, but i can't seem to shake that 1 px. Argggg. Thanks for the suggestions on this issue so far! thoughts? attached is a pic of my issue and here's my css (via JDs cheat sheet): Quote:
|
You guys are so nice. Thank you very much for all your help.
|
I am working on another navigation menu and try to do the same thing. Any idea? Thanks.
CSS: #nv { overflow: hidden; padding-left: 3px; height: 33px; {MENUBGCODE}; } #nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url({IMGDIR}/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; } .ie_all #nv li { line-height: 36px; } .ie6 #nv li { line-height: 33px; } #nv li a { float: left; padding: 0 9px; height: 33px; } #nv li a { color: {MENUTEXT}; } #nv li span { display: none; } #nv li.a { margin-left: -1px; {MENUHOVERBGCODE}; } #nv li.a a { color: {MENUHOVERTEXT}; } #nv li a:hover { background: url({IMGDIR}/nv_a.png) no-repeat 50% -66px; } #nv li.hover a:hover, #nv li.hover a { background: url({IMGDIR}/nv_a.png) no-repeat 50% -99px; } #mu { position: relative; z-index: 1; } .ie6 #mu, .ie7 #mu { line-height: 0; font-size: 0; } #mu ul { background: url({IMGDIR}/mu_bg.png) no-repeat 0 100%; line-height: 22px; z-index: 2; font-size: 12px; } #mu li { float: left; height: 32px } #mu a { float: left; display: inline; margin: 5px 6px; padding: 0 10px; white-space: nowrap; } #mu a:hover { margin: 4px 5px; border: 1px solid {SPECIALBORDER}; background: {SPECIALBG}; color: {HIGHLIGHTLINK}; text-decoration: none; } .floatmu { position: absolute; left: 0; top: 0; } HTML: <div id="nv"> <ul> <!--{loop $_G['setting']['navs'] $nav}--> <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}--> <!--{/loop}--> </ul> <!--{hook/global_nav_extra}--> </div> <!--{if !empty($_G['setting']['plugins']['jsmenu'])}--> <ul class="p_pop h_pop" id="plugin_menu" style="display: none"> <!--{loop $_G['setting']['plugins']['jsmenu'] $module}--> <!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}--> <li>$module[url]</li> <!--{/if}--> <!--{/loop}--> </ul> <!--{/if}--> $_G[setting][menunavs] <div id="mu" class="cl"> <!--{if $_G['setting']['subnavs']}--> <!--{loop $_G[setting][subnavs] $navid $subnav}--> <!--{if $_G['setting']['navsubhover'] || $mnid == $navid}--> <ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}"> $subnav </ul> <!--{/if}--> <!--{/loop}--> <!--{/if}--> </div> |
All times are GMT -6. The time now is 01:31 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.