请教这种导航应该如何实现
日期：2014-05-19 浏览次数：20511 次
请问这种导航应该怎么实现?
今天浏览网页的时候看到网页中有如下导航:
http://www.lstx.com.cn/Simplified/ProductList.asp?SortID=9&SortPath=0,3,9,
不知道是怎么实现的? 能用sitemap, menu和sitemappath实现吗? 应该怎么实现?
新手来的, 请大家指点, 谢谢. :)
------解决方案--------------------
sitemap 足够了
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB2312 " />
<meta name= "Keywords " content= "bilingual menu,中英文双语菜单 " />
<meta http-equiv= "Description " content= "完全用CSS实现的中英文双语导航菜单 " />
<meta content= "all " name= "robots " />
<meta name= "author " content= "forestgan " />
<title> 完全用CSS实现的中英文双语导航菜单 </title>
<style type= "text/css ">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
.bi{
position: relative;
z-index: 0;
}
.bi:hover{
z-index: 99;
}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}
.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{
padding-top: 2px;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>
<div id= "top ">
<ul id= "nav ">
<li> <a class= "bi " href= "index.html "> Home <span> 首 页 </span> </a> </li>
<li> <a class= "bi " href= "about.html "> About us <span> 关于我们 </span> </a> </li>
<li> <a class= "bi " href= "products.html "> Products <span> 产品展示 </span> </a> </li>
<li> <a class= "bi " href= "services.html "> Services <span> 售后服务 </span> </a> </li>
<li> <a class= "bi " href= "contact.html "> Contact <span> 联系我们 </span> </a> </li>
</ul>
<div id= "navbar "> </div>
</body>
</html>
今天浏览网页的时候看到网页中有如下导航:
http://www.lstx.com.cn/Simplified/ProductList.asp?SortID=9&SortPath=0,3,9,
不知道是怎么实现的? 能用sitemap, menu和sitemappath实现吗? 应该怎么实现?
新手来的, 请大家指点, 谢谢. :)
------解决方案--------------------
sitemap 足够了
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GB2312 " />
<meta name= "Keywords " content= "bilingual menu,中英文双语菜单 " />
<meta http-equiv= "Description " content= "完全用CSS实现的中英文双语导航菜单 " />
<meta content= "all " name= "robots " />
<meta name= "author " content= "forestgan " />
<title> 完全用CSS实现的中英文双语导航菜单 </title>
<style type= "text/css ">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
.bi{
position: relative;
z-index: 0;
}
.bi:hover{
z-index: 99;
}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}
.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{
padding-top: 2px;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>
<div id= "top ">
<ul id= "nav ">
<li> <a class= "bi " href= "index.html "> Home <span> 首 页 </span> </a> </li>
<li> <a class= "bi " href= "about.html "> About us <span> 关于我们 </span> </a> </li>
<li> <a class= "bi " href= "products.html "> Products <span> 产品展示 </span> </a> </li>
<li> <a class= "bi " href= "services.html "> Services <span> 售后服务 </span> </a> </li>
<li> <a class= "bi " href= "contact.html "> Contact <span> 联系我们 </span> </a> </li>
</ul>
<div id= "navbar "> </div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
