JQ滑动变色菜单_导航条变色滑动显示



112 447 150



特效描述:滑动变色菜单 导航条变色滑动,JQ滑动变色菜单 ! 效果很不错。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* menu */
#menu{position:relative;width:780px;height:50px;overflow:hidden;margin:50px auto;}
#menu .colourful{display:block;position:absolute;background:#f0ad22;height:38px;width:85px;top:4px;left:-100px;}
#menu ul{margin:0;padding:0;list-style:none;float:left;position:relative;top:0;left:0;z-index:1;}
#menu li{float:left;margin:0 1px 0 0;}
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active{color:#000;text-align:center;display:block;border:solid;border-width:4px 0 0;line-height:40px;width:85px;}
#menu li a:hover{text-decoration:none;color:#fff;text-shadow:0 0 1px #999;}
</style>
<div id="menu">
	<ul>
		<li><a href="">Web Design </a></li>
		<li><a href="">jQuery</a></li>
		<li><a href="">Html5 & Css3</a></li>
		<li><a href="">PHP</a></li>
		<li><a href="">Photoshop</a></li>
		<li><a href="">Illustrator</a></li>
		<li><a href="">Wordpress</a></li>
		<li><a href="">Tutorials</a></li>
		<li><a href="">Tutorialpot</a></li>
	</ul>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动选项卡 滑动切换 背景切换 大图切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到