css滑动门:CSS实现当前页的滑动门菜单效果方法

当前页面--比如说现在页面是首页那么在导航栏上首页色彩等和其他栏目有所不 同用以给浏览者个明显指示
下面来说下具体做法菜单基本实现和般CSS菜单没多大区别着重说下如何 实现当前页
设菜单有5个栏目:home、about、products、services、contact分别给每个栏目 个IDm1-m5CSS可写成如下:

CSS源代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
　　#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(navbg.g) no-repeat; 
　　} 



xhtml源代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<ul id=\"nav\"> 
<li id=\"m1\"><a href=\"index.html\">Home</a></li>  
<li id=\"m2\"><a href=\"about.html\">About</a></li> 
<li id=\"m3\"><a href=\"products.html\">Products</a></li> 
<li id=\"m4\"><a href=\"services.html\">Services</a></li> 
<li id=\"m5\"><a href=\"contact.html\">Contact</a></li> 
</ul> 



然后分别给每个页面bady标签个独立ID例如给首页ID是home其余类推 
这样做法好处是每个页面菜单都是样方便修改动态页包含也容易

延伸阅读

• 2010-12-9-- css滑动门技术,css 滑动门技术的介绍及实例分享
• 2010-12-9-- css滑动门,ul结合CSS制作网页相册滑动浏览效果
• 2010-12-9-- css滑动门技术,css 滑动门技术的介绍及实例分享
• 2010-12-9-- css滑动门,CSS技巧 使用标签来创建导航菜单（滑动门教程）
• 2010-12-9-- css滑动门,CSS技巧 使用标签来创建导航菜单（滑动门教程）
• 2010-12-9-- 滑动门菜单,极酷的三层分离的标准滑动门导航菜单
• 2009-2-12-- css中的滑动门技术:CSS中的滑动技术
• 2008-9-5-- css选项卡:CSS Javascript滑动文本选项卡显示
• 2009-2-12-- css滑动门:CSS滑动式条状图表如何实现？
• 2009-2-12-- css滑动门:CSS滑动门菜单是什么意思 如何实现？