You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
6.1 KiB
180 lines
6.1 KiB
/* |
|
99Lime.com HTML KickStart by Joshua Gatcke |
|
kickstart-menus.css |
|
*/ |
|
|
|
/*--------------------------------- |
|
MENU LAYOUT |
|
DO NOT EDIT This Section (unless you know what you are doing) |
|
-----------------------------------*/ |
|
.menu{margin:0;padding:0;line-height:100%; |
|
font-size:0; /* Kill white space gap between LI elements */ |
|
position:relative;z-index:1000;} |
|
|
|
.menu:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} |
|
.menu li{margin:0;padding:0;list-style-type:none;display:inline-block;*display:inline;position:relative;zoom:1;line-height:inherit; |
|
top:0;left:0;font-size:16px; /* fixed font-size to replace font-size:0 in parent .menu 1em/16px default */} |
|
.menu li a{margin:0;padding:0;display:block;display:inline;display:inline-block;position:relative;zoom:1;line-height:100%;top:0;left:0;} |
|
|
|
|
|
/*--------------Sub Menus-------------------*/ |
|
/*.menu li:hover > ul{display:block;}*/ |
|
.menu ul{margin:0;padding:0;position: absolute;top:100%;left:0;display:none;min-width:150px;max-width:150%;*width:150px;} |
|
.menu ul li{display:block;width:100%;} |
|
.menu ul li a{display:block;} |
|
.menu ul ul{top:0;left:100%;} |
|
|
|
/*--------------Dividers-------------------*/ |
|
.menu ul li.divider{border-top:1px solid #ccc;} |
|
.menu ul li.divider a{border-top:1px solid #fff;} |
|
|
|
|
|
/*--------------Right---------------------*/ |
|
.menu li.right{float:right;} |
|
|
|
|
|
/*--------------Arrows-------------------*/ |
|
.menu li.has-menu a{padding-right:25px;} |
|
.menu li.has-menu span.arrow{border-style:solid;border-width:5px; |
|
display:block;position:absolute;top:50%;right:5px;font-size:0;line-height:0;height:0;width:0;} |
|
.menu li li.has-menu span.arrow{margin-top:-4px;} |
|
|
|
/*--------------Vertical Menu Layout-------------------*/ |
|
.menu.vertical{} |
|
.menu.vertical li{display:block;} |
|
.menu.vertical li a{display:block;} |
|
.menu.vertical ul{top:0;left:100%;} |
|
.menu.vertical li.has-menu span.arrow{margin-top:-4px;} |
|
|
|
/*--------------Vertical Right Menu Layout-------------------*/ |
|
.menu.vertical.right{text-align:left;} |
|
.menu.vertical.right ul{top:0;right:100%;left:auto;} |
|
.menu.vertical.right li a{padding-left:25px;padding-right:20px;} |
|
.menu.vertical.right li.has-menu span.arrow{right:auto;left:5px;margin-top:-4px;} |
|
|
|
|
|
/*--------------------------------- |
|
MENU STYLES |
|
EDIT BELOW THIS LINE TO CUSTOMIZE |
|
-----------------------------------*/ |
|
.menu{ |
|
border:1px solid #ccc; |
|
background: #eee; /* Old browsers */ |
|
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */ |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */ |
|
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */ |
|
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */ |
|
background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */ |
|
z-index:600; |
|
} |
|
|
|
.menu li{} |
|
|
|
.menu li a{ |
|
text-shadow:0px 1px 1px #fff; |
|
padding:15px 20px; |
|
text-decoration:none; |
|
font-size:0.9em; |
|
color: #777; |
|
} |
|
|
|
.menu li.current>a, |
|
.menu li.current>a:hover, |
|
.menu li.current.hover>a{ |
|
background: rgb(122,188,255); /* Old browsers */ |
|
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */ |
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */ |
|
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */ |
|
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */ |
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ |
|
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */ |
|
color:#fff; |
|
text-shadow:0px -1px 0 rgba(0,0,0,0.2); |
|
cursor: default; |
|
} |
|
|
|
.menu li a:hover, |
|
.menu li.hover>a{ |
|
background:#f5f5f5; |
|
} |
|
|
|
/* sub menus */ |
|
.menu ul{ |
|
background: #efefef; |
|
border:1px solid #ccc; |
|
} |
|
|
|
.menu ul li{} |
|
.menu ul li a{} |
|
|
|
/* sub-sub menus */ |
|
.menu ul ul{} |
|
.menu ul ul li{} |
|
.menu ul ul li a{} |
|
|
|
/* arrows */ |
|
/* arrow down */ .menu li.has-menu span.arrow{border-color-top:#ccc;border-color:#ccc transparent transparent transparent;} |
|
/* arrow left */ .menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow |
|
{border-color-left:#ccc;border-color:transparent transparent transparent #ccc;} |
|
/* arrow right */ .menu.vertical.right li.has-menu span.arrow{border-color-right:#ccc;border-color:transparent #ccc transparent transparent;} |
|
|
|
/* dividers */ .menu ul li.divider{border-top:1px solid #ccc;} |
|
.menu ul li.divider a{border-top:1px solid #fff;} |
|
|
|
|
|
|
|
/*--------------------------------- |
|
RESPONSIVE MENU STYLES |
|
DO NOT EDIT unless you know what you are doing |
|
-----------------------------------*/ |
|
|
|
.menu li.menu-toggle{display:none;} |
|
|
|
|
|
@media all and (max-width: 768px) { |
|
|
|
.grid .menu li, |
|
.grid .menu.vertical li, |
|
.grid .menu.vertical.right li{ |
|
display:block; |
|
display:none; |
|
} |
|
|
|
.grid .menu li.menu-toggle, |
|
.grid .menu.vertical li.menu-toggle, |
|
.grid .menu.vertical.right li.menu-toggle{ |
|
display:block; |
|
} |
|
|
|
.grid .menu:hover li, |
|
.grid .menu.vertical:hover li, |
|
.grid .menu.vertical.right:hover li{ |
|
display:block; |
|
} |
|
|
|
/* arrows */ |
|
.grid .menu li.has-menu span.arrow, |
|
.grid .menu.vertical li.has-menu span.arrow, |
|
.grid .menu.vertical.right li.has-menu span.arrow, |
|
.grid .menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow |
|
{border-color-top:#ccc;border-color:#ccc transparent transparent transparent;} |
|
|
|
.grid .menu.vertical.right li.has-menu span.arrow{ |
|
right:5px;left:auto; |
|
} |
|
|
|
.grid .menu li a{ |
|
display:block; |
|
} |
|
|
|
.grid .menu ul, |
|
.grid .menu ul ul, |
|
.grid .menu.vertical ul, |
|
.grid .menu.vertical.right ul{ |
|
position:relative; |
|
top:0; |
|
left:0; |
|
margin:10px; |
|
} |
|
|
|
}
|
|
|