CODEWITHSUNDEEP
htmlcss
user4530588
user4530588

Reputation:

How do i put a line under the page that is currently being viewed on the nav bar?

I have a nav which is this code:

<div id="nav" class="ten columns">
<ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

So heres the nav at the moment: About Portfolio Blog Contact

How do i put a line under the page that is currently being veiwed? So if the user clicks on Portfolio, then the nav bar will look like:

About Portfolio Blog Contact

     ________

Upvotes: 0

Views: 2330

Answers (3)

RouthMedia
RouthMedia

Reputation: 409

I do it automatically on static sites!

I use javascript and jQuery to get the document URL. I then search each href in my menu and add a class to those that match the document URL. In this case, the class added is .activestyle which can be styled any way you like.

var urlname = (document.URL.substring(document.URL.lastIndexOf("\/")+1));

$('#menu ul li').each(function () {
if( $(this).html().indexOf('"'+urlname+'"')!=-1 ){
        $(this).children('a').addClass("activestyle");
}
});

This is a particularly good way of solving the problem as your menu stays the same site wide which is better for site-wide updates.

Upvotes: 0

Paul Rowe
Paul Rowe

Reputation: 788

Typically, this is implemented using server-side software to add a class to the nav item that is selected. Then, you style that class so it has a bottom border. You can set it up so that all the pages have a bottom border of the same width, but the border on the selected item is different from the border on the others (which border should at least "appear" to be transparent).

Edited to include code snippet

<div id="nav" class="ten columns">
  <ul>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<style type="text/css">
div#nav > ul > li {
  border-bottom: 2px solid white;
}
div#nav > ul > li.active {
  border-bottom: 2px solid black;
}
</style>

Upvotes: 1

greatTeacherOnizuka
greatTeacherOnizuka

Reputation: 565

add a class active to the current list element.

<div id="nav" class="ten columns">
<ul>
        <li><a href="#">About</a></li>
        <li class="active"><a href="#" >Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

.active {
    text-decoration:underline;
}

If your site is a static site you will have to do it manually, otherwise you can take advantage of the CMS pre-built classes.

Upvotes: 1

Related Questions