"
Team:Imperial College London/gooeymenu
From 2011.igem.org
| Line 1: | Line 1: | ||
hr{ | hr{ | ||
| - | margin: | + | margin:0px 0; |
color:#eee; | color:#eee; | ||
} | } | ||
Revision as of 23:40, 7 October 2011
hr{ margin:0px 0; color:#eee; }
ul li.active{ /*IE6 hack- hide gooey effect from that browser*/ _visibility: hidden; /*IE6 rule*/ }
/* ######### Gel Menu CSS ######### */
ul.gelbuttonmenu{ position:relative; padding: 0; margin: 0; margin-bottom:1em; text-align: center; //set value to "left", "center", or "right"*/ }
ul.gelbuttonmenu li{ display: inline; }
ul.gelbuttonmenu li a{ color: #633e29; font-weight:bold; padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; }
ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; background:#E1CCB5; background:url('https://static.igem.org/mediawiki/2011/4/43/ICL_gelbuttonleft.gif') no-repeat left top, url('https://static.igem.org/mediawiki/2011/e/eb/ICL_gelbuttonright.gif') no-repeat right top, url('https://static.igem.org/mediawiki/2011/7/78/ICL_gelbuttoncenter.gif') repeat-x center top; }
/* ######### Solid Block Menu CSS ######### */
ul.solidblockmenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.solidblockmenu li{ display: inline; }
ul.solidblockmenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: black; padding: 8px; margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; }
ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0; border:1px solid black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; -moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7); -webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7); box-shadow: 2px 2px 4px rgba(120,120,120,0.7); background:#d7ed93; background: -moz-linear-gradient(top, #d7ed93, #fff); background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff)); background: linear-gradient(top, #d7ed93, #fff); }
/* ######### Thick Underline Menu CSS ######### */
ul.underlinemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.underlinemenu li{ display: inline; }
ul.underlinemenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: black; padding: 8px; margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; }
ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border-bottom:5px solid navy;
}
/* ######### Frame Menu CSS ######### */
ul.framemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.framemenu li{ display: inline; }
ul.framemenu li a{ font: bold 14px Arial, Verdana, sans-serif; color: black; padding: 12px 10px 5px 18px; margin-right: 10px; /*spacing between each menu link*/ text-decoration: none; }
ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid orange;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}
