书中代码5.17增强版

最新推荐文章于 2024-05-03 21:05:41 发布

王绪超

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量683

点赞数

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/wxc2014/article/details/22006423

版权

<html>
<head>
<script type="text/javascript" src="jQuery/jquery-1.11.0.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$('#menu ul').hide();
			$('#menu li a').click(function(){
				$(this).next().slideToggle('slow');
			});
			$('#menu li a').mouseover(function(){
				$(this).fadeTo(1000,0.4);
			});
			$('#menu li a').mouseout(function(){
				$(this).fadeTo(1000,1);
			});	
			$('#menu ul li a').mouseover(function(){
				$(this).css("text-decoration","underline");
			});
			$('#menu ul li a').mouseout(function(){
				$(this).css("text-decoration","none");
			});	
		});
	</script>
<style type="text/css">
		li a {
			display:inline-block;
		}
		body {
			font-family:Arical,sans-serif;
			font-size:0.9em;
		}
		p {
	    	line-height:1.5em;
		}
		ul#menu,ul#menu ul {/*stylizing the menu and the list nested in the menu*/
	    	list-style-type:none;
	    	margin:0;
	    	padding:0;
	    	width:10em;
		}
		ul#menu a { /*stylizing the <a> elements nested in the menu */
			display:block;
			text-decoration:none;
		}
		ul#menu li { /* stylizing the list items nested in the menu*/
			margin-top:1px;
		}
		ul#menu li a {/* stylizing the <a> elements nested in list items of the menu*/
			background:brown;
			color:#fff;
			padding:0.5em;
		}
		ul#menu li a:hover { /*stylizing the <a> elements nested in list items of the menu when mouse is placed or move over them*/
			background:black;
		}
		ul#menu li ul a {
			background:grey;
			color:white;
			padding-left:20px;
		}
		ul#menu li ul li a:hover{
			background:#aaa;
			color:white;
			border-left:5px grey solide;
			padding-left:15px;
		}
    </style>
</head>
<body>
<p>Product Menu</p>
<h4>Product Categories</h4>
<ul id="menu">
  <li><a>Laptops</a>
    <ul>
      <li><a href="">L-150</a></li>
      <li><a href="">L-160</a></li>
      <li><a href="">L-180</a></li>
      <li><a href="">L-260</a></li>
      <li><a href="">L-678</a></li>
    </ul>
  </li>
  <li><a>Phones</a>
    <ul>
      <li><a href="">P-1150</a></li>
      <li><a href="">P-1260</a></li>
      <li><a href="">P-1180</a></li>
      <li><a href="">P-2260</a></li>
      <li><a href="">P-6708</a></li>
    </ul>
  </li>
  <li><a>Cameras</a>
    <ul>
      <li><a href="">C-50</a></li>
      <li><a href="">C-60</a></li>
      <li><a href="">C-80</a></li>
      <li><a href="">C-60</a></li>
      <li><a href="">C-80</a></li>
    </ul>
  </li>
  <li><a>Music Players</a>
    <ul>
      <li><a href="">MP-1150</a></li>
      <li><a href="">MP-1260</a></li>
      <li><a href="">MP-1180</a></li>
      <li><a href="">MP-2260</a></li>
      <li><a href="">MP-6708</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

王绪超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
书中代码5.17增强版

$(document).ready(function(){ $('#menu ul').hide(); $('#menu li a').click(function(){ $(this).next().slideToggle('slow'); }); $('#menu li a').mouseover(function(){ $(this).fadeTo(1
复制链接

扫一扫