Hi everyone,

Im new here and I need you help.

My site > makeityourpart . com

I need to change my top nav menu where it says... Home, Cars, Bikes, Vans etc.

My developer was based in Inidia and was not a good communicator so I need to finish this part myself.

The thing is... my site uses templates.

So where my nav bar is, its actually in its own php file, not in the index file

So i need a menu then when a user clicks on say "cars" it takes them to the cars page but also highlights that option on the nav bar to let them know what section they are in.

I have tried free css menus on the net and they work ok but they dont let my user know where they are on the site.

I need it to highlight the section they are on when the click on it but dont know how.

Please help

Thanks in advance

If you have no experience at all, it is a bit difficult to explain how to do this, but there are several ways. There is no built in way in CSS to accomplish it.

The part of the formula that is needed regardless is a class in the CSS that controls how the menu appears when the page is active. Usually I choose the same style that appears when the cursor is held over the menu item. If you navigation has an id="navigation", this will look something like this in your CSS file:

CSS

#navigation a:hover {
   color: red;
   text-decoration: underline;
}

You'll need to put a comma after this rule to indicate which class you want to use that imitates this rule, like this:

CSS

#navigation a:hover, .active {

Now, any element with a class="active" will look the same as if the cursor was held over it.

If the nav file is in a PHP file, you can take advantage of PHP's global variables. One such variable is the $_SERVER['REQUEST_URI']. This tells us what request has been made to the browser, excluding the domain name. Then, on each element, you can do a simple IF statement to determine whether to use the active class:

PHP Code:

<ul id="navigation">
    <li><a href="/"<?php if($_SERVER['REQUEST_URI'] == '/'{echo ' class="active"';}?>>Home</a></li>
    <li><a href="/about.php"<?php if($_SERVER['REQUEST_URI'] == '/about.php'{echo ' class="active"';}?>>About</a></li>
    <li><a href="/contact.php"<?php if($_SERVER['REQUEST_URI'] == '/contact.php'{echo ' class="active"';}?>>Contact</a></li>
</ul>

Another way, would be to use JavaScript to add the class to the navigation. This is less accessible, but less cumbersome than the above technique. By less accessible, I mean if a user has JavaScript turned off, it won't work:

<ul id="navigation">
    <li><a href="/">Home</a></li>
    <li><a href="/about.php">About</a></li>
    <li><a href="/contact.php">Contact</a></li>
</ul>
<script type="text/javascript">
var a = document.getElementById("navigation").getElementsByTagName("a");
for(var i = 0; i < a.length; i++) {
    if(a[i].href == window.location.href) a[i].className = "active";
}
</script>

Is there anyway you could create a menu for me, with around 6-7 links so it works in the way I want.

Im willing to pay.

Or if your too busy is there any genarators on the net that can do this for me.

Thanks in advance