时间:2021-05-18
效果图:
目前市场上越来越流行IOS风格的操作系统和导航方式,在今天的jQuery教程中,我们介绍如何生成一个iphone风格的菜单导航。
HTML代码
我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下:
<nav><h1>导航菜单</h1><ul><li><h2>专题教程</h2><ul><li><h3>HTML专题教程</h3><ul><li><a href="http:///tutorials/hotspot/hotspot3/">GBin1专题之Web热点秀#3</a></ul> </ul>。。。 。。。
Javascript
使用jQuery来查询遍历li,并且生成菜单项目,如下:
$(function(){ var nav = $("nav"),navTitle = nav.children().first(),navTitleLabel = navTitle.text(),mainList = navTitle.next(),subLevels = mainList.find("ul"),hiddenClass = "hidden"; nav.addClass("js");mainList.find("a:last-child").addClass("files");subLevels.addClass(hiddenClass); navTitle.wrap($("<div/>")).before($("<a/>", {href: "#",className: hiddenClass,click: function(e){var $this = $(this),activeList = subLevels.filter(":visible:last"),activeListParents = activeList.parents("ul");navTitle.text($this.text());if(activeListParents.length > 2)$this.text(activeListParents.eq(1).prev().text());else if (activeListParents.length > 1)$this.text(navTitleLabel)else$this.addClass(hiddenClass).empty();setTimeout(function(){activeList.addClass(hiddenClass);}, slideDuration - 100);mainList.css("left", parseInt(mainList.css("left")) + navWidth + "px");e.preventDefault();}})); subLevels.prev().wrap($("<a/>", {href:"#",click: function(e){var $this = $(this);backArrow.removeClass(hiddenClass).text(navTitle.text());navTitle.text($this.text());$this.next().removeClass(hiddenClass);mainList.css("left", parseInt(mainList.css("left")) - navWidth + "px");e.preventDefault();}})); var backArrow = navTitle.prev(),navWidth = nav.width(),firstSubLevel = subLevels.eq(0),docStyle = document.documentElement.style,slideDuration = 0,timingRatio = 1000; if(docStyle.WebkitTransition !== undefined)slideDuration = parseFloat(firstSubLevel.css("-webkit-transition-duration")) * timingRatio; if(docStyle.MozTransition !== undefined)slideDuration = parseFloat(firstSubLevel.css("-moz-transition-duration")) * timingRatio; if(docStyle.OTransition !== undefined)slideDuration = parseFloat(firstSubLevel.css("-o-transition-duration")) * timingRatio; });
CSS
使用图片来生成页面顶端的按钮:
body {font-size: 14px;font-family: Arial;background:#f5f5f8;}.js {position:absolute;width:320px;height:480px;top:50%;left:50%;margin:-280px 0 0 -160px;overflow:hidden;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.25);-moz-box-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 1px 2px rgba(0,0,0,.25);}.js .files {background-image:none;}.js .hidden {display:none;}.js * {font-size:14px;font-weight:400;margin:0;padding:0;list-style:none;}.js > div {position:relative;z-index:1;height:44px;text-align:center;font-size:14px;line-height:44px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4);background:#7f94b0;background:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#b5c0ce),color-stop(0.5,#889bb3),color-stop(0.51,#7f94b0),color-stop(1,#6d83a1));background:-moz-linear-gradient(top center,#b5c0ce,#889bb3 22px,#7f94b0 23px,#6d83a1);border-bottom:1px solid #2d3033;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;border-top-left-radius:5px;border-top-right-radius:5px;}.js > div a {height:31px;top:7px;left:20px;font-size:14px;line-height:31px;color:#fff;background:url('../images//center.png');}.js > div a, .js > div a:before, .js > div a:after {position:absolute;}.js > div a:before {left:-13px;content:url('../images//left.png');}.js > div a:after {right:-10px;top:0;content:url('../images//right.png');}.js > div a:active {opacity:.65;}.js a {text-decoration:none;}.js ul a {display:block;color:#000;padding:.8em 18px;border-bottom:1px solid #e0e0e0;background:url('images/next.png') no-repeat 94% 50%;}.js ul a:hover {background-color:#edf3fe;}.js a:focus {outline:none;}.js ul {position:absolute;top:0;padding-top:45px;width:100%;-webkit-transition:left .4s ease-out;-moz-transition:left .4s ease-out;-o-transition:left .4s ease-out;}.js ul {left:0;}.js ul ul {left:320px;}有效果图,有代码看起来非常明了,希望大家喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引
本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下:jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您
基于MUI的跨平台移动技术开发App的优、缺点(1)优点。由以上的实例可以看出,利用MUI技术开发的App应用不仅可以支持IOS和Android等多系统平台,而
今天给大家分享一款基jquery超炫的动画导航菜单。这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中。再次单击按钮,导航飞入左侧消息。动画效果
之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。