The following code content for the CSS navigation layout of the current page of the practice, belonging to webmaster Common code, Webmaster friends have similar circumstances can refer to the HA, I hope to help you
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
<meta name= "keywords" content= "JS Code, menu navigation, JS Advertising code, JS special effects code"/>
<meta name= "description" content= "This code content for the CSS navigation layout of the current page practices, belong to webmaster Common code, more menu navigation code, please visit the script Home JS code channel. "/>
<title>css The current page in the navigation layout </title>
<style type= "Text/css" >
body{
font-family:arial, Helvetica, Sans-serif;
font-size:12px;
}
*{
margin:0;
padding:0;
List-style:none;
}
#nav {
padding:10px 10px 0;
font-size:11px;
Font-weight:bold;
}
#nav li{
Float:left;
margin-right:1px;
}
#nav Li a{
padding:4px 10px 2px 14px;
Text-decoration:none;
background: #DDD URL (images/navbg.gif) no-repeat;
color: #666;
Display:block;
Float:left;
}
#nav Li a:hover{
color: #CCC;
Background-color: #FFDEAD;
}
#navbar {
background: #DC4E1B;
height:8px;
Overflow:hidden;
Clear:both;
}
#home #nav li#m1 A,
#about #nav li#m2 A,
#products #nav li#m3 A,
#services #nav li#m4 A,
#contact #nav LI#M5 a
{
color: #FFF;
background: #DC4E1B URL (images/navbg.gif) no-repeat;
}
//CSS style for current position
p{
margin:10px;
}
</style>
</head>
<body id= "about" >
<ul id= "NAV" >
<li id= "M1" ><a href= "#" >Home</a></li>
<li id= "m2" ><a href= "#" >About</a></li>
<li id= "M3" ><a href= "#" >Products</a></li>
<li id= "M4" ><a href= "#" >Services</a></li>
<li id= "M5" ><a href= "#" >Contact</a></li>
</ul>
<div id= "NavBar" ></div>
<p> Current Position:about</p>
<p><p> Current Page-for example, now the page is the homepage, then the first page of the navigation bar color and other columns are different, to give visitors a clear indication.
below the specific approach, the basic menu implementation and the general CSS menu is not much different, focusing on how to implement the current page.
set Menu has 5 columns: Home, about, products, services, contacts, respectively to each column a id,m1-m5</p>
<p> then each page to the Bady label a separate ID, which is currently the page, that page of the body ID is which, for example, to the first page ID is home, the rest of the analogy.
The advantage of this approach is that each page menu is the same, easy to modify, dynamic page contains also easy. </p></p>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
