码迷,mamicode.com
首页 > 其他好文 > 详细

横向菜单效果

时间:2017-06-25 14:20:53      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:color   func   doc   text   lin   doctype   效果   play   function   

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向菜单</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <style type="text/css">
     *{
         padding: 0px;
         margin: 0px;
     }
     h3{
         width:200px;
        height:30px;
        margin-top:10px;
        background-color:#ccc;
     }
     ul{
         display: none;
     }
     li{
         list-style-type:none;
        width:200px;
        height:30px;
        line-height:30px;
        text-align:center;
        border-bottom:1px dashed red;
        background-color:green;
     }
    </style>
</head>
<body>
    <h3>我的京东</h3>
      <ul>
          <li>111</li>
          <li>111111111</li>
          <li>111111</li>
          <li>111</li>
      </ul>
    
      <h3>我的京东1</h3>
      <ul>
          <li>222</li>
          <li>222</li>
          <li>222</li>
          <li>222</li>
      </ul>

      <h3>我的京东2</h3>
      <ul>
          <li>333</li>
          <li>333</li>
          <li>333</li>
          <li>333</li>
      </ul>
</body>
<script type="text/javascript">
    //JQuery 入口文件 起到兼容作用
    $(function(){    
        $("h3").mousemove(function(){
            $(this).next("u1").slideToggle(2000);
        });
    })
</script>
</html>

横向菜单效果

标签:color   func   doc   text   lin   doctype   效果   play   function   

原文地址:http://www.cnblogs.com/kevin-yang520/p/7076643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!