PDA

View Full Version : Current Page Styling



Jimmy1981
Aug 30th, 2011, 01:17 PM
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:


<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:


/* #################### 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;

}

vikram1vicky
Aug 30th, 2011, 01:52 PM
You can create new class and assign to particular link according to the page you are on...

Jimmy1981
Aug 30th, 2011, 02:01 PM
Hi Vickram,

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

vikram1vicky
Aug 30th, 2011, 02:03 PM
Following is the example


<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....
:)

Jimmy1981
Aug 30th, 2011, 02:12 PM
Thanks Vikram, works great.