HTML/CSS

手机网站实现左边弹出导航菜单点击一级分类展开二级分类

阿里云

手机网站实现左边弹出导航菜单点击一级分类展开二级分类,下面介绍一下手机网站常见的左边弹出导航菜单,并且点击一级分类展开二级分类的功能实现方法。

HTML 代码:

  1. <ul id="topmeau" class="wap_menu hidden-md hidden-lg"><li class="current-menu-item menu_lists active"><div class="wap_menu1"><p class="left"><a title="网站首页" href="http://127.0.0.1/WordPress/" class="toplink">网站首页</a></p></div></li>
  2. <li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="关于我们" href="http://127.0.0.1/wordpress/?page_id=6055" class="toplink">关于我们</a></p></div></li>
  3. <li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="产品中心" href="http://127.0.0.1/wordpress/?cat=185" class="dropdown-toggle" aria-haspopup="1">产品中心</a></p><p class="right">+</p></div>
  4. <ul role="menu" class=" wap_menu2">
  5. <li class=" nav-sub-item"><a title="产品分类一" href="http://127.0.0.1/wordpress/?cat=186" class="zilink">产品分类一</a></li>
  6. <li class=" nav-sub-item"><a title="产品分类四" href="http://127.0.0.1/wordpress/?cat=189" class="zilink">产品分类四</a></li>
  7. <li class=" nav-sub-item"><a title="产品分类二" href="http://127.0.0.1/wordpress/?cat=188" class="zilink">产品分类二</a></li>
  8. </ul>
  9. </li>
  10. <li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="新闻中心" href="http://127.0.0.1/wordpress/?cat=193" class="dropdown-toggle" aria-haspopup="1">新闻中心</a></p><p class="right">+</p></div>
  11. <ul role="menu" class=" wap_menu2">
  12. <li class=" nav-sub-item"><a title="公司新闻" href="http://127.0.0.1/wordpress/?cat=197" class="zilink">公司新闻</a></li>
  13. <li class=" nav-sub-item"><a title="常见问题" href="http://127.0.0.1/wordpress/?cat=198" class="zilink">常见问题</a></li>
  14. <li class=" nav-sub-item"><a title="行业动态" href="http://127.0.0.1/wordpress/?cat=195" class="zilink">行业动态</a></li>
  15. </ul>
  16. </li>
  17. <li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="成功案例" href="http://127.0.0.1/wordpress/?cat=190" class="dropdown-toggle" aria-haspopup="1">成功案例</a></p><p class="right">+</p></div>
  18. <ul role="menu" class=" wap_menu2">
  19. <li class=" nav-sub-item"><a title="成功案例一" href="http://127.0.0.1/wordpress/?cat=191" class="zilink">成功案例一</a></li>
  20. <li class=" nav-sub-item"><a title="成功案例二" href="http://127.0.0.1/wordpress/?cat=192" class="zilink">成功案例二</a></li>
  21. </ul>
  22. </li>
  23. <li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="在线留言" href="http://127.0.0.1/wordpress/?page_id=7330" class="toplink">在线留言</a></p></div></li>
  24. <li class=" menu_lists"><div class="wap_menu1"><p class="left"><a title="联系我们" href="http://127.0.0.1/wordpress/?page_id=6061" class="toplink">联系我们</a></p></div></li>
  25. </ul>
也想出现在这里?联系我们
创客主机

JS 代码:

  1. // 手机左边弹出导航
  2. $(".menu_icon,.navigation").click(function () {
  3. $(".black_cloth").show();
  4. $(".wap_menu").animate({"left": "0"}, 200);
  5. $("body").animate({"left": "250px"}, 200);
  6. $("body").css("overflow", "hidden");
  7. $(".wrap_footer").animate({"left": "250px"}, 200);
  8. })
  9.  
  10. // 点击一级分类展开二级分类
  11. $(".wap_menu>li.menu_lists>.wap_menu1>p.right").click(function () {
  12. if ($(this).parent().siblings(".wap_menu2").css("display") == "block") {
  13. $(this).parents(".menu_lists").find(".wap_menu2").slideUp();
  14. $(this).html("+");
  15. return;
  16. }
  17. $(".wap_menu li.menu_lists .wap_menu1 p.right").html("+");
  18. $(".wap_menu2").slideUp();
  19. $(this).html("-");
  20. $(this).parent().siblings(".wap_menu2").slideDown();
  21. })

CSS 代码:

  1. .wap_menu {width: 250px;position: fixed;top: 0px;left: -250px;height: 100%;text-align: left;z-index: 10000001;background: #9e845a;}
  2. .wap_menu li.menu_tit {font-size: 18px;font-weight: bold;background: rgba(255, 255, 255, 0.3);position: relative;padding: 15px 10px;color: #fff;}
  3. .wap_menu li.menu_tit span {font-size: 20px;position: absolute;top: 12px;right: 15px;border-bottom: none;z-index: 1000;}
  4. .wap_menu li {margin-bottom: 2px;font-size: 14px;position: relative;}
  5. .wap_menu li .wap_menu1 {line-height: 24px;font-size: 16px;text-transform: Uppercase;background: rgba(255, 255, 255, 0.1);position: relative;}
  6. .wap_menu li p {padding: 10px 10px; margin-bottom:0;}
  7. .wap_menu li .wap_menu1 a {display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-right: 25px;color: #ffffff;}
  8. .wap_menu li .wap_menu1 p.left {float: none;}
  9. .wap_menu li .wap_menu1 p.right {width: 15%;text-align: center;color: #fff;position: absolute;top: 0;right: 0;float: none;z-index: 1000;}
  10. .wap_menu li .wap_menu2 {display: none;}
  11. .wap_menu li .wap_menu2 a {display: block;background: none;color: rgba(255, 255, 255, 0.8);overflow: hidden;font-size: 14px;border-bottom: rgba(255, 255, 255, 0.1) solid 1px;padding: 10px;}
  12. .wap_menu li .wap_menu2 a i {float: left;width: 4px;height: 4px;background-color: #fff;margin: 8px 10px 0 5px;}
  13. .wap_menu li .wap_menu2 a span {float: left;width: 85%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

手机网站实现左边弹出导航菜单点击一级分类展开二级分类

已有 121 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!