Adding Cascading Style Sheet for the beginning of HTML5/ CSS3 Drop Down menus option in NarrativeWeb.
svn: r18768
This commit is contained in:
Rob G. Healey
parent
b5a262a861
commit
22dd294bc4
@ -15,6 +15,7 @@ DATAFILES = \
|
||||
Web_Basic-Lilac.css \
|
||||
Web_Basic-Peach.css \
|
||||
Web_Basic-Spruce.css \
|
||||
Web_DropDown-Menus.css \
|
||||
Web_Fade-Menus.css \
|
||||
Web_Horizontal-Menus.css \
|
||||
Web_Mainz.css \
|
||||
|
||||
146
src/plugins/webstuff/css/Web_DropDown-Menus.css
Normal file
146
src/plugins/webstuff/css/Web_DropDown-Menus.css
Normal file
@ -0,0 +1,146 @@
|
||||
/* Main
|
||||
------------------------------------------------------ */
|
||||
#menu {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 0;
|
||||
list-style: none;
|
||||
background: #111;
|
||||
background: -moz-linear-gradient(#444, #111);
|
||||
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
|
||||
background: -webkit-linear-gradient(#444, #111);
|
||||
background: -o-linear-gradient(#444, #111);
|
||||
background: -ms-linear-gradient(#444, #111);
|
||||
background: linear-gradient(#444, #111);
|
||||
-moz-border-radius: 50px;
|
||||
border-radius: 50px;
|
||||
-moz-box-shadow: 0 2px 1px #9c9c9c;
|
||||
-webkit-box-shadow: 0 2px 1px #9c9c9c;
|
||||
box-shadow: 0 2px 1px #9c9c9c;
|
||||
}
|
||||
#menu li {
|
||||
float: left;
|
||||
padding: 0 0 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
#menu a {
|
||||
float: left;
|
||||
height: 25px;
|
||||
padding: 0 25px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
font: bold 12px/25px Arial, Helvetica;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
}
|
||||
#menu li:hover > a {
|
||||
color: #fafafa
|
||||
}
|
||||
|
||||
*html #menu li a:hover /* IE6 */
|
||||
{
|
||||
color: #fafafa
|
||||
}
|
||||
#menu li:hover > ul {
|
||||
display: block
|
||||
}
|
||||
|
||||
/* Sub-menu
|
||||
------------------------------------------------------ */
|
||||
#menu ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
z-index: 99999;
|
||||
background: #444;
|
||||
background: -moz-linear-gradient(#444, #111);
|
||||
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
|
||||
background: -webkit-linear-gradient(#444, #111);
|
||||
background: -o-linear-gradient(#444, #111);
|
||||
background: -ms-linear-gradient(#444, #111);
|
||||
background: linear-gradient(#444, #111);
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#menu ul li {
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
|
||||
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
|
||||
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
|
||||
}
|
||||
#menu ul li:last-child {
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#menu ul a {
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
float: none;
|
||||
text-transform: none;
|
||||
}
|
||||
*html #menu ul a /* IE6 */
|
||||
{
|
||||
height: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
*:first-child+html #menu ul a /* IE7 */
|
||||
{
|
||||
height: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
#menu ul a:hover {
|
||||
background: #0186ba;
|
||||
background: -moz-linear-gradient(#04acec, #0186ba);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
|
||||
background: -webkit-linear-gradient(#04acec, #0186ba);
|
||||
background: -o-linear-gradient(#04acec, #0186ba);
|
||||
background: -ms-linear-gradient(#04acec, #0186ba);
|
||||
background: linear-gradient(#04acec, #0186ba);
|
||||
}
|
||||
#menu ul li:first-child a {
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
#menu ul li:first-child a:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 8px solid #444;
|
||||
}
|
||||
#menu ul li:first-child a:hover:after {
|
||||
border-bottom-color: #04acec
|
||||
}
|
||||
#menu ul li:last-child a {
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
/* Clear floated elements
|
||||
------------------------------------------------------ */
|
||||
#menu:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
* html #menu { zoom: 1; } /* IE6 */
|
||||
*:first-child+html #menu { zoom: 1; } /* IE7 */
|
||||
@ -126,6 +126,10 @@ def load_on_reg(dbstate, uistate, plugin):
|
||||
["Fade-Menus", 0, "",
|
||||
path_css('Web_Fade-Menus.css'), None, [], [] ],
|
||||
|
||||
# webkit/Html5/CSS3 Drop Down Menus Style Sheet
|
||||
["DropDown-Menus", 0, "",
|
||||
path_css("Web_DropDown-Menus.css"), None, [], [] ],
|
||||
|
||||
# Vertical Navigation Menus Style Sheet
|
||||
["Vertical-Menus", 0, "",
|
||||
path_css('Web_Vertical-Menus.css'), None, [], [] ],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user