学做网站培训课程介绍

当前位置:

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

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

HTML代码:


<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>
<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>
<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>
<ul role="menu" class=" wap_menu2">
<li class=" nav-sub-item"><a title="产品分类一" href="http://127.0.0.1/wordpress/?cat=186" class="zilink">产品分类一</a></li>
<li class=" nav-sub-item"><a title="产品分类四" href="http://127.0.0.1/wordpress/?cat=189" class="zilink">产品分类四</a></li>
<li class=" nav-sub-item"><a title="产品分类二" href="http://127.0.0.1/wordpress/?cat=188" class="zilink">产品分类二</a></li>
</ul>
</li>
<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>
<ul role="menu" class=" wap_menu2">
<li class=" nav-sub-item"><a title="公司新闻" href="http://127.0.0.1/wordpress/?cat=197" class="zilink">公司新闻</a></li>
<li class=" nav-sub-item"><a title="常见问题" href="http://127.0.0.1/wordpress/?cat=198" class="zilink">常见问题</a></li>
<li class=" nav-sub-item"><a title="行业动态" href="http://127.0.0.1/wordpress/?cat=195" class="zilink">行业动态</a></li>
</ul>
</li>
<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>
<ul role="menu" class=" wap_menu2">
<li class=" nav-sub-item"><a title="成功案例一" href="http://127.0.0.1/wordpress/?cat=191" class="zilink">成功案例一</a></li>
<li class=" nav-sub-item"><a title="成功案例二" href="http://127.0.0.1/wordpress/?cat=192" class="zilink">成功案例二</a></li>
</ul>
</li>
<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>
<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>
</ul>

JS代码:


// 手机左边弹出导航
$(".menu_icon,.navigation").click(function () {
$(".black_cloth").show();
$(".wap_menu").animate({"left": "0"}, 200);
$("body").animate({"left": "250px"}, 200);
$("body").css("overflow", "hidden");
$(".wrap_footer").animate({"left": "250px"}, 200);
})

// 点击一级分类展开二级分类
$(".wap_menu>li.menu_lists>.wap_menu1>p.right").click(function () {
if ($(this).parent().siblings(".wap_menu2").css("display") == "block") {
$(this).parents(".menu_lists").find(".wap_menu2").slideUp();
$(this).html("+");
return;
}
$(".wap_menu li.menu_lists .wap_menu1 p.right").html("+");
$(".wap_menu2").slideUp();
$(this).html("-");
$(this).parent().siblings(".wap_menu2").slideDown();
})

CSS代码:


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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们做网站一般都是做自适应结构,不同用户使用不同的浏览设备可以浏览不同的版面的网站。但有时为了特殊的要求,我们不希望自己的网站手机端自适应,
  • 我们制作网站前台提交发布界面时,富文本编辑器常常使用kindeditor 编辑器,kindeditor 编辑器支持用户上传图片和附件,通常情况下编辑器是不限制附件
  • notepad是一款比较好用的网页编辑软件,学建站网张启亚老师也一直在用notepad。notepad有一个比较实用的功能就是它会自动保存之前打开的文件列表,但
  • 网站中的滑动选择开关是比较常见的开关选择器,方便用户可以打开或者关闭某个参数。效果如下图:下面分享一下网站中的滑动选择开关的制作代码:HTM
  • 网站打不开怎么办,网站打不开原因比较多,下面介绍几种常见的网站打不开的原因和解决方法。1.先判断本地计算机是否可以正常连接网络,最简单的方法
  • 我们有些同学做的是下载类网站,如果使用普通的A标签来下载,很容易被别采集,这样会严重影响网站的运营。那么怎么隐藏下载地址呢?让资源的下载地址
  • 在https页面中,如果调用了http资源,那么浏览器就会抛出一些错误。我们可以通过一个meta 标签来限制网站调用http资源,自动将http替换成https资源。
  • 现在的网站太多,公司个人都可以制作网站,但是,很多网站目前都是模版建站,下面学建站网介绍一下怎么快速判断某个网站是不是模版建站。首先根据网
  • 线框图又叫原型、框架图,它是做网站设计方案的重要组成部分,是网站策划、项目经理的最后交付文档,通常是最直观、有效的设计呈现形式。第一步:在
  • 网站 XML Sitemap地图可以让搜索引擎更好的爬行收录我们的网站,特别是新网站,需要让搜索引擎收录新的网站页面,那么网站地图是必不可少的了。下面介