以下是 响应式下拉菜单插件jquery.cbFlyout特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="cbFlyout Plugin">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>响应式下拉菜单插件jquery.cbFlyout</title>
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div id="left-flyout-nav" class="layout-left-flyout visible-sm"></div>
<div class="layout-right-content">
<header class="the-header">
<div class="navbar container">
<!-- Trigger -->
<a class="btn-navbar btn-navbar-navtoggle btn-flyout-trigger" href="javascript:;">
<span class="icon-bar btn-flyout-trigger"></span>
<span class="icon-bar btn-flyout-trigger"></span>
<span class="icon-bar btn-flyout-trigger"></span>
</a>
<!-- Structure -->
<nav class="the-nav nav-collapse clearfix">
<ul class="nav nav-pill pull-left">
<li class="dropdown">
<a href="#">标题 <b class="caret"></b></a>
<ul class="subnav">
<li><a href="#">标题一</a></li>
<li><a href="#">标题二</a></li>
<li><a href="#">标题三</a></li>
<li><a href="#">标题四</a></li>
<li><a href="#">标题五</a></li>
<li><a href="#">标题六</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">JS代码 <b class="caret"></b></a>
<ul class="subnav">
<li><a href="#">图片代码</a></li>
<li><a href="#">相册代码</a></li>
<li><a href="#">QQ客服代码</a></li>
<li><a href="#">时间日期代码</a></li>
<li><a href="#">瀑布流代码</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">图片素材 <b class="caret"></b></a>
<ul class="subnav">
<li><a href="#">风景图片</a></li>
<li><a href="#">美女图片</a></li>
<li><a href="#">人物图片</a></li>
<li><a href="#">动物图片</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">PSD素材 <b class="caret"></b></a>
<ul class="subnav">
<li><a href="#">节日节气</a></li>
<li><a href="#">网页模板</a></li>
<li><a href="#">网页元素</a></li>
<li><a href="#">挂历PSD素材</a></li>
<li><a href="#">免费素材网</a></li>
</ul>
</li>
</ul>
<ul class="nav nav-pill pull-right">
<li><a href="#">联系标题</a></li>
<li><a href="#">关于标题</a></li>
<li><a href="#">发展历程</a></li>
</ul>
</nav>
</div>
</header>
</div>
<!-- END .layout-left-flyout -->
<script src="js/jquery.js"></script>
<script src="js/jquery.cbFlyout.js"></script>
<script>
$(document).ready(function(){
$('.the-nav').cbFlyout();
});
</script>
</body>
</html>
JS代码(jquery.cbFlyout.js):
;
(function ( $,window,document,undefined ){
$body = $( 'body' );
$.cbFlyNav = function( options,element ){
this.$el = $( element );
this._init( options );
}
;
$.cbFlyNav.defaults ={
trigger:'.btn-flyout-trigger',cbNavWrapper:'#left-flyout-nav',cbContentWrapper:'.layout-right-content',minWidth:768}
;
$.cbFlyNav.prototype ={
_init:function( options ){
this.options = $.extend({
}
,$.cbFlyNav.defaults,options);
//Cache elements and intit variables this._config();
//Initialize event listenters this._initEvents();
}
,_config:function(){
this.open = false;
this.copied = false;
this.subNavOpen = false;
this.wasOpened = false;
this.$cbWrap = $('<div class="cbFlyNav-wrap"></div>');
this.$trigger = $(this.options.trigger);
this.$regMenus = this.$el.children( 'ul.nav.nav-pill' );
this.$newMenus = $(this.$el.clone());
this.$contentMask = $('<a class="nav-flyout-contentmask" href="#"></a>');
this.$navMask = $('<a class="nav-flyout-navmask" href="#"></a>');
this.$openSubnav = "";
}
,_initEvents:function(){
var self = this;
self.$trigger.on('click.cbFlyNav',function(e){
e.stopPropagation();
if ( !self.open ){
if ( !self.copied ){
self._copyNav();
}
self._openNav();
}
else{
self._closeNav();
}
self.wasOpened = true;
//console.log('WasOpened:'+self.wasOpened+ '. Open? '+self.open);
}
);
//Hide menu when window is bigger than allowed minWidth $(window).on('resize',function(){
var windowWidth = $(window).width();
if(self.open && windowWidth > self.options.minWidth){
self._closeNav();
}
}
);
//Hide menu when body clicked. Usign an a tag to mask content. self.$contentMask.on('click.cbFlyNav',function( e ){
e.preventDefault();
self._closeNav();
}
);
self.$navMask.on('click.cbFlyNav',function( e ){
e.preventDefault();
self._closeSubNav();
}
);
//Handle clicks inside menu self.$newMenus.on( 'click.cbFlyNav',function( e ){
e.stopPropagation();
var $menu = $(this);
//console.log("Menu clicked");
}
);
//Handle menu item clicks self.$newMenus.children().find('li').on('click.cbFlyNav',function(e){
e.stopPropagation();
var $item = $(this),$subnav = $item.find('ul.subnav');
if ($subnav.length > 0){
//item with subnav clicked e.preventDefault();
//console.log("Item with subnav clicked");
$subnav.css('height',window.innerHeight);
self._openSubNav($subnav);
}
else{
//item without subnav clicked //console.log("Item without subnav clicked");
}
}
);
}
,_copyNav:function(){
var self = this;
//console.log("copying nav");
var newWrap = $('<div class="cbFlyNav-wrap"></div>');
self.$newMenus.children( 'ul.nav.nav-pill' ).each(function(){
$this = $(this);
$this.removeClass('nav-pill').addClass('nav-flyout');
$this.find('.caret').replaceWith('<i class="icon-cbmore"></i>');
}
);
$(self.options.cbNavWrapper).prepend(self.$cbWrap.prepend(self.$newMenus));
self.copied = true;
}
,openNav:function(){
if ( !this.open ){
this._openNav();
}
}
,_openNav:function(){
var self = this;
//console.log("Opening Nav");
$(self.options.cbNavWrapper).addClass('isCbFlyNavActive');
$(self.options.cbContentWrapper) .addClass('isCbFlyNavActive') .append(self.$contentMask);
self.open = true;
}
,closeNav:function(){
if ( !this.close ){
this._closeNav();
}
}
,_closeNav:function(){
var self = this;
//console.log("Closing Nav");
$(self.options.cbNavWrapper).removeClass('isCbFlyNavActive');
$(self.options.cbContentWrapper).removeClass('isCbFlyNavActive');
if(self.subNavOpen){
self._closeSubNav();
}
self.$contentMask.detach();
self.open = false;
}
,_openSubNav:function($subnav){
var self = this,$parent = $subnav.parent('li');
$subnav.addClass('is-subnav-visible');
$parent.addClass('is-active');
self.$newMenus.addClass('is-inactive');
self.$cbWrap.append(self.$navMask);
$subnav.on('click.cbFlyNav',function(e){
e.stopPropagation();
}
);
self.$openSubnav = $subnav;
self.subNavOpen = true;
}
,_closeSubNav:function(){
var self = this,$parent = self.$openSubnav.parent('li');
self.$openSubnav.removeClass('is-subnav-visible');
$parent.removeClass('is-active');
self.$newMenus.removeClass('is-inactive');
self.$navMask.detach();
self.$openSubnav.off('click.cbFlyNav');
self.$openSubnav = "";
self.subNavOpen = false;
}
}
;
$.fn.cbFlyout = function ( options ){
this.each(function(){
var instance = $.data( this,'cbFlyout' );
if ( instance ){
instance._init();
}
else{
instance = $.data( this,'cbFlyout',new $.cbFlyNav( options,this ) );
}
}
);
return this;
}
;
}
(jQuery,window,document));
CSS代码(global.css):
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change,without disabling * user zoom. */
html{font-family:sans-serif;/* 1 */
-ms-text-size-adjust:100%;/* 2 */
-webkit-text-size-adjust:100%;/* 2 */
}
/** * Remove default margin. */
body{margin:0;}
/* HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
/** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome,Firefox,and Opera. */
audio,canvas,progress,video{display:inline-block;/* 1 */
vertical-align:baseline;/* 2 */
}
/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]){display:none;height:0;}
/** * Address `[hidden]` styling not present in IE 8/9. * Hide the `template` element in IE,Safari,and Firefox < 22. */
[hidden],template{display:none;}
/* Links ========================================================================== */
/** * Remove the gray background color from active links in IE 10. */
a{background:transparent;}
/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active,a:hover{outline:0;}
/* Text-level semantics ========================================================================== */
/** * Address styling not present in IE 8/9,Safari 5,and Chrome. */
abbr[title]{border-bottom:1px dotted;}
/** * Address style set to `bolder` in Firefox 4+,Safari 5,and Chrome. */
b,strong{font-weight:bold;}
/** * Address styling not present in Safari 5 and Chrome. */
dfn{font-style:italic;}
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+,Safari 5,and Chrome. */
h1{font-size:2em;margin:0.67em 0;}
/** * Address styling not present in IE 8/9. */
mark{background:#ff0;color:#000;}
/** * Address inconsistent and variable font size in all browsers. */
small{font-size:80%;}
/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9. */
img{border:0;}
/** * Correct overflow displayed oddly in IE 9. */
svg:not(:root){overflow:hidden;}
/* Grouping content ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari 5. */
figure{margin:1em 40px;}
/** * Address differences between Firefox and other browsers. */
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
/** * Contain overflow in all browsers. */
pre{overflow:auto;}
/** * Address odd `em`-unit font size rendering in all browsers. */
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}
/* Forms ========================================================================== */
/** * Known limitation:by default,Chrome and Safari on OS X allow very limited * styling of `select`,unless a `border` property is set. */
/** * 1. Correct color not being inherited. * Known issue:affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+,Safari 5,and Chrome. */
button,input,optgroup,select,textarea{color:inherit;/* 1 */
font:inherit;/* 2 */
margin:0;/* 3 */
}
/** * Address `overflow` set to `hidden` in IE 8/9/10. */
button{overflow:visible;}
/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox,IE 8+,and Opera * Correct `select` style inheritance in Firefox. */
button,select{text-transform:none;}
/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;/* 2 */
cursor:pointer;/* 3 */
}
/** * Re-set default cursor for disabled elements. */
button[disabled],html input[disabled]{cursor:default;}
/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
input{line-height:normal;}
/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing,padding,or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;/* 1 */
padding:0;/* 2 */
}
/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`,it causes the cursor style of the * decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
/** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */
input[type="search"]{-webkit-appearance:textfield;/* 1 */
-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */
box-sizing:content-box;}
/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
/** * Define consistent border,margin,and padding. */
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
/** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend{border:0;/* 1 */
padding:0;/* 2 */
}
/** * Remove default vertical scrollbar in IE 8/9. */
textarea{overflow:auto;}
/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE:the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup{font-weight:bold;}
/* Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;}
/* cbFlyNav Req Styles */
body{position:relative;overflow-x:hidden;width:100%;}
.layout-left-flyout{height:100%;position:fixed;visibility:hidden;z-index:0;-moz-transition:visibility 0 linear 0.2s;-o-transition:visibility 0 linear 0.2s;-webkit-transition:visibility 0 linear;-webkit-transition-delay:0.2s;transition:visibility 0 linear 0.2s;background:#383838;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-perspective:1000;-webkit-perspective:1000;perspective:1000;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.layout-left-flyout.isCbFlyNavActive{visibility:visible;z-index:1;-moz-transition:z-index 0 linear 0.2s;-o-transition:z-index 0 linear 0.2s;-webkit-transition:z-index 0 linear;-webkit-transition-delay:0.2s;transition:z-index 0 linear 0.2s;}
.cbFlyNav-wrap{display:block;position:relative;height:100%;overflow:hidden;width:270px;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-perspective:1000;-webkit-perspective:1000;perspective:1000;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.cbFlyNav-wrap > nav{-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);-moz-transition:-moz-transform 0 ease-in-out;-o-transition:-o-transform 0 ease-in-out;-webkit-transition:-webkit-transform 0 ease-in-out;transition:transform 0 ease-in-out;/* height:100%;overflow-y:auto;overflow-x:hidden;*/
}
.nav-collapse{-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.layout-right-content{-moz-transition:-moz-transform 0.2s ease-in-out;-o-transition:-o-transform 0.2s ease-in-out;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;-moz-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-moz-perspective:1000;-webkit-perspective:1000;perspective:1000;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;/* NOTE! Put container bg here so you don't get any clipping when the content is transitioning. Any tips on alternate solutions are welcome. */
background:#fff;background:#E72534;}
.layout-right-content.isCbFlyNavActive{-moz-transform:translate3d(270px,0,0);-webkit-transform:translate3d(270px,0,0);transform:translate3d(270px,0,0);min-width:320px;}
.icon-cbmore{content:"";float:right;margin-top:4.5px;padding:4.5px;box-shadow:1px -1px 0 0px #FFF inset;-moz-transform:rotate(225deg);-ms-transform:rotate(225deg);-o-transform:rotate(225deg);-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.nav-flyout-navmask,.nav-flyout-contentmask{position:absolute;top:0;bottom:0;left:0;right:0;}
.nav-flyout-contentmask{z-index:1;}
.nav-flyout-navmask{right:180px;z-index:1;}
/* Menu Toggle */
.btn-navbar{position:absolute;width:50px;height:40px;padding:4px 0;display:block;z-index:1;}
.btn-navbar-navtoggle{left:10px;}
.btn-navbar .icon-bar{display:block;width:28px;height:4px;background-color:#4d4d4d;margin:7px auto 0 auto;}
.btn-navbar .icon-bar + .icon-bar{margin-top:3px;}
@media screen and (min-width:768px){.btn-navbar{display:none;}
}
/* Navbar Styles */
.navbar{height:40px;margin:0;padding:5px 0;position:relative;background:#fafafa;margin-bottom:10px;width:100%;padding:0 10px;font-family:Arial,Helvetica,sans-serif;box-shadow:0 1px 1px 0px #dddddd;}
@media screen and (max-width:767px){.navbar .nav-collapse{display:none;}
}
@media screen and (min-width:768px){.navbar{height:auto;position:relative;background:#fafafa;margin-bottom:10px;width:100%;padding:0 10px;}
}
/* Mobile First Nav */
.the-nav ul.nav-flyout{display:block;margin-bottom:15px;float:none;height:100%;}
.the-nav ul.nav-flyout > li{float:none;display:block;width:270px;}
.the-nav ul.nav-flyout li a{color:#FFF;display:block;text-decoration:none;padding:11px 15px;margin-right:0;}
.the-nav ul.nav-flyout li a:hover{background:#ff8358;}
.the-nav ul.nav-flyout .dropdown{position:static;}
.the-nav ul.nav-flyout .dropdown .subnav{float:none;position:absolute;display:block;top:0;right:0;left:auto;width:0;min-width:0;margin:0;list-style:none;z-index:1000;background:#595959;transition:width .2s ease-in-out;}
.the-nav ul.nav-flyout .dropdown .subnav > li{width:180px;}
.the-nav ul.nav-flyout .dropdown .subnav.is-subnav-visible{width:180px;}
.the-nav.is-inactive ul.nav-flyout > li > a{opacity:.2;}
.the-nav.is-inactive ul.nav-flyout > li.is-active > a{opacity:1;background:#ff8358;}
/* Large Screen Styles*/
@media screen and (min-width:768px){.container{width:95%;margin:0 auto;}
.the-nav{display:block;}
.the-nav .nav{display:block;}
.the-nav .nav-pill:after{content:"";display:table;clear:both;}
.the-nav > .nav{margin:0;line-height:normal;}
.the-nav > .nav > li{display:inline-block;margin-bottom:0;position:relative;}
.the-nav > .nav > li .caret{margin-top:8px;margin-left:2px;border-top-color:#A7A7A7;border-bottom-color:#A7A7A7;}
.the-nav > .nav > li a{display:block;padding:10px 10px 10px;color:#A7A7A7;font-weight:500;text-decoration:none;}
.the-nav > .nav > li:nth-of-type(1) > a{padding-left:0;}
.the-nav > .nav > li:last-of-type > a{padding-right:0;}
/* Active State */
.the-nav > .nav > li:hover > a{color:#303030;}
.the-nav > .nav > li:hover .subnav{display:block;}
.the-nav > .nav > li:hover .caret{border-top-color:#303030;border-bottom-color:#303030;}
/* Subnav */
.nav > li > .subnav{display:none;position:absolute;top:100%;left:0;z-index:20;margin:0;padding:0;min-width:160px;background:#F7F7F7;box-shadow:0 1px 1px 0px #DDDDDD;}
.nav > li > .subnav > li{margin-bottom:0;}
.nav > li > .subnav > li a{color:#A7A7A7;-moz-transition:all,0.2s;-o-transition:all,0.2s;-webkit-transition:all,0.2s;transition:all,0.2s;}
.nav > li > .subnav > li:hover a{background:#ff8358;color:white;}
}
/* General Mobile First Styles */
.hidden-sm{display:none;}
@media screen and (min-width:768px){.visible-sm{display:none;}
.hidden-sm{display:block;}
}
/* Resets and clean ups and extras */
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body{background:#E72534;}
ul{list-style:none;padding:0;margin:0;}
ul li{margin:0;}
.pull-left{float:left;}
.pull-right{float:right;}
.dropdown .caret{display:inline-block;width:0;height:0;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid gray;content:"";}
.clearfix:after{content:"";display:table;clear:both;}
.container{font-family:'Lato',Sans-serif;width:95%;margin:0 auto;}
.container.navbar{width:100%;}
.container:before,.container:after{content:"";display:table;clear:both;}
h1{font-size:3.7em;font-weight:200;margin-top:.2em;}
p{font-size:1em;line-height:1.4em;font-weight:400;}
a.gh-btn{display:inline-block;width:250px;background:white;color:#1D1F21;font-weight:bold;text-transform:uppercase;text-decoration:none;text-align:center;padding:15px 25px;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
a.gh-btn:hover{background:#e6e6e6;}
.align-center{text-align:center;}
pre{color:#cccccc;overflow:auto;overflow:auto;background:#1D1F21;padding:0;font-family:monospace;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-ms-word-break:normal;word-break:normal;word-break:normal;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;}
pre code{background:none;padding:15px;white-space:pre;overflow:auto;display:block;}
.layout-right-content{color:#ffdede;}
分享到QQ
分享到微博
微信扫一扫
