横向菜单效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了横向菜单效果相关的知识,希望对你有一定的参考价值。

<!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>

以上是关于横向菜单效果的主要内容,如果未能解决你的问题,请参考以下文章

导航栏实现横向滑动效果

Android导航菜单横向左右滑动并和下方的控件实现联动

html 横向导航栏制作求助

tab导航栏横向滚动条-tabScroll

Win10磁贴 横向排列 增加多行 多列 磁贴横向展示

横向滑动菜单HorizontalScrollView