Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Sydney, Australia
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post Making current tab coloured

    Hi there, this is my first post so hope I'm in the right category:

    I have created a navigation bar which I'm happy with except I want the current tab (the page the visitor is currently on) to stay coloured so it is obvious which page they are on. My html is here:

    Code:
    <div id="menu">
    <a class="active_page" href="index.html">home</a>
    <a href="about.html">about</a>
    <a href="social.html">social</a>
    <a href="services.html">services</a>
    <a href="cartoons.html">cartoons</a>
    <a href="http://mojoonlinesolutions.blogspot.com.au" target="_blank">blog</a>
    <a href="contact.html">contact</a>
    </div>
    Here is my CSS:

    Code:
    #menu a, #menu a:visited {
      position:relative;
      right:-10px; 
      text-decoration:none; 
      text-align:center; 
      background-color:#fff; 
      color:#2E55D8; 
      display:inline; 
      width:10em; 
      border:5px solid #fff; 
      border-color:#AEBDF0 #112258 #112258 #AEBDF0; 
      padding:2px 25px 2px 25px;
      }
      
    #menu a:hover {
      top:2px;
      font-weight:bolder;
      left:5px; 
      color:#112258;
      border-color:#112258 #AEBDF0 #AEBDF0 #112258; 
      }
    Does anyone have the time to help me please? I'm a bit of noob! Thanking you in advance.

    Nell

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Here are a few tutorials on the subject.

    http://www.sunsean.com/idTabs/#advanced

    http://www.sitepoint.com/css3-tabs-u...rget-selector/

    http://www.hongkiat.com/blog/50-nice...ation-scripts/

    The second isn't compatible with older browsers. it is CSS3 only.

    I realize a few use jquery, but not all.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    The current tab is presumably the one with class="active_page" so you can use that class in the CSS to apply the different style.

    #menu a.active_page, #menu a.active_page:visited {...}
    #menu a.active_page:hover {...}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    nell68crab (09-24-2012)

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Sydney, Australia
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much, Felgall. It worked and I am ecstatic.

    Nell


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •