侧边栏三级级菜单滑出jquery怎么写

 我来答
简单单词
2016-04-11 · 超过34用户采纳过TA的回答
知道答主
回答量:58
采纳率:0%
帮助的人:27万
展开全部

你指的是:

这种效果么???

如果是的话可以考虑使用mmenu Jquery插件,很强大。pc,移动都可以用。

使用代码:(第三方资源可以自己现在或者是到我的博客中下载)

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title> mmenu演示 </title>  
    <!--需要的第三方包-->  
    <link href="font-awesome.min.css" rel="stylesheet" type="text/css">   
    <link href="jquery.mmenu.all.custom.css" rel="stylesheet" type="text/css">   
    <link href="bootstrap.min.css" rel="stylesheet">  
    <script src="jquery.min.js" type="text/javascript"></script>    
    <script src="jquery.mmenu.min.all.js"></script>  
    <script src="bootstrap.min.js"></script>  
    <span style="white-space:pre">    </span>  
    <script type="text/javascript">  
       $(document).ready(function() {  
          $("#main_menu").mmenu({  
              counters: true,  
              classes: "mm-light mm-zoom-menu mm-zoom-panels",  
              searchfield: true,  
              footer: {  
                  add: true,  
                  content: "Powered by Real @2014"  
              }  
          });  
       });  
    </script>      
</head>  
<body>  
<nav class="navbar navbar-default navbar-static-top" role="navigation"   
    style="margin-bottom: 0">  
    <div class="navbar-head">  
        <div class="navbar-brand">  
            <a href="#main_menu">点击</a>  
        </div>  
    </div>  
        <ul class="nav navbar-top-links navbar-right">  
            <li>  
                aaa  
            </li>  
            <li class="dropdown">  
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
                   aaa  
                </a>  
                <ul class="dropdown-menu dropdown-user">  
                    <li>111</li>  
                    <li class="divider"></li>  
                    <li>222</li>  
                </ul>  
            </li>    
        </ul>  
</nav>  
<nav id="main_menu"  class="noprint">  
   <ul>  
      <li>  
        <span>菜单一</span>  
        <div>  
            <ul>                        
        <span style="white-space:pre">    </span><li><a href="">1</a></li>  
            <li><a href="">2</a></li>  
            <li><a href="">3</a></li>     
            </ul>  
        </div>  
      </li>  
      <li>  
        <span>菜单二</span>  
        <div>  
            <ul>  
            <li><a href="">1</a></li>  
            </ul>  
        </div>  
      </li>  
      <li>  
        <span>菜单三</span>  
        <div>  
            <ul>   
                <li><a href="">1</a></li>  
                <span style="white-space:pre">    </span><li><a href="">2</a></li>  
            <li><a href="">3</a></li>  
            <li><a href="">4</a></li>  
            </ul>  
        </div>  
      </li>         
   </ul>  
</nav>  
</body>  
</html>

如果你想要的不是这个效果,请贴出效果图。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式