JQ滑動變色菜單_導航條變色滑動顯示



117 466 156



特效描述:滑動變色菜單 導航條變色滑動,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

加群請備注:從官網了解到

老夫子电子