Web Analytics Made Easy -
StatCounter Current Page Styling - CodingForum

Announcement

Collapse
No announcement yet.

Current Page Styling

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Current Page Styling

    Hi,
    I'm using this navbar that i found online and I want to tailor it so that the current page is styled differently so the user knows what page they are on.

    I've seen that you can add a current page to the id, but in this case the id is already named which styles the navbar so not sure how to do it.

    Any help much appreciated.

    My code for my navbar is:

    Code:
    <div class="mynavbar">
    
    <a class="navbartitle" id="t1" href="index.html"
        >Home</a
    ><a class="navbartitle" id="t2" 
          onmouseout="HideItem('prod_submenu');" 
          onmouseover="ShowItem('prod_submenu');"
        >Products</a
    ><a class="navbartitle" id="t3" href="gallery.html"
        >Gallery</a
    ><a class="navbartitle" id="t4" href="aboutus.html"
        >About Us</a
    ><a class="navbartitle" id="t5" href="contactus.html"
        >Contact Us</a
    ><a class="navbartitle" id="t6" href=""
        >Delivery</a>
    
    
    <!-- Products sub-menu, shown as needed  -->
    <div class="submenu" id="prod_submenu" 
        onmouseover="ShowItem('prod_submenu');" 
        onmouseout="HideItem('prod_submenu');">
      <div class="submenubox">
        <ul>
          <li><a href="" class="submenlink">test1</a></li>
          <li><a href="" class="submenlink">test2</a></li>
          <li><a href="" class="submenlink">test3</a></li>
          <li><a href="" class="submenlink">test4</a></li>
          <li><a href="" class="submenlink">test5</a></li>
          <li><a href="" class="submenlink">test6</a></li>
        </ul>
      </div>
    </div>
    </div><!-- end of sub-meus -->
    
    <!--End of Navigation Bar-->
    My CSS looks like this:

    Code:
    /* ####################   Navigation bar CSS styling   ################## */ 
    
    .mynavbar {
    position: absolute;
      width: 938px;
      height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
      margin:0 ; border: 0; padding:0;
      background-color: #fff; 
    
    
    }
    
    
    a.navbartitle {
      display: block; 
      float: left;
      color: white;
      background-color:  #4C9BCD;
      font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      margin: 0; border:0; padding: 0;
     	border:solid;
    	border-width:1px;
    	border-color:#4C9BCD;
      line-height: 23px; /* corresponds to 'top' value of .submenu below */
      text-align: center;
      text-decoration:none;
    
    
    }
    a.navbartitle:hover {
      background-color: #3366DD;
    
    }
    
    
    
    
    /* menu title widths */
    #t1 { width: 155px; }
    #t2 { width: 154px; }
    #t3 { width: 154px; }
    #t4 { width: 154px; }
    #t5 { width: 154px; }
    #t6 { width: 155px; }
    /* We just specify a fixed width for each menu title. Then, down below we specify
        a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
        Using these fixed values isn't as elegant as just letting the text of each 
        menu title determine the width of the menu titles and position of the submenus,
        but we found this hardwired approach resulted in fewer cross-browser/cross-OS 
        formatting glitches -- and it's pretty easy to adjust these title widths and the
        corresponding submenu 'left' positions below, just by eyeballing them whenever
        we need to change the navbar menu titles (which isn't often). */
    
    .submenu {
    	position:absolute;
    
      top: 23px; /* corresponds to line-height of a.navbartitle above */
      padding: 0; margin: 0; 
    	width:152px; /* If adjust this, then adjust width of .submenu below a too */
    	color: white;
    	background-color:  #4C9BCD;
    	border: 1px solid #4C9BCD; /* box around entire sub-menu */
      font-family: Verdana, Arial, Geneva,  Helvetica, sans-serif;
    	font-size: 9px;
    }
    /* Fix IE formatting quirks. */
    * html .submenu { width: 151px; } /* IE needs narrower than width of .submenu above */
    /* End */
    
    /* position of each sub menu */
    /* We just eyeball the position of each submenu here -- can move left or right as needed. 
       If you adjust menu title text, you might want to adjust these too. */
    #products_submenu {  left: 0px; visibility: hidden;  }
    #prod_submenu {  left: 158px; visibility: hidden;  }
    #funstuff_submenu {  left: 372px; visibility: hidden; }
    #aboutus_submenu {  left: 558px; visibility: hidden; }
    #contact_submenu { left: 747px; visibility: hidden; }
    /* Note, each submenu is hidden when the page loads - then made visible when
        the mouse goes over the menu title. Using the 'visibility' property instead
        of using the 'display' property avoided a bug in some versions of Safari. 
        (The bug is pretty where esoteric: The browser ignored the 'hover' property 
        on 'li' objects inside an object whose display property was set to 'none' 
        when the page loaded...) Using the 'visibility' property instead of 'display'
        would normaly take up extra room on the page, but that's avoided here by putting
        the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
        in .submenu definition, higher up this page. */
    
    .submenu a
    {
      display: block;
      color: #eee; 
      background-color: #4C9BCD;
      width: 132px; /* This should be width of .submenu above minus right-side padding on next line */
      padding: 5px 0px 4px 20px;
      text-decoration: none;
      background-color: #4C9BCD; 
      border-top: 0; border-left: 0; border-right: 0;
     font-size: 10px;
    }
    
    
    ul { position: relative; display: block; }
    li { position: relative; display: block; }
    
    .submenubox { 
      margin: 0; padding: 0; border: 0;
    }
    .submenubox ul
    {
      margin: 0; padding: 0; border: 0;
      list-style-type: none;
    }
    
    .submenubox ul li { 
      margin: 0; padding: 0; border: 0;
    }
    
    .submenubox ul li a:link { }
    .submenubox ul li a:visited { }
    .submenubox ul li a:hover
    {
      color: #fff; /* text color for submenu items */
      background-color: #3366DD;
    
    }

  • #2
    You can create new class and assign to particular link according to the page you are on...

    Comment


    • #3
      Hi Vickram,

      How would I do this? Sorry, am very much a beginner.

      Comment


      • #4
        Following is the example
        Code:
        <ul>
              <li><a href="" class="activeclass">test1</a></li>
              <li><a href="" class="submenlink">test2</a></li>
              <li><a href="" class="submenlink">test3</a></li>
              <li><a href="" class="submenlink">test4</a></li>
              <li><a href="" class="submenlink">test5</a></li>
              <li><a href="" class="submenlink">test6</a></li>
            </ul>
        Create a new class in CSS and assign it to the page related link, for example, if you are on test1 page.. the code will be as given in above example....
        Last edited by vikram1vicky; Aug 30, 2011, 09:05 AM.

        Comment


        • #5
          Thanks Vikram, works great.

          Comment

          Working...
          X