homepage Welcome to WebmasterWorld Guest from 54.166.228.100
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 / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
show active button on nav menu
jp12




msg:4613488
 6:38 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;
}

 

htmlbasictutor




msg:4617695
 3:39 pm on Oct 18, 2013 (gmt 0)

Put an id in the body of each page identifying what page it is. e.g. id="about"

Give each menu item a style you can identify as that page. e.g. class="menuabout"

Then in the CSS create a style for the combination of the id and style. e.g. #about .menuabout with the styling you want to show that it is active.

jon22




msg:4620289
 11:58 am on Oct 31, 2013 (gmt 0)

Or you could use jQuery like this:

$(function(){
$page = jQuery.url.attr("file");
if(!$page) {
$page = 'index.html';
}
$('#menu a').each(function(){
var $href = $(this).attr('href');
if ( ($href == $page) || ($href == '') ) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});

then css

#menu a.active {background: #ff0000;}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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