Welcome to WebmasterWorld Guest from 54.226.194.180

Forum Moderators: not2easy

Message Too Old, No Replies

show active on nav menu

     

jp12

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

3:30 pm on Oct 3, 2013 (gmt 0)

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



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

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

3:32 pm on Oct 7, 2013 (gmt 0)

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



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

4:11 pm on Oct 7, 2013 (gmt 0)

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



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

5:42 pm on Oct 7, 2013 (gmt 0)

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



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

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

9:00 pm on Oct 7, 2013 (gmt 0)

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



#main .main ul { 
display: block;
}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month