I'm still new to Front End Development and working on my first really big site / wordpress blog.
So my question is this, I have a Menu that will be the same on all pages on the site. However each section will have it's name highlighted in the Menu Nav.
Current Nav_Bar markup:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li"><a href="../index.html">Home</a></li>
<li class="nav_li"><a href="#">About</a></li>
<li class="nav_li selected"><a href="#blog_content">Blog</a></li>
<li class="nav_li"><a href="#">Book</a></li>
<li class="nav_li"><a href="#">Media</a></li>
<li class="nav_li"><a href="#">Events</a></li>
<li class="nav_li"><a href="#">Services</a></li>
<li class="nav_li"><a href="#">Contact</a></li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<a href="#" title="Lets find it!"><div class="search_button">Go</div></a>
</li>
</ul>
</div><!-- nav_bar -->
Now I've build pages before using this simple PHP code: <?php include("menu.php"); ?>
However, how would you guys 1st: organize this menu to accept and incoming value, like menu.php+select="home" and 2nd how would you pass in that value to add a class of selected to one of the Menu items?
Before the include, set a value in some parameter, like $page = 'blog' and then in the menu.php
<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>"><a href="#blog_content">Blog</a></li>
I assume you want your 'incoming value' for the purpose of highlighting a menu item (rather than displaying a particular page)? It's unnecessary, because the browser already knows what page it's on.
This is one way of highlighting the current page in jQuery:
$('.nav li a').each(function(){
var link = $(this).attr('href'),
current_page = location.href;
if(current_page.indexOf(link) != -1) {
$(this).addClass('current-page');
}
});
This can be done using javascript
var url=document.location.toString();
if(url=="http://www.something.com/some.php")
{
//code to add class to specific link
}
else if(url=="http://www.something.com/someelse.php")
{
//code to add class to specific link
}
You can also do this on server side in menu.php
$url=$_SERVER['REQUEST_URI']
Then check the url and add class name accordingly
First off your class on li "nav_li" is redundant and could be removed. Use .nav li in place to ref these list items with less lines of code. This works both as a JQuery selector and CSS selector. Second, to answer you actual question; I would use the active class as follows:
// Assuming the following html. <ul class="nav"><li><a href="/about.php">About</a></li></ul>
$('.nav li').click(function() {
$('.nav li.active').removeClass('.active');
$(this).addClass('.active');
window.location = $(this).children('a').attr('href');
return;
});
Now in the area where you keep your navbar you check to see if the current url is active by the following:
<?php
$currentUri = $_SERVER['REQUEST_URI'];
<ul class="nav">
<li class="<?php if($currentUri == '/about.php') {echo 'active';} ?>"><a href="/about.php">About</a></li>
</ul>
Add the condition in the php script to each list item.
Sincerely, Kevin
If I'm understainding what you're after, maybe something like:
index.php:
<?php
$page = 'home';
// page code ...
?>
about.php:
<?php
$page = 'about';
// page code ...
?>
etc, etc...
Then menu.php tweaked slightly:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li home"><a href="../index.html">Home</a></li>
<li class="nav_li about"><a href="#">About</a></li>
<li class="nav_li blog"><a href="#blog_content">Blog</a></li>
<li class="nav_li book"><a href="#">Book</a></li>
<li class="nav_li media"><a href="#">Media</a></li>
<li class="nav_li events"><a href="#">Events</a></li>
<li class="nav_li services"><a href="#">Services</a></li>
<li class="nav_li contact"><a href="#">Contact</a></li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<a href="#" title="Lets find it!"><div class="search_button">Go</div></a>
</li>
</ul>
</div><!-- nav_bar -->
and finally some javascript:
<script>
$(function () {
$('#nav_bar li.<?=$page?>').addClass('selected');
});
</script>
That assumes jQuery is being used, but it isn't necessary obviously, the same could be done with straight javascript.