218 lines
5.6 KiB
CSS
Executable File
218 lines
5.6 KiB
CSS
Executable File
/*
|
|
---------------------------------------------------------------
|
|
Note that styles you apply to the main menu items are inherited by the sub menus items too.
|
|
If you'd like to avoid this, you could use child selectors (not supported by IE6) - for example:
|
|
.sm-simple > li > a { ... } instead of .sm-simple a { ... }
|
|
---------------------------------------------------------------*/
|
|
|
|
|
|
/* Menu box
|
|
===================*/
|
|
|
|
.sm-simple,
|
|
.sm-simple ul {
|
|
border:1px solid #bbb;
|
|
background:#fff;
|
|
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
|
|
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
|
|
box-shadow:0 1px 1px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
|
|
/* Menu items
|
|
===================*/
|
|
|
|
.sm-simple a {
|
|
padding:11px 20px;
|
|
color:#555;
|
|
font-size:14px;
|
|
line-height:17px;
|
|
font-family:'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
|
|
text-decoration:none;
|
|
}
|
|
.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active,
|
|
.sm-simple a.highlighted {
|
|
background:#eee;
|
|
color:#555;
|
|
}
|
|
/* current items - add the class manually to some item or check the "markCurrentItem" script option */
|
|
.sm-simple a.current, .sm-simple a.current:hover, .sm-simple a.current:focus, .sm-simple a.current:active {
|
|
background:#555;
|
|
color:#fff;
|
|
}
|
|
.sm-simple a.has-submenu {
|
|
padding-right:32px;
|
|
}
|
|
.sm-simple ul a.has-submenu,
|
|
.sm-simple-vertical a.has-submenu {
|
|
padding-right:23px;
|
|
}
|
|
|
|
|
|
/* Sub menu indicators
|
|
===================*/
|
|
|
|
.sm-simple a span.sub-arrow {
|
|
position:absolute;
|
|
right:12px;
|
|
top:50%;
|
|
margin-top:-8px;
|
|
width:16px;
|
|
height:16px;
|
|
line-height:16px;
|
|
}
|
|
.sm-simple ul a span.sub-arrow,
|
|
.sm-simple-vertical a span.sub-arrow {
|
|
right:auto;
|
|
margin-left:-14px;
|
|
}
|
|
|
|
|
|
/* Items separators
|
|
===================*/
|
|
|
|
.sm-simple li {
|
|
border-left:1px solid #f3f3f3;
|
|
}
|
|
.sm-simple li:first-child {
|
|
border-left:0;
|
|
}
|
|
.sm-simple ul li,
|
|
.sm-simple-vertical li {
|
|
border-left:0;
|
|
border-top:1px solid #f3f3f3;
|
|
}
|
|
.sm-simple ul li:first-child,
|
|
.sm-simple-vertical li:first-child {
|
|
border-top:0;
|
|
}
|
|
|
|
|
|
/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
|
|
===================*/
|
|
|
|
.sm-simple span.scroll-up, .sm-simple span.scroll-down {
|
|
position:absolute;
|
|
display:none;
|
|
visibility:hidden;
|
|
overflow:hidden;
|
|
border:solid #bbb;
|
|
border-width:1px 0;
|
|
background:#fff;
|
|
height:22px;
|
|
/* width and position will be automatically set by the script */
|
|
}
|
|
.sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow {
|
|
position:absolute;
|
|
top:-2px;
|
|
left:50%;
|
|
margin-left:-8px;
|
|
/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
|
|
width:0;
|
|
height:0;
|
|
overflow:hidden;
|
|
border-width:8px; /* tweak size of the arrow */
|
|
border-style:dashed dashed solid dashed;
|
|
border-color:transparent transparent #555 transparent;
|
|
}
|
|
.sm-simple span.scroll-down-arrow {
|
|
top:6px;
|
|
border-style:solid dashed dashed dashed;
|
|
border-color:#555 transparent transparent transparent;
|
|
}
|
|
|
|
|
|
/*
|
|
---------------------------------------------------------------
|
|
Responsiveness
|
|
These will make the sub menus collapsible when the screen width is too small.
|
|
---------------------------------------------------------------*/
|
|
|
|
|
|
@media screen and (max-width: 640px) {
|
|
|
|
/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
|
|
ul.sm-simple{width:auto !important;}
|
|
ul.sm-simple ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
|
|
ul.sm-simple>li{float:none;}
|
|
ul.sm-simple>li>a,ul.sm-simple ul.sm-nowrap>li>a{white-space:normal;}
|
|
ul.sm-simple iframe{display:none;}
|
|
|
|
/* Uncomment this rule to disable completely the sub menus for small screen devices */
|
|
/*.sm-simple ul, .sm-simple span.sub-arrow, .sm-simple iframe {
|
|
display:none !important;
|
|
}*/
|
|
|
|
|
|
/* Menu box
|
|
===================*/
|
|
|
|
.sm-simple ul {
|
|
border:0;
|
|
/* darken the background of the sub menus */
|
|
background:rgba(100,100,100,0.1);
|
|
-moz-box-shadow:none;
|
|
-webkit-box-shadow:none;
|
|
box-shadow:none;
|
|
}
|
|
|
|
|
|
/* Menu items
|
|
===================*/
|
|
|
|
.sm-simple a {
|
|
padding-top:13px;
|
|
padding-bottom:13px;
|
|
background:transparent !important;
|
|
color:#555 !important;
|
|
}
|
|
.sm-simple a.current {
|
|
background:#555 !important;
|
|
color:#fff !important;
|
|
}
|
|
.sm-simple a.has-submenu {
|
|
padding-right:23px;
|
|
}
|
|
/* add some text indentation for the 2+ level sub menu items */
|
|
.sm-simple ul a {
|
|
border-left:8px solid transparent;
|
|
}
|
|
.sm-simple ul ul a {
|
|
border-left:16px solid transparent;
|
|
}
|
|
.sm-simple ul ul ul a {
|
|
border-left:24px solid transparent;
|
|
}
|
|
.sm-simple ul ul ul ul a {
|
|
border-left:32px solid transparent;
|
|
}
|
|
.sm-simple ul ul ul ul ul a {
|
|
border-left:40px solid transparent;
|
|
}
|
|
|
|
|
|
/* Sub menu indicators
|
|
===================*/
|
|
|
|
.sm-simple a span.sub-arrow {
|
|
right:auto;
|
|
margin-left:-14px;
|
|
}
|
|
/* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
|
|
.sm-simple a.highlighted span.sub-arrow {
|
|
display:none !important;
|
|
}
|
|
|
|
|
|
/* Items separators
|
|
===================*/
|
|
|
|
.sm-simple li {
|
|
border-left:0;
|
|
border-top:1px solid rgba(0,0,0,0.05) !important;
|
|
}
|
|
.sm-simple li:first-child {
|
|
border-top:0 !important;
|
|
}
|
|
|
|
} |