网页设计中一些小功能
2017-04-21 16:30
375 查看
网页设计中常常有一些重复性的工作需要我们去处理,为了避免不重复造轮子,我把一些常用的功能保存下来,以供日后使用。
一、菜单关闭与打开
很多情况下,为了不让菜单占用网页太多的空间,通常都是把菜单隐藏起来。当用户点击打开按钮时菜单显示,关闭时隐藏。
这样看起来很简单,当用户的要求可不止这些:
1. 点击页面除菜单和按钮以外的部分时关闭菜单;
2. 点击菜单部分菜单不能关闭。
效果图如下:
为了能理解这个功能,把代码贴上加深理解
1. 这里主要就是用到了阻止冒泡
2. stopPropagation 阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
3. 如果在 "menu" 点击方法中没有 stopPropagation() 方法的话,点击事件将会被冒泡到 doucument dom ,而他的方法将会使菜单收起,所以当点击菜单按钮后,菜单展开,然后马上关闭。
4. 如果在 "navList" 点击方法中没有 stopPropagation() 方法的话,点击事件也会冒泡到 document dom,也就是说,当点击菜单部分后,菜单会马上关闭。
于是上面的代码就实现了以下几点功能:
1. 点击菜单按钮,如果菜单是关闭的,就打开菜单,如果菜单是打开的,就收起菜单;
2. 点击除了菜单按钮和菜单部分的区域时,菜单收起;
3. 点击菜单部分区域时,菜单依然保持打开状态。
一、菜单关闭与打开
很多情况下,为了不让菜单占用网页太多的空间,通常都是把菜单隐藏起来。当用户点击打开按钮时菜单显示,关闭时隐藏。
这样看起来很简单,当用户的要求可不止这些:
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. 点击菜单部分区域时,菜单依然保持打开状态。
相关文章推荐
- 设计理论-网页设计中的功能与美
- 网页设计常用的一些技巧
- CSS设计网页头部的一些写法
- [F5]功能演示 HTML/CSS实时调试器并兼容所有游览器,网页设计人员幸福了。
- 网页设计的一些网站
- 用于项目设计的一些网页设计知识
- 提升网页和博客设计品质的一些实例和技巧
- 对设计网页的一些看法!
- CSS设计网页时的一些常用规范
- 一些关于网页设计的优秀网站
- 网页设计中的功能与美
- 网页设计中Html使用的一些问题
- 网页设计中一些常用辅助代码(收藏)
- CSS设计网页时的一些常用规范
- CSS设计网页时的一些常用规范
- 网页设计常用的一些技巧
- 网页设计常用的一些技巧
- 页面设计的一些在线编辑功能(css,文字加密等。。)
- 关于网页设计的一些统计数字
- 一些网站设计原型图 网页设计从纸上开始