Back To Website Design Forum

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

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 02, 2007
  • Posts: 44
  • Loc: Austin, TX
  • Status: Offline

Post January 3rd, 2009, 1:59 pm

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 3rd, 2009, 1:59 pm

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 02, 2007
  • Posts: 44
  • Loc: Austin, TX
  • Status: Offline

Post January 3rd, 2009, 3:22 pm

Nevermind...
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post January 5th, 2009, 12:47 am

If you figured it out, care to share your solution so that future visitors to this topic will know what to do?
The Beer Monocle. Classy.
  • locust
  • Beginner
  • Beginner
  • User avatar
  • Joined: Apr 02, 2007
  • Posts: 44
  • Loc: Austin, TX
  • Status: Offline

Post January 12th, 2009, 12:23 am

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. }
  7. div#navigation a{
  8.     display: block;
  9.     width: 170px;
  10.     height: 40px;
  11.     line-height: 36px;
  12.     color:#000000;
  13.     text-decoration: none;
  14.     background-image: url(images/button.jpg);
  15.     background-repeat:no-repeat;
  16.     background-position: left;
  17.     text-indent: 35px;
  18. }
  20. div#navigation a:hover{
  21. background-position: right;
  22. color: #fff;
  23. }
  25. div#navigation a#current {
  26.     background-position: right;
  27.     color: #fff;
  28. }


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
  • Joined: Apr 02, 2007
  • Posts: 44
  • Loc: Austin, TX
  • Status: Offline

Post January 12th, 2009, 12:24 am

Anyone have a more elegant solution for this? Maybe using Javascript or something that only CSS gurus's know about?
  • honeyham
  • Novice
  • Novice
  • No Avatar
  • Joined: Jan 15, 2009
  • Posts: 16
  • Status: Offline

Post January 27th, 2009, 4:34 pm

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
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post February 6th, 2009, 1:59 pm

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.
^__^

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 106 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.