教程集 > 脚本编程 > javascript > 正文 js导航菜单特效-变化背景

js导航菜单特效-变化背景

发布时间：2016-10-22 编辑：jiaochengji.com

教程集为您提供js导航菜单特效-变化背景等资源，欢迎您收藏本站，我们将为您提供最新的js导航菜单特效-变化背景资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >js导航菜单特效-变化背景 <ul id="menu"> <li id="home" class="first">Home</li> <li id="single">Single Level</li> <li id="dropdown">Dropdown</li> <li id="dropline">Dropline</li> <li id="flyout">Flyout</li> <li id="support">Support</li> <li id="contact" class="last">Contact</li> </ul> <style> #menu {padding:0; margin:0; list-style:none; width:700px; height:50px; position:absolute; top:160px; left:300px;} #menu li {position:relative; float:left;} #menu li a {display:block; height:50px; padding:0; width:100px; float:left; color:#444; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(/blog/upload/image/20091219072548.gif); line-height:50px;} #menu li a b {position:relative;} #menu li a:hover, #menu li a:active, #menu li a:focus, .home #menu li#home a, .single #menu li#single a, .dropdown #menu li#dropdown a, .dropline #menu li#dropline a, .flyout #menu li#flyout a, .support #menu li#support a, .contact #menu li#contact a {background: url(http://filesimg.jiaochengji.com/20091219010637270.png) no-repeat right top; cursor:pointer; color:#c60;} * html #menu li a:hover, * html #menu li a:active, * html #menu li a:focus, * html .home #menu li#home a, * html .single #menu li#single a, * html .dropdown #menu li#dropdown a, * html .dropline #menu li#dropline a, * html .flyout #menu li#flyout a, * html .support #menu li#support a, * html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://filesimg.jiaochengji.com/20091219010637270.png', sizingMethod='scale');} #menu li a:hover b, #menu li a:active b, #menu li a:focus b, .home #menu li#home a b, .single #menu li#single a b, .dropdown #menu li#dropdown a b, .dropline #menu li#dropline a b, .flyout #menu li#flyout a b, .support #menu li#support a b, .contact #menu li#contact a b {cursor:pointer;} </style></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
7款风格新颖的jQuery/CSS3菜单导航分享
 对css滑动门技术的一些总结和归纳
 jQuery菜单插件 Smooth Navigational Menu
jquery 遮罩层效果实现的导航菜单
 js导航菜单特效-变化背景
 jquery弹性滑动导航菜单
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 jquery遮罩层效果实现导航菜单代码
 jquery下拉菜单 jquery文字导航效果
 js导航栏单击事件背景变换(示例)

上一篇：div css导航菜单下一篇：Javascript MVVM 框架研究

[关闭]

js导航菜单特效-变化背景

最近更新

浏览排行