CSS navbar: How do you have current page button selected?

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Hello,

I have a navbar that I'm working on, but I can't figure out how to have the button selected for the current page. For example, if when you land on the home page, I want to have the 'home' button on the navbar selected. I want to do this for each of the pages.

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Nevermind...
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

If you figured it out, care to share your solution so that future visitors to this topic will know what to do?
  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Ok, here's the solution:

First, the CSS:
Code: [ Select ]
div#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div#navigation a{
    display: block;
    width: 170px;
    height: 40px;
    line-height: 36px;
    color:#000000;
    text-decoration: none;
    background-image: url(images/button.jpg);
    background-repeat:no-repeat;
    background-position: left;
    text-indent: 35px;
}

div#navigation a:hover{
background-position: right;
color: #fff;
}

div#navigation a#current {
    background-position: right;
    color: #fff;
}
  1. div#navigation ul {
  2.     margin: 0;
  3.     padding: 0;
  4.     list-style-type: none;
  5. }
  6. div#navigation a{
  7.     display: block;
  8.     width: 170px;
  9.     height: 40px;
  10.     line-height: 36px;
  11.     color:#000000;
  12.     text-decoration: none;
  13.     background-image: url(images/button.jpg);
  14.     background-repeat:no-repeat;
  15.     background-position: left;
  16.     text-indent: 35px;
  17. }
  18. div#navigation a:hover{
  19. background-position: right;
  20. color: #fff;
  21. }
  22. div#navigation a#current {
  23.     background-position: right;
  24.     color: #fff;
  25. }


Go to http://www.austinclassicalballet.com to see what I'm talking about. When you go there, the you'll see that the star next to the home button on the navbar is black, indicating that you're on the current page.

In order to do this, I created an id named 'current' (see definition above) and had to set the id in the index.htm doc. This is not a very elegant solution, but I'm not sure how else to do this without using a scripting language and/or server side includes. The site isn't big enough to warrant server side technology, so I just deal with the fact that I have to modify the nav bar code for each page.

On a similar note, I used templates in Dreamweaver so that I don't have to modify all the pages if I change something which they all share, like the banner or footer. Usually this is the case with the navbar, but since I had to set the id for each page, I created the navbar in an editable region in the template. I don't know why I'm telling you this...maybe I think I'm cleaver or something..
  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

Anyone have a more elegant solution for this? Maybe using Javascript or something that only CSS gurus's know about?
  • honeyham
  • Novice
  • Novice
  • honeyham
  • Posts: 16

Post 3+ Months Ago

Hmm...I believe you can get the same result by going to "insert", "image objects" and "navigation bar". There, you can add ur different buttons with the different states. If you want to indicate that you are on the "home" page...you can check the box that says "show 'down image' initially".

After inserting a nav bar, and you want to modify it...go to "modify", "navigation bar".
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

You may be able to use php somting like
Code: [ Select ]
 
if(isset($_GET['page']))
$page = $_GET['page']
 
if($page == home){print "<img scr='thisone.gif'/>"}
ifelse{...}
 
  1.  
  2. if(isset($_GET['page']))
  3. $page = $_GET['page']
  4.  
  5. if($page == home){print "<img scr='thisone.gif'/>"}
  6. ifelse{...}
  7.  

There is proble a better way around it but I tend to do this instead:-
Code: [ Select ]
 
You are on page <?php $page ?>
 
  1.  
  2. You are on page <?php $page ?>
  3.  

You set $page as the page id you are on note that you have to use php (which I do) as a way to navigate you site.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.