Same navigation code on every page
First of all, you'll need to assign a class to each navigation item:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read
<body id="home">,in ‘About Us’ it should be
<body id="about">and in ‘Contact Us’
<body id="contact">.Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
} This basically creates a rule that only takes effect when
class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.
Other Topics
CSS : Vertically aligning with CSS ,CSS : Positioning within a container ,CSS : Hiding text using text-indent ,CSS : The * HTML hack ,CSS : Minimum width for a page ,CSS : Same navigation code on every page
,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE?
,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector
No comments:
Post a Comment