Welcome to WebmasterWorld Guest from 54.162.109.245

Forum Moderators: not2easy

Message Too Old, No Replies

show active on nav menu

     
6:49 pm on Sep 28, 2013 (gmt 0)

New User

joined:June 22, 2012
posts: 29
votes: 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;
}
3:30 pm on Oct 3, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 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 ...
8:22 pm on Oct 4, 2013 (gmt 0)

New User

joined:June 22, 2012
posts: 29
votes: 0


when you say centralized, do you mean having the nav as one file and then linking to it from the other pages?
3:32 pm on Oct 7, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 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 ...
4:11 pm on Oct 7, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13056
votes: 299


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.
5:42 pm on Oct 7, 2013 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 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
5:54 pm on Oct 7, 2013 (gmt 0)

New User

joined:June 22, 2012
posts: 29
votes: 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.
9:00 pm on Oct 7, 2013 (gmt 0)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


#main .main ul { 
display: block;
}
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members