advanced_CSS_5_3
2696 ワード
<html5>
<head>
</head>
<style type="text/css">
/*
Highlighting the current page in a nav bar
*/
/*
To highlight the current page, you simply target the following combination of IDs and class
names:
*/
#home .nav .home a,
#about .nav .about a ,
#news .nav .news a,
#products .nav .products a,
#services .nav .services a {
background-position: right bottom;
color: #fff;
cursor: default;
}
/*
When the user is on the home page, the nav item with a class of home will display the selected
state, whereas on the news page, the nav item with the class of news will show the selected state.
For added effect, I have changed to cursor style to show the default arrow cursor. That way, if
you mouse over the selected link, your cursor will not change state and you won’t be tempted to
click a link to a page you are already on.
*/
</style>
<body>
<!--In the previous vertical nav bar example, I used a class to indicate the current page. For small
sites with the navigation embedded in the page, you can simply add the class on a page-by-page
basis. For large sites, there is a good chance that the navigation is being built dynamically, in
which case the class can be added on the back end. However, for medium-sized sites, where the
main navigation doesn’t change, it is common to include the navigation as an external file. In
these situations, wouldn't it be good if there were a way to highlight the page you are on, without
having to dynamically add a class to the menu? Well, with CSS there is.
This concept works by adding an ID or a class name to the body element of each page, denoting
which page or section the user is in. You then add a corresponding ID or class name to each item
in your navigation list. The unique combination of body ID and list ID/class can be used to
highlight your current section or page in the site nav.
Take the following HTML fragment as an example. The current page is the home page, as
indicated by an ID of home on the body. Each list item in the main navigation is given a class
name based on the name of the page the list item relates to.-->
<body id="home">
<ul class="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</body>
</html5>