homepage Welcome to WebmasterWorld Guest from 54.161.192.130
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
show active on nav menu
jp12



 
Msg#: 4613489 posted 6:49 pm on Sep 28, 2013 (gmt 0)

I want to make each button on top in my nav menu stay highlighted when itís on that respective page. Can I use the active class but also do I have to copy the menu on every page or is there a way to use php includes to the nav file?

HTML
<div id="menu">
<div class="logo"></div>
<div class="toplevelmenu"><a href="index.php"><span>HOME</span></a></div>
<div class="toplevelmenu" id="whoweare"><a href="whoweare.php"><span>WHO WE ARE</span></a></div>
<div class="toplevelmenu"><a href="howwedoit.php"><span>HOW WE DO IT</span></a></div>
<div class="toplevelmenu" id="whatwedo"><a href="whatwedo.php"><span>WHAT WE DO</span></a></div>
<div class="toplevelmenu"><a href="news.php"><span>NEWS</span></a></div>
<div class="toplevelmenu"><a href="contactus.php"><span>CONTACT US</span></a></div>
</div>
<div id="dropdown_container">
<div class="dropdown" id="drop_whoweare"><table align="left" width="409" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><a href="aboutus.php">The Company</a>&nbsp;&nbsp;&nbsp;&nbsp;|</td>
<td><a href="#">Management Team</a>&nbsp;&nbsp;&nbsp;&nbsp;|</td>
<td><a href="#">Support Team</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
<td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
<td class="subsubmenu"><a href="#" style="color:#fff;">xxx</a></td>
</tr>
</table></div>
<div class="dropdown" id="drop_whatwedo"> <a href="riskmanagement_advisory.php">Risk Management Advisory</a>&nbsp; |&nbsp; <a href="exchange_otc_brokerage.php">Exchange & OTC Brokerage</a>&nbsp; |&nbsp; <a href="margin_operations.php">Margin & Operations Financing</a>
</div>
</div>


CSS



div.toplevelmenu
{
width:110px;
height:21px;
float:left;
display:block;
background-color:#E4E4E4;
margin-left:5px;
padding-top:39px;
padding-left:20px;

background-image:url(../images/topbutton.jpg);
background-repeat:no-repeat;
}


div.toplevelmenu:hover
{
background-color:#ADD474;
background-image:url(../images/topbutton_green.jpg);
background-repeat:no-repeat;
color:#fff;
}


div.logo
{
background-image:url(../images/transparentlogo_lg.png);
display:block;
width:183px;
height:80px;
float:left;
margin-top:-20px;
}


div.toplevelmenu span
{
font-size:12px;
font-weight:bold;
color:#000;
}

div.toplevelmenu a:link
{
text-decoration:none;
}

.dropdown
{
width:983px;
float:left;
display:block;
background-image:url(../images/dropdown_back.jpg);
background-repeat:repeat-x;
padding-top:10px;
color:#fff;
padding:5px;
}



#dropdown_container
{
height:102px;
width:1000px;
float:left;
display:block;
}


.dropdown table, .dropdown table tr, .dropdown table tr td
{
text-wrap:none;
}

.dropdown#drop_whoweare
{
display:none;
height:90px;
font-size:15px;
font-weight:bold;
padding-top:12px;
}

.subsubmenu
{
font-size:13px;
font-weight:normal;
}

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4613489 posted 3:30 pm on Oct 3, 2013 (gmt 0)

A lot of what you are asking depends on how your site is structured. For custom dynamic sites, generally the navigation is included/rendered separately, in which case you can enhance that functionality to assign the proper class to the active page link.

If you do not currently have your navigation centralized, that would be my first recommendation. If it is already centralized, then it's simply a matter of looking at what renders the navigation. Is it a SSI (Server-Side Include)? Is it PHP? Perl? Something else?

Worst case scenario, you can use JavaScript to parse the current location and highlight the appropriate section. Worst case scenario ...

jp12



 
Msg#: 4613489 posted 8:22 pm on Oct 4, 2013 (gmt 0)

when you say centralized, do you mean having the nav as one file and then linking to it from the other pages?

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4613489 posted 3:32 pm on Oct 7, 2013 (gmt 0)

Not "linking" to it. Including it in your code, depending on what that code is.

The navigation can be its own module, script, template ...

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4613489 posted 4:11 pm on Oct 7, 2013 (gmt 0)

or is there a way to use php includes to the nav file

You can use* includes anywhere. Either vanilla SSI or php or alternative language of your choice. If you use anything even slightly dynamic, you can pass the page name-- or some equivalent information-- to the included file, so it produces different content depending on what page you're on.


* More to the point, _I_ can use et cetera. This is not high-level programming.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4613489 posted 5:42 pm on Oct 7, 2013 (gmt 0)

A neat way to highlight the active topic in navigation is to set an ID or class on both the body indicating its topic and on every (included) item in your menu.

Then in CSS you match them up to highlight them.

e.g.
main.html:
...
<body id="main">
...
<nav><ul>
<li class="main"><a href="main.html">main</a></li>
<li class="about"><a href="about.html">about</a></li>
<li class="buy"><a href="buy.html">send us more money</a></li>
...

and
about.html:
...
<body id="about">
...
<nav><ul>
<li class="main"><a href="main.html">main</a></li>
<li class="about"><a href="about.html">about</a></li>
<li class="buy"><a href="buy.html">send us more money</a></li>
...

etc...

and then in css:

#main .main,
#about .about,
#buy .buy {
color: red;
}
or whatever you use to highlight that item.

Works like a charm, and all you need to do is make sure you set/generate the right id on the body to make the right item in the menu light up as the current one.

HTH

jp12



 
Msg#: 4613489 posted 5:54 pm on Oct 7, 2013 (gmt 0)

yes, thank you that is what I'm doing. Works great!

How would I go about keeping the dropdown part of the menu open when it's on that page? I have it highlighted but the dropdown part closes when you move the mouse cursor off of the link.

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4613489 posted 9:00 pm on Oct 7, 2013 (gmt 0)

#main .main ul { 
display: block;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved