jquery滑动菜单

Original 2018-11-14 11:30:18 186
abstract: <div class="menu"> <ul> <li name="0">首页</li> <li name="1">php中文网</li> <li name="2">西门大
<div class="menu">
		<ul>
			<li name="0">首页</li>
			<li name="1">php中文网</li>
			<li name="2">西门大官人</li>
			<li name="3">独孤九剑</li>
			<li name="4">灭绝师太</li>
		</ul>
		<div class="block"></div>
	</div>
*{margin:0;padding: 0;}
		.menu{height: 32px;background: orange;width: 500px;margin:10px auto;border-radius: 6px;box-shadow: 0 0 8px #000;position: relative;}
		li{width: 100px;height: 30px;line-height: 30px;text-align: center;color: #FFF;float: left;list-style: none;cursor: pointer;}
		.block{width: 100px;height: 2px;background: #FFF;border-radius: 2px;position: absolute;left:0;top:30px;}
$(function(){
			$('li').hover(function(){
				$x = parseInt($(this).attr('name'))*100;
				$('.block').stop().animate({
					left:$x+'px'
				},300);
			},function(){
				$('.block').stop().animate({
					left:'0px'
				},300);
			});
		})

QQ图片20181114103819.png

Correcting teacher:查无此人Correction time:2018-11-14 11:40:54
Teacher's summary:写的不错。如果在增加一个默认的就更好了,这样用户就会知道当前是哪个页面了。

Release Notes

Popular Entries