网页设计中一些小功能

网页设计中常常有一些重复性的工作需要我们去处理，为了避免不重复造*，我把一些常用的功能保存下来，以供日后使用。

一、菜单关闭与打开

很多情况下，为了不让菜单占用网页太多的空间，通常都是把菜单隐藏起来。当用户点击打开按钮时菜单显示，关闭时隐藏。

这样看起来很简单，当用户的要求可不止这些：

1. 点击页面除菜单和按钮以外的部分时关闭菜单；

2. 点击菜单部分菜单不能关闭。

效果图如下：

网页设计中一些小功能

为了能理解这个功能，把代码贴上加深理解

<nav id="nav" role="navigation">
<button type="button" class="menu" id="menu" title="展开/关闭菜单">
<i class="iconfont icon-menu" id="iconMenu"></i>
</button>
<ul class="nav-list" id="navList">
<li class="nav-item">
<a href="index.html" title="首页">
<span>首页</span>
<span>Home page</span>
</a>
</li>
<li class="nav-item">
<a href="industry.html" title="行业应用">
<span>行业应用</span>
<span>Industry application</span>
</a>
<ul>
<li>
<a href="industry.html#health" title="公共卫生">【公共卫生】智慧健康管理方案</a>
</li>
<li>
<a href="industry.html#aged" title="居家养老">【居家养老】智慧健康管理方案</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:void(0)" title="关于早寻" class="active">
<span>关于早寻</span>
<span>About foresight</span>
</a>
</li>
<li class="nav-item">
<a href="hcc.html" title="HCC日常健康管理体系">
<span>HCC日常健康管理体系</span>
<span>HEALTH CONTEXT CLOUD</span>
</a>
</li>
<li class="nav-item">
<a href="contact.html" title="联系我们">
<span>联系我们</span>
<span>Contact us</span>
</a>
</li>
</ul>
</nav>

#nav {
  z-index: 4;
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
}
#nav .menu {
  display: block;
  z-index: 5;
  width: 100%;
  height: 75px;
  text-align: center;
  background-color: transparent;
  padding-right: 85px;
  text-align: right;
}
#nav .menu i {
  display: inline-block;
  height: 75px;
  width: 75px;
  text-align: right;
  line-height: 75px;
  font-size: 20px;
  color: #fff;
}
#nav .nav-list {
  display: none;
  padding-top: 40px;
  padding-right: 85px;
  text-align: right;
  background-color: rgba(52, 85, 138, 0.5);
  height: 100%;
}
#nav .nav-list > li {
  margin-bottom: 15px;
}
#nav .nav-list > li:last-of-type {
  margin-bottom: 0;
}
#nav .nav-list > li a {
  position: relative;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 18px;
}
#nav .nav-list > li a:hover,
#nav .nav-list > li a.active {
  color: #f0c18f;
}
#nav .nav-list > li a:hover:after,
#nav .nav-list > li a.active:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -85px;
  width: 60px;
  height: 2px;
  background-color: #f0c18f;
  margin-top: -1px;
}
#nav .nav-list > li > a > span {
  display: block;
}
#nav .nav-list > li > a > span:first-of-type {
  font-size: 18px;
}
#nav .nav-list > li > a > span:last-of-type {
  font-size: 12px;
  text-transform: capitalize;
}
#nav .nav-list > li ul {
  display: none;
}
#nav .nav-list > li ul li a {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  font-size: 16px;
}

//显示和关闭导航
$("#menu").on("click", function(e){
    $("#navList").slideToggle(400);
    $(document).on("click",function(){
        $("#navList").slideUp(400);
    });
    e.stopPropagation();
});
$("#navList").on("click",function(e){
    e.stopPropagation();
});

1. 这里主要就是用到了阻止冒泡

2. stopPropagation 阻止事件冒泡到父元素，阻止任何父事件处理程序被执行

3. 如果在 "menu" 点击方法中没有 stopPropagation() 方法的话，点击事件将会被冒泡到 doucument dom ，而他的方法将会使菜单收起，所以当点击菜单按钮后，菜单展开，然后马上关闭。

4. 如果在 "navList" 点击方法中没有 stopPropagation() 方法的话，点击事件也会冒泡到 document dom，也就是说，当点击菜单部分后，菜单会马上关闭。

于是上面的代码就实现了以下几点功能：

1. 点击菜单按钮，如果菜单是关闭的，就打开菜单，如果菜单是打开的，就收起菜单；

2. 点击除了菜单按钮和菜单部分的区域时，菜单收起；

3. 点击菜单部分区域时，菜单依然保持打开状态。

秒客网

网页设计中一些小功能

相关文章