CSS实现当前页的滑动门菜单效果方法
发布时间：2023-05-10 编辑：jiaochengji.com
教程集为您提供CSS实现当前页的滑动门菜单效果方法等资源，欢迎您收藏本站，我们将为您提供最新的CSS实现当前页的滑动门菜单效果方法资源
当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。
下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何 实现当前页。
设菜单有5个栏目:home、about、products、services、contact，分别给每个栏目一 个ID，m1-m5，CSS可写成如下:
CSS源代码：
| 代码如下 | |
| #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.gif) no-repeat; } xhtml源代码: <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，其余的类推 。
这样做法的好处是每个页面的菜单都是一样的，方便修改，动态页包含也容易。
您可能感兴趣的文章：
对css滑动门技术的一些总结和归纳
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
jquery 动态菜单的实现代码分享
jquery弹性滑动导航菜单
HTML5单页面手势滑屏切换原理分析
利用JQuery动画制作滑动菜单项效果实现步骤及代码
7款风格新颖的jQuery/CSS3菜单导航分享
EasySlider 基于jQuery功能强大简单易用的滑动门插件
jQuery 打造动态下滑菜单实现说明
[关闭]