以下是 jQuery黑色二级下拉导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html class="no-js">
<head lang="en">
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery黑色二级下拉导航菜单代码</title>
<link href="css/responsive-menu.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="js/modernizr.min.js" type="text/javascript"></script>
<script src="js/modernizr-custom.js" type="text/javascript"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/responsive-menu.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
var menu = $('.rm-nav').rMenu({
minWidth: '960px',
});
});
</script>
</head>
<body>
<header>
<div class="wrapper">
<div class="brand">
<p><a href="#" class="logo">ChinaZ</a></p>
</div>
<div class="rm-container">
<a class="rm-toggle rm-button rm-nojs" href="http://13141618.taobao.com/jiaoben/">导航菜单</a>
<nav class="rm-nav rm-nojs rm-lighten">
<ul>
<li><a href="#">标题 1</a>
<ul>
<li><a href="#">jQuery特效 1</a></li>
<li><a href="#">jQuery特效 2</a></li>
<li><a href="#">jQuery特效 3</a>
<ul>
<li><a href="#">网页特效 1</a></li>
<li><a href="#">网页特效 2</a></li>
<li><a href="#">网页特效 3</a></li>
<li><a href="#">网页特效 4</a></li>
<li><a href="#">网页特效 5</a></li>
<li><a href="#">网页特效 6</a></li>
<li><a href="#">网页特效 7</a></li>
</ul></li>
<li><a href="#">jQuery特效 4</a></li>
<li><a href="#">jQuery特效 5</a></li>
<li><a href="#">jQuery特效 6</a>
<ul>
<li><a href="#">网页特效 1</a></li>
<li><a href="#">网页特效 2</a></li>
<li><a href="#">网页特效 3</a></li>
<li><a href="#">网页特效 4</a></li>
<li><a href="#">网页特效 5</a></li>
<li><a href="#">网页特效 6</a></li>
<li><a href="#">网页特效 7</a></li>
</ul></li>
<li><a href="#">jQuery特效 7</a></li>
<li><a href="#">jQuery特效 8</a></li>
<li><a href="#">jQuery特效 9</a></li>
</ul></li>
<li><a href="#">标题 2</a>
<ul>
<li><a href="#">jQuery特效 1</a></li>
<li><a href="#">jQuery特效 2</a></li>
<li><a href="#">jQuery特效 3</a>
<ul>
<li><a href="#">网页特效 1</a></li>
<li><a href="#">网页特效 2</a></li>
<li><a href="#">网页特效 3</a></li>
<li><a href="#">网页特效 4</a></li>
<li><a href="#">网页特效 5</a></li>
<li><a href="#">网页特效 6</a></li>
<li><a href="#">网页特效 7</a></li>
</ul></li>
<li><a href="#">jQuery特效 4</a></li>
<li><a href="#">jQuery特效 5</a></li>
</ul></li>
<li><a href="#">标题 3</a></li>
<li><a href="#">标题 4</a>
<ul>
<li><a href="#">jQuery特效 1</a></li>
<li><a href="#">jQuery特效 2</a></li>
<li><a href="#">jQuery特效 3</a>
<ul>
<li><a href="#">网页特效 1</a></li>
<li><a href="#">网页特效 2</a></li>
<li><a href="#">网页特效 3</a></li>
</ul></li>
</ul></li>
<li><a href="#">标题 5</a>
<ul>
<li><a href="#">jQuery特效 1</a></li>
<li><a href="#">jQuery特效 2</a>
<ul>
<li><a href="#">网页特效 1</a></li>
<li><a href="#">网页特效 2</a></li>
<li><a href="#">网页特效 3</a></li>
</ul></li>
</ul></li>
</ul>
</nav>
</div>
</div>
</header>
<script>$(function() { $('pre').addClass('prettyprint');})</script>
</body>
</html>
JS代码(responsive-menu.min.js):
/*! jQuery Responsive Menu 2015-06-14 version:0.2.1 */
!function(a,b,c,d,e){
"use strict";
var f="rMenu",g=function(c,d){
var e=this;
e.optionsInit={
minWidth:"769px",transitionSpeed:400,jqueryEasing:"swing",css3Easing:"ease",toggleBtnBool:!0,toggleSel:".rm-toggle",menuSel:"ul",menuItemsSel:"li",animateBool:!0,accelerateBool:!1,setupCallback:!1,tabindexStart:1,developmentMode:!1}
,e.options=a.extend({
}
,e.optionsInit,d),e.tButton=a(e.options.toggleSel),e.tButtonClass="rm-button",e.tButtonShowClass="rm-show",e.tButtonActiveClass="rm-active",e.el=a(c),e.navElementClass="rm-nav",e.container=e.el.parent(),e.containerClass="rm-container",e.expandedClass="rm-layout-expanded",e.contractedClass="rm-layout-contracted",e.noJSClass="rm-nojs",e.menus=e.el.find(e.options.menuSel),e.menuClass="rm-menu",e.topMenu=e.el.children(e.options.menuSel),e.topMenuClass="rm-top-menu",e.menuExpandedClass="rm-menu-expanded",e.menuHiddenClass="accessibly-hidden",e.menuCalcClass="rm-calculate",e.menuItemClass="rm-menu-item",e.itemFocused=!1,e.parentClass="rm-parent",e.itemHoverClass="rm-hover",e.itemFirst="rm-first",e.itemLast="rm-last",e.item2ndLast="rm-2nd-last",e.animateClass="rm-css-animate",e.animateBool=e.options.animateBool,e.accelerateClass="rm-accelerate",e.accelerateBool=e.options.accelerateBool,e.touchMoveBool=!1,e.timer=!1,e.windowWidth=a(b).width(),e.init=function(){
return e.setup(),a(b).on({
resize:function(){
a(b).width()!==e.windowWidth&&(e.windowWidth=a(b).width(),clearTimeout(e.timer),e.timer=setTimeout(e.adjust,500))}
}
),"function"==typeof e.options.setupCallback&&e.options.setupCallback(),this}
,e.setup=function(){
return e.container.addClass(e.containerClass),e.options.toggleBtnBool?e.tButton.addClass(e.tButtonClass):e.tButton.removeClass(e.tButtonClass),e.tButton.removeClass(e.noJSClass).off("mousedown.rm focusin.rm click.rm").on("mousedown.rm focusin.rm",f).on("click.rm",g).attr("tabindex",0),e.menus.addClass(e.menuClass).attr("aria-hidden","false").hide(),e.topMenu.addClass(e.topMenuClass),e.animateBool?"undefined"!=typeof Modernizr?Modernizr.csstransitions?Modernizr.csstransforms3d||(e.accelerateBool=!1):(e.animateBool=!1,e.accelerateBool=!1):i()?h()||(e.accelerateBool=!1):(e.animateBool=!1,e.accelerateBool=!1):e.accelerateBool=!1,e.animateBool&&(e.menus.addClass(e.animateClass),e.accelerateBool&&e.menus.addClass(e.accelerateClass)),e.el.removeClass(e.noJSClass).addClass(e.navElementClass).off("focusin.rm focusout.rm click.rm touchend.rm touchmove.rm").on("focusin.rm",e.options.menuItemsSel,l).on("focusout.rm",e.topMenu,n).on("click.rm touchend.rm",e.options.menuItemsSel,k).on("touchmove.rm",e.options.menuItemsSel,m).find(e.options.menuItemsSel).each(function(){
var b=a(this);
b.addClass(e.menuItemClass).children("a").attr("tabindex",0),b.is(":first-child")&&b.addClass(e.itemFirst),b.is(":last-child")&&b.addClass(e.itemLast).prev().addClass(e.item2ndLast)}
).addBack().removeClass(e.parentClass).has(e.options.menuSel).addClass(e.parentClass),e.adjust(),this}
,e.adjust=function(c){
c="undefined"!=typeof c?c:e.options.minWidth,"undefined"!=typeof Modernizr&&Modernizr.mq("only all")?(e.options.developmentMode&&console.log("Modernizr:MQ supported"),Modernizr.mq("( min-width:"+c+" )")?e.layoutExpanded():e.layoutContracted()):(e.options.developmentMode&&console.log("unable to detect MQ support"),a(b).outerWidth()<parseInt(c)?e.layoutContracted():e.layoutExpanded())}
,e.layoutContracted=function(){
return e.container.hasClass(e.contractedClass)||(n({
type:"layoutContracted"}
),e.container.removeClass(e.expandedClass).addClass(e.contractedClass).find("."+e.itemHoverClass).removeClass(e.itemHoverClass),e.animateBool&&e.calculateHeights(),e.el.off("mouseenter.le mouseleave.le"),e.tButton.addClass(e.tButtonShowClass),e.tButton.hasClass(e.tButtonActiveClass)?(e.topMenu.removeClass(e.menuHiddenClass).show().addClass(e.menuExpandedClass),e.animateBool&&e.topMenu.css({
"max-height":"none"}
)):e.topMenu.addClass(e.menuHiddenClass).show().removeClass(e.menuExpandedClass)),e.options.developmentMode&&console.log("responsive-menu:contracted layout"),this}
,e.layoutExpanded=function(){
return e.container.hasClass(e.expandedClass)||(n({
type:"layoutExpanded"}
),e.container.removeClass(e.contractedClass).addClass(e.expandedClass).find("."+e.itemHoverClass).removeClass(e.itemHoverClass),e.animateBool&&e.calculateHeights(),e.el.off("mouseenter.le mouseleave.le").on("mouseenter.le",e.options.menuItemsSel,l).on("mouseleave.le",e.options.menuItemsSel,o).on("mouseleave.le",e.topMenu,n),e.tButton.removeClass(e.tButtonShowClass),e.topMenu.removeClass(e.menuHiddenClass).show().addClass(e.menuExpandedClass),e.animateBool&&e.topMenu.css({
"max-height":"none",overflow:"visible"}
)),e.options.developmentMode&&console.log("responsive-menu:expanded layout"),this}
,e.calculateHeights=function(){
return e.menus.addClass(e.menuCalcClass).removeClass(e.menuExpandedClass).attr("style","").show(0),e.menus.each(function(){
var b=a(this);
b.data("height",b.height())}
).css({
"max-height":"0"}
).removeClass(e.menuCalcClass),this}
,e.toggleMenu=function(b){
r(e.topMenu),e.topMenu.hasClass(e.menuHiddenClass)?(a(b).addClass(e.tButtonActiveClass),e.topMenu.removeClass(e.menuHiddenClass),e.animateBool?e.topMenu.css("max-height","0"):e.topMenu.hide(0),s(e.el)):(a(b).removeClass(e.tButtonActiveClass),r(e.container))}
;
var f=function(b){
b.stopPropagation();
a(b.target);
clearTimeout(e.timer),e.timer=setTimeout(function(){
e.toggleMenu(b.target)}
,100)}
,g=function(a){
a.preventDefault(),a.stopPropagation()}
,k=function(b){
var c=a(b.currentTarget);
b.stopPropagation(),!c.hasClass(e.itemHoverClass)&&c.hasClass(e.parentClass)||e.touchMoveBool?"touchend"!==b.type&&b.preventDefault():(location.href=c.children("a").attr("href"),n(b)),e.touchMoveBool=!1}
,l=function(b){
var c=a(b.currentTarget);
b.stopPropagation(),"focusin"!==b.type&&c.children("a").not(":focus").focus(),e.itemFocused=c,clearTimeout(e.timer),e.timer=setTimeout(function(){
e.tButton.hasClass(e.tButtonShowClass)&&!e.tButton.hasClass(e.tButtonActiveClass)&&e.toggleMenu(e.tButton.get(0)),c.hasClass(e.parentClass)?c.hasClass(e.itemHoverClass)||(r(c.parent()),s(c)):r(c.parent())}
,100)}
,m=function(){
e.touchMoveBool=!0}
,n=function(a){
a=a||{
type:"callback"}
,clearTimeout(e.timer),e.timer=setTimeout(function(){
e.itemFocused&&(e.itemFocused.children("a").blur(),e.itemFocused=!1),r(e.topMenu)}
,100)}
,o=function(b){
var c=a(b.currentTarget);
clearTimeout(e.timer),e.timer=setTimeout(function(){
c.parent().parent().children("a").focus()}
,100)}
,p=function(b){
if("max-height"===b.originalEvent.propertyName){
var c=a(b.currentTarget);
b.stopPropagation(),c.css({
transition:"","max-height":"0",overflow:"hidden"}
).removeClass(e.menuExpandedClass).off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd").parent().find("."+e.itemHoverClass).addBack().removeClass(e.itemHoverClass),c.hasClass(e.topMenuClass)&&c.addClass(e.menuHiddenClass).show(0),j(e.itemFocused)}
}
,q=function(b){
if("max-height"===b.originalEvent.propertyName){
var c=a(b.currentTarget);
b.stopPropagation(),c.removeClass(e.menuHiddenClass).css({
transition:"","max-height":"none",overflow:"visible"}
).addClass(e.menuExpandedClass).off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd"),c.parent("."+e.parentClass).addClass(e.itemHoverClass),j(e.itemFocused)}
}
,r=function(b){
var c=b.find(e.options.menuSel);
e.animateBool?(c.each(function(){
var b=a(this);
0!==b.height()?b.css({
"max-height":b.height(),transition:"max-height "+String(e.options.transitionSpeed/1e3)+"s "+e.options.css3Easing,overflow:"hidden"}
).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",p):c.not(b)}
),c.hide(0).show(0),c.css({
"max-height":"0"}
).removeClass(e.menuExpandedClass)):c.each(function(){
var b=a(this);
0!==b.height()&&b.slideUp(e.options.transitionSpeed,e.options.jqueryEasing,function(){
b.css("overflow","visible").removeClass(e.menuExpandedClass).parent("."+e.parentClass).removeClass(e.itemHoverClass),b.hasClass(e.topMenuClass)&&e.topMenu.addClass(e.menuHiddenClass),j(e.itemFocused)}
)}
)}
,s=function(a){
var b=a.children(e.options.menuSel);
a.siblings("."+e.itemHoverClass).removeClass(e.itemHoverClass),e.animateBool?b.css({
transition:"max-height "+String(e.options.transitionSpeed/1e3)+"s "+e.options.css3Easing,"max-height":b.data("height")}
).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",q):b.slideDown(e.options.transitionSpeed,e.options.jqueryEasing,function(){
a.addClass(e.itemHoverClass),b.addClass(e.menuExpandedClass).css("overflow","visible"),console.log("jquery expand"),j(e.itemFocused)}
)}
;
return e.init(c),this}
;
a.fn[f]=function(b){
return this.each(function(){
var c=a(this);
c.data(f)||c.data(f,new g(this,b))}
)}
;
var h=function(){
var a,d=c.createElement("p"),f={
webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"}
;
c.body.insertBefore(d,null);
for(var g in f)d.style[g]!==e&&(d.style[g]="translate3d(1px,1px,1px)",a=b.getComputedStyle(d).getPropertyValue(f[g]));
return c.body.removeChild(d),a!==e&&a.length>0&&"none"!==a}
,i=function(){
var a=c.body||c.documentElement,b=a.style,d="transition";
if("string"==typeof b[d])return!0;
var e=["Moz","webkit","Webkit","Khtml","O","ms"];
d=d.charAt(0).toUpperCase()+d.substr(1);
for(var f=0;
f<e.length;
f++)if("string"==typeof b[e[f]+d])return!0;
return!1}
,j=function(c){
if(c.length){
var d=a(b).scrollTop(),e=d+a(b).height(),f=c.offset().top,g=f+c.outerHeight();
(g>e||d>f)&&a("html,body").animate({
scrollTop:f}
,"slow")}
}
}
(jQuery,window,document,Math);
CSS代码(responsive-menu.min.css):
/*! Responsive menuversion:0.2.1*/
.rm-menu,.rm-nav ul{background-color:#000;margin-top:0}
.rm-container:after{content:" ";display:table;clear:both}
.rm-toggle{display:none;float:right;padding:0 .75em;margin:1em;height:2em;line-height:2em;text-decoration:none;text-transform:uppercase;background-color:gray;background-color:rgba(128,128,128,.5)}
.rm-toggle.rm-show{display:inline-block}
.rm-toggle.rm-button{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NjU2N0Q1RTNBMkZFMjExQTlCNjg5QjQzQTBGRDY1QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MkIzMDBDNTJGODIxMUUyOTgzN0ExQ0FEREZERTE4MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MkIzMDBDNDJGODIxMUUyOTgzN0ExQ0FEREZERTE4MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU3NTY3RDVFM0EyRkUyMTFBOUI2ODlCNDNBMEZENjVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU2NTY3RDVFM0EyRkUyMTFBOUI2ODlCNDNBMEZENjVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+S+feugAAAFtJREFUeNpi/P//PwMtAeOQt4AFjU8V2xgZGXmA1E8g/oPuA2pZoAykXgLxVxQLgBLcQEociHkotOMLLgtAQcaOJehIBX+wBhHQApqnotFIHo3k0UgeipEMEGAADaRXEC7WAy0AAAAASUVORK5CYII=);background-repeat:no-repeat;background-position:center center;padding:0;width:2.5em;text-indent:100%;white-space:nowrap;overflow:hidden}
.rm-nav{clear:both}
.rm-nav>ul,.rm-top-menu{clear:both;list-style:none;padding:0;margin-left:0;margin-bottom:0;zoom:1}
.rm-menu-item,.rm-nav li{position:relative}
.rm-nav>ul>.rm-last,.rm-top-menu>.rm-last{margin-bottom:1em}
.rm-menu-item a,.rm-nav li a{padding:.75em 1em;display:block;position:relative;color:#fff;text-decoration:none}
.rm-menu-item .rm-menu,.rm-nav li ul{width:100%;padding:0;margin-left:0;list-style:none;z-index:500;zoom:1}
.rm-nav .rm-hover .rm-menu,.rm-nav .rm-hover ul{z-index:600}
.rm-menu-item .rm-menu-item a,.rm-nav li li a{z-index:500;padding-left:2em}
.rm-menu-item .rm-menu-item.rm-last a,.rm-nav li li.rm-last a{padding-bottom:1em}
.rm-menu-item .rm-menu-item .rm-menu,.rm-nav li li ul{position:static}
.rm-menu-item .rm-menu-item .rm-menu-item a,.rm-nav li li li a{z-index:600;padding-left:3em}
.rm-accelerate{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;-webkit-perspective:1000}
.rm-css-animate{display:block;max-height:0;overflow:hidden}
.rm-css-animate.rm-menu-expanded{overflow:visible}
.rm-nav a{-webkit-transition:background-color .3s;transition:background-color .3s}
.rm-toggle:focus,.rm-toggle:hover{background-color:#9c9c9c;background-color:rgba(156,156,156,.5);outline:0}
.rm-lighten .rm-menu-item .rm-menu-item a,.rm-lighten .rm-menu-item a:focus,.rm-lighten .rm-menu-item a:hover,.rm-lighten .rm-menu-item.rm-hover>a,.rm-lighten li a:focus,.rm-lighten li a:hover,.rm-lighten li li a,.rm-lighten li.rm-hover a{background-color:#202020;background-color:rgba(255,255,255,.1);outline:0}
.rm-lighten .rm-menu-expanded li a:focus,.rm-lighten .rm-menu-expanded li a:hover,.rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item a,.rm-lighten .rm-menu-item .rm-menu-item a:focus,.rm-lighten .rm-menu-item .rm-menu-item a:hover,.rm-lighten .rm-menu-item .rm-menu-item.rm-hover a,.rm-lighten li li a:focus,.rm-lighten li li a:hover,.rm-lighten li li li a,.rm-lighten li li.rm-hover a{background-color:#606060;background-color:rgba(255,255,255,.2)}
.rm-lighten .rm-menu-item .rm-menu-expanded a:focus,.rm-lighten .rm-menu-item .rm-menu-expanded a:hover,.rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item a:focus,.rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item a:hover,.rm-lighten .rm-menu-item .rm-menu-item .rm-menu-item.rm-hover a,.rm-lighten li .rm-menu-expanded a:focus,.rm-lighten li .rm-menu-expanded a:hover,.rm-lighten li li li a:focus,.rm-lighten li li li a:hover,.rm-lighten li li li.rm-hover a{background-color:gray;background-color:rgba(255,255,255,.3)}
.rm-darken .rm-menu-item .rm-menu-item a,.rm-darken .rm-menu-item a:focus,.rm-darken .rm-menu-item a:hover,.rm-darken .rm-menu-item.rm-hover>a,.rm-darken li a:focus,.rm-darken li a:hover,.rm-darken li li a,.rm-darken li.rm-hover a{background-color:silver;background-color:rgba(0,0,0,.1);outline:0}
.rm-darken .rm-menu-expanded li a:focus,.rm-darken .rm-menu-expanded li a:hover,.rm-darken .rm-menu-item .rm-menu-item .rm-menu-item a,.rm-darken .rm-menu-item .rm-menu-item a:focus,.rm-darken .rm-menu-item .rm-menu-item a:hover,.rm-darken .rm-menu-item .rm-menu-item.rm-hover a,.rm-darken li li a:focus,.rm-darken li li a:hover,.rm-darken li li li a,.rm-darken li li.rm-hover a{background-color:#a0a0a0;background-color:rgba(0,0,0,.2)}
.rm-darken .rm-menu-item .rm-menu-expanded a:focus,.rm-darken .rm-menu-item .rm-menu-expanded a:hover,.rm-darken .rm-menu-item .rm-menu-item .rm-menu-item a:focus,.rm-darken .rm-menu-item .rm-menu-item .rm-menu-item a:hover,.rm-darken .rm-menu-item .rm-menu-item .rm-menu-item.rm-hover a,.rm-darken li .rm-menu-expanded a:focus,.rm-darken li .rm-menu-expanded a:hover,.rm-darken li li li a:focus,.rm-darken li li li a:hover,.rm-darken li li li.rm-hover a{background-color:gray;background-color:rgba(0,0,0,.3)}
.rm-layout-expanded .rm-nav>ul,.rm-layout-expanded .rm-top-menu{margin-bottom:0}
.rm-layout-expanded .rm-nav>ul>li,.rm-layout-expanded .rm-top-menu>.rm-menu-item{float:left}
.rm-layout-expanded .rm-nav>ul>.rm-last,.rm-layout-expanded .rm-top-menu>.rm-last{margin-bottom:0}
.rm-layout-expanded .rm-nav>ul>li>a,.rm-layout-expanded .rm-top-menu>.rm-menu-item>a{height:3em;line-height:3em;padding-top:0;padding-bottom:0}
.rm-layout-expanded .rm-menu-item .rm-menu,.rm-layout-expanded li ul{width:15em;position:absolute;left:0}
.rm-layout-expanded .rm-menu-item.rm-2nd-last .rm-menu,.rm-layout-expanded .rm-menu-item.rm-last .rm-menu,.rm-layout-expanded li.rm-2nd-last ul,.rm-layout-expanded li.rm-last ul{left:auto;right:0}
.rm-layout-expanded .rm-menu-item .rm-menu-item .rm-menu,.rm-layout-expanded li li ul{position:absolute;left:100%;top:0}
.rm-layout-expanded .rm-menu-item .rm-menu-item.rm-2nd-last .rm-menu,.rm-layout-expanded .rm-menu-item .rm-menu-item.rm-last .rm-menu,.rm-layout-expanded li li.rm-2nd-last ul,.rm-layout-expanded li li.rm-last ul{right:100%;left:auto}
.rm-layout-expanded .rm-menu-item .rm-menu-item .rm-menu-item a,.rm-layout-expanded .rm-menu-item .rm-menu-item a,.rm-layout-expanded .rm-menu-item a,.rm-layout-expanded li a,.rm-layout-expanded li li a,.rm-layout-expanded li li li a{padding-left:1em}
.rm-layout-expanded .rm-nav>ul:after,.rm-layout-expanded .rm-nav>ul:before,.rm-layout-expanded .rm-top-menu:after,.rm-layout-expanded .rm-top-menu:before{content:" ";display:table}
.rm-layout-expanded .rm-nav>ul:after,.rm-layout-expanded .rm-top-menu:after{clear:both}
.no-js .rm-nav .rm-menu-item .rm-menu,.no-js .rm-nav li ul,.rm-nojs .rm-menu-item .rm-menu,.rm-nojs li ul{position:absolute;left:-999em}
.rm-toggle.rm-nojs{display:inline-block;visibility:hidden}
@media screen and (min-width:769px){.no-js .rm-nav>.rm-menu>.rm-menu-item,.no-js .rm-nav>ul>li,.rm-nojs>.rm-menu>.rm-menu-item,.rm-nojs>ul>li{float:left}
.no-js .rm-nav .rm-menu-item a,.no-js .rm-nav li a,.rm-nojs .rm-menu-item a,.rm-nojs li a{padding-left:1em}
.no-js .rm-nav>.rm-menu:after,.no-js .rm-nav>.rm-menu:before,.no-js .rm-nav>ul:after,.no-js .rm-nav>ul:before,.rm-nojs>.rm-menu:after,.rm-nojs>.rm-menu:before,.rm-nojs>ul:after,.rm-nojs>ul:before{content:" ";display:table}
.no-js .rm-nav>.rm-menu:after,.no-js .rm-nav>ul:after,.rm-nojs>.rm-menu:after,.rm-nojs>ul:after{clear:both}
.rm-toggle.rm-nojs{display:none}
}
.rm-calculate{position:absolute!important;max-height:none!important;overflow:visible!important}
.rm-layout-contracted .rm-calculate{width:100%!important}
.rm-container .accessibly-hidden{position:absolute;left:-999em}
CSS代码(styles.css):
/* Unessential CSS - Just here to make this sample page prettier */
html,body{height:100%;}
body{margin:0;font-size:16px;font-family:'Roboto',sans-serif;line-height:1.5;background-color:#3c79b0;}
.wrapper{margin:0 auto;max-width:1060px;padding:1px 3em;height:100%;}
header{background-color:#000;}
header:after{content:" ";display:table;clear:both;}
.brand,h1,h2,h3{font-family:'Roboto Condensed',sans-serif;font-weight:400;letter-spacing:1px;}
h4,h5,h6{letter-spacing:1px;}
h1{font-size:28px;}
.main .dev-output pre{overflow:auto;max-height:500px;background-color:#EBF4FD;padding:0 1em 1em;}
.brand{float:left;height:80px;}
.brand p{margin:0;}
.rm-nav{letter-spacing:1px;}
.logo{font-size:1.4em;line-height:40px;margin:20px 0 0;width:100px;height:40px;background-color:#3C97D5;text-align:center;font-weight:bold;letter-spacing:2px;display:block;float:left;text-decoration:none;color:#fff;padding:0;}
.rm-toggle.rm-button{margin-top:25px;}
.rm-css-animate.rm-menu-expanded{max-height:none;display:block;}
.rm-container.rm-layout-expanded{float:right;}
.rm-nav li a,.rm-top-menu a{padding:.75rem 1rem;font-size:.9em;line-height:1.5rem;text-transform:uppercase;}
.rm-layout-expanded .rm-nav > ul > li > a,.rm-layout-expanded .rm-top-menu > .rm-menu-item > a{height:80px;line-height:80px;}
.main{background-image:url("../images/cloud.jpg");background-position:center top;background-repeat:repeat-x;min-height:100%;padding-top:1px;}
.tagline{width:360px;font-size:1.75em;font-weight:bold;letter-spacing:2px;line-height:1.2;text-align:center;margin:275px auto;color:#1A88D3;}
.tagline strong{font-size:1.3em;}
.dev-output{background-color:#e1eaf3;/* fall-back */
background-color:rgba(255,255,255,.85);color:#000;padding:2em;margin-bottom:2em;}
分享到QQ
分享到微博
微信扫一扫
