jquery音乐网站竖直下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery音乐网站竖直下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jquery音乐网站竖直下拉菜单</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style/basic.css"/>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.all>li').mouseover(function(e) {
        $(this).children().stop().slideDown(300);
    });
	$('.all>li').mouseout(function(e) {
        $(this).children().stop().slideUp(300);
    });
})
</script>
</head>

<body>

  <div id="left">
    	<div id="logo"></div>
        
        <div id="nav">
		<ul class="all">
        	<li class="li01">首页
            	<ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
          </li>
            
            <li class="li01">彩铃
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
            
            <li class="li01">乐库
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
            
            <li class="li01">排行榜
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
            
            <li class="li01">电台
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
            
            <li class="li01">Mv
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
            
            <li class="li01">专题
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
            
            <li class="li01">社区
            <ul class="li_01">
                	<li>一级菜单</li>
                	<li>一级菜单</li>
                    <li>一级菜单</li>
              </ul>
            </li>
        </ul>
    </div>
  </div>
<div align="center" style="width:1016px; margin:0 auto"></div>
</body>
</html>

CSS代码(basic.css):

@charset "utf-8";/* CSS Document */
html,body{height:100%;}
html{overflow-y:scroll;background:url(../images/bg4.jpg) center;}
body{width:170px;height:800px;margin-left:170px;border-radius:5px;}
#left{position:relative;top:30px;left:0px;width:170px;height:800px;background:#eaeaea;}
#logo{width:170px;height:70px;background:url(../images/logo.png) repeat center;}
.li01{list-style:none;list-style-image:url(../images/01.png);}
.li_01{list-style:none;list-style-image:url(../images/08.png);}
#left li{line-height:55px;}
.all ul{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)