"
Team:Freiburg Bioware/css menu
From 2010.igem.org
(Difference between revisions)
| (37 intermediate revisions not shown) | |||
| Line 2: | Line 2: | ||
<style> | <style> | ||
/* menu and header */ | /* menu and header */ | ||
| + | |||
| + | /* top menu */ | ||
| + | |||
| + | #p-logo { | ||
| + | display:none; | ||
| + | } | ||
| + | |||
| + | #top-section .left-menu { | ||
| + | margin-left:0px; | ||
| + | } | ||
| + | #top-section { | ||
| + | background:transparent | ||
| + | } | ||
| + | |||
| + | #menubar li.pad-right { | ||
| + | padding-right:20px; | ||
| + | } | ||
| + | |||
| + | #search-controls { | ||
| + | top:15px; | ||
| + | margin-right:30px; | ||
| + | } | ||
| + | |||
| + | input.searchButton { | ||
| + | color:#555; | ||
| + | position:relative; | ||
| + | top:-20px; | ||
| + | left:20px; | ||
| + | } | ||
| + | input.searchButton:hover, #menubar li a:hover { | ||
| + | color:#030659; | ||
| + | } | ||
| + | |||
| + | #searchGoButton { | ||
| + | display:none; | ||
| + | } | ||
| + | |||
| + | #searchInput { | ||
| + | width:100px; | ||
| + | } | ||
| + | |||
| + | #searchform { | ||
| + | left:-15px; | ||
| + | position:relative; | ||
| + | } | ||
| + | |||
| + | #menubar li a, #menubar .selected a { | ||
| + | color:#030659; | ||
| + | } | ||
| + | div#menubar li.menubar_current { | ||
| + | color:#970808; | ||
| + | } | ||
| + | |||
| + | #top-section #menubar { | ||
| + | top:10px; | ||
| + | } | ||
| + | |||
| + | #top-section .right-menu { | ||
| + | margin-right:185px; | ||
| + | width:250px; | ||
| + | } | ||
| + | |||
| + | |||
| + | input.searchButton { | ||
| + | left:80px; | ||
| + | } | ||
/* banner */ | /* banner */ | ||
| + | |||
| + | #banner-wrap { | ||
| + | width:975px; | ||
| + | height:350px; | ||
| + | position:relative; | ||
| + | margin-left:-10px; | ||
| + | top:12px; | ||
| + | background:transparent; | ||
| + | } | ||
| + | |||
| + | #banner1, #banner2, #banner3 { | ||
| + | background:transparent; | ||
| + | } | ||
#banner1 { | #banner1 { | ||
float:left; | float:left; | ||
| - | width: | + | width: 713px; |
| - | height: | + | height: 285px; |
margin: 0px 0px 0px 0px; | margin: 0px 0px 0px 0px; | ||
background: transparent | background: transparent | ||
| - | url(https://static.igem.org/mediawiki/2010/ | + | url(https://static.igem.org/mediawiki/2010/3/33/Freiburg10_Banner_Snippet_1.png) no-repeat scroll center 0px; |
position:relative; | position:relative; | ||
top:-25px; | top:-25px; | ||
| Line 18: | Line 97: | ||
#banner2 { | #banner2 { | ||
float:left; | float:left; | ||
| - | width: | + | width: 20px; |
| - | height: | + | height: 325px; |
margin: 0px 0px 0px 0px; | margin: 0px 0px 0px 0px; | ||
background: transparent | background: transparent | ||
| - | url(https://static.igem.org/mediawiki/2010/ | + | url(https://static.igem.org/mediawiki/2010/1/1b/Freiburg10_Banner_Snippet_6.png) no-repeat scroll center 0px; |
position:relative; | position:relative; | ||
top:-25px; | top:-25px; | ||
| - | z-index: | + | z-index:2; |
} | } | ||
#banner3 { | #banner3 { | ||
| - | float: | + | float:left; |
| - | width: | + | width: 242px; |
| - | height: | + | height: 260px; |
margin: 0px 0px 0px 0px; | margin: 0px 0px 0px 0px; | ||
background: transparent | background: transparent | ||
| Line 37: | Line 116: | ||
position:relative; | position:relative; | ||
top:-25px; | top:-25px; | ||
| + | z-index:-1; | ||
} | } | ||
| Line 48: | Line 128: | ||
/* Drop-Down Start */ | /* Drop-Down Start */ | ||
| + | div#menu { | ||
| + | left:5px; | ||
| + | } | ||
#menu { | #menu { | ||
| + | clear:both; | ||
width: 975px; | width: 975px; | ||
margin: 0px 0px 0px 0px; | margin: 0px 0px 0px 0px; | ||
| Line 54: | Line 138: | ||
position: relative; | position: relative; | ||
text-align:center; | text-align:center; | ||
| - | top: - | + | top: -52px; |
| - | filter:alpha(opacity=50); -moz-opacity: 0. | + | filter:alpha(opacity=50); -moz-opacity: 0.97; opacity: 0.97; |
| - | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity= | + | filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2); |
| - | filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity= | + | filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2)"; |
| + | z-index:1; | ||
} | } | ||
| Line 65: | Line 150: | ||
#menu li a, #menu li a:visited {text-decoration:none;} | #menu li a, #menu li a:visited {text-decoration:none;} | ||
#menu li dd {display:none;} | #menu li dd {display:none;} | ||
| + | #menu li d3 {display:none;} | ||
#menu li a:hover {border:0;} | #menu li a:hover {border:0;} | ||
| - | #menu li:hover dd, #menu li a:hover dd {display:block;} | + | #menu li:hover dd, #menu li a:hover dd, #menu li:hover d3, #menu li a:hover d3 {display:block;} |
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} | #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} | ||
#menu table {border-collapse:collapse; padding:0; margin:-1px;} | #menu table {border-collapse:collapse; padding:0; margin:-1px;} | ||
| Line 72: | Line 158: | ||
#menu dt {margin:0; padding: 0;} | #menu dt {margin:0; padding: 0;} | ||
| - | #menu dd {margin:0; padding:0; color: #fff; font-size: 0.9em; text-align:left;width: 150px;} | + | #menu dd, #menu d3 {margin:0; padding:0; color: #fff; font-size: 0.9em; text-align:left;width: 150px;} |
| - | #menu dd.first {margin: 30px 0 0;} | + | #menu dd.first, #menu d3.first {margin: 30px 0 0;} |
#menu dt a, | #menu dt a, | ||
| Line 86: | Line 172: | ||
text-decoration: none; | text-decoration: none; | ||
color: #555555; | color: #555555; | ||
| - | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/5/56/Freiburg10_button_a_120.jpg) no-repeat scroll center center; |
outline:none;} | outline:none;} | ||
| Line 94: | Line 180: | ||
#menu a:active dt a { | #menu a:active dt a { | ||
color:#030659; | color:#030659; | ||
| - | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/8/88/Freiburg10_button_aho_120.jpg) no-repeat scroll center center; |
outline:none; | outline:none; | ||
} | } | ||
| Line 106: | Line 192: | ||
#menu dt.menu_button_left a, | #menu dt.menu_button_left a, | ||
#menu dt.menu_button_left a:visited { | #menu dt.menu_button_left a:visited { | ||
| - | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/1/15/Freiburg10_button_a_left_120.png) no-repeat scroll center center; |
} | } | ||
#menu li:hover dt.menu_button_left a, | #menu li:hover dt.menu_button_left a, | ||
| Line 114: | Line 200: | ||
#menu li dt.menu_button_left a.current, | #menu li dt.menu_button_left a.current, | ||
#menu a dt.menu_button_left a.current { | #menu a dt.menu_button_left a.current { | ||
| - | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/b/b2/Freiburg10_button_aho_left_120.png) no-repeat scroll center center; |
} | } | ||
#menu li:active dt.menu_button_left a, | #menu li:active dt.menu_button_left a, | ||
| Line 124: | Line 210: | ||
#menu dt.menu_button_right a, | #menu dt.menu_button_right a, | ||
#menu dt.menu_button_right a:visited { | #menu dt.menu_button_right a:visited { | ||
| - | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/f/f0/Freiburg10_button_a_right_120.png) no-repeat scroll center center; |
} | } | ||
#menu li:hover dt.menu_button_right a, | #menu li:hover dt.menu_button_right a, | ||
| Line 132: | Line 218: | ||
#menu li dt.menu_button_right a.current, | #menu li dt.menu_button_right a.current, | ||
#menu a dt.menu_button_right a.current { | #menu a dt.menu_button_right a.current { | ||
| - | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/0/0f/Freiburg10_button_aho_right_120.png) no-repeat scroll center center; |
} | } | ||
#menu li:active dt.menu_button_right a, | #menu li:active dt.menu_button_right a, | ||
| Line 140: | Line 226: | ||
color:#970808; | color:#970808; | ||
} | } | ||
| - | #menu dd a, #menu dd a:visited {background:#f5f5f5; color: #555555; padding:0.5em 0; text-decoration:none; display:block; text-align:left; border:none; font-weight:bolder; padding: 5px;} | + | #menu dd a, #menu dd a:visited, #menu d3 a, #menu d3 a:visited {background:#f5f5f5; color: #555555; padding:0.5em 0; text-decoration:none; display:block; text-align:left; border:none; font-weight:bolder; padding: 5px;} |
| - | #menu dd a:hover {background: #d7f6d6; color:#030659; border: none; font-weight:bolder;} | + | #menu dd a:hover, #menu d3 a:hover {background: #d7f6d6; color:#030659; border: none; font-weight:bolder;} |
#menu b {display:block; overflow:hidden; height:1px;} | #menu b {display:block; overflow:hidden; height:1px;} | ||
#menu ul {list-style-image:none;} | #menu ul {list-style-image:none;} | ||
| + | |||
| + | /* 3rd level */ | ||
| + | |||
| + | /* Drop-Down Start */ | ||
| + | |||
| + | #menu3 { | ||
| + | width: 975px; | ||
| + | margin: 0px 0px 0px 0px; | ||
| + | border: none; | ||
| + | position: relative; | ||
| + | text-align:center; | ||
| + | top: -57px; | ||
| + | filter:alpha(opacity=50); -moz-opacity: 0.97; opacity: 0.97; | ||
| + | filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2); | ||
| + | filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2)"; | ||
| + | z-index:1; | ||
| + | } | ||
| + | |||
| + | #menu3 {list-style-type:none; padding:0;} | ||
| + | #menu3 li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:119px; height:3em;} | ||
| + | #menu3 li dl {position:absolute; top:0; left:0; padding-bottom:0;} | ||
| + | #menu3 li a, #menu li a:visited {text-decoration:none;} | ||
| + | #menu3 li dd {display:none;} | ||
| + | #menu3 li d3 {display:none;} | ||
| + | #menu3 li a:hover {border:0;} | ||
| + | #menu3 li:hover dd, #menu li a:hover dd, #menu li:hover d3, #menu li a:hover d3 {display:block;} | ||
| + | #menu3 li:hover dl, #menu li a:hover dl {padding-bottom:10px;} | ||
| + | #menu3 table {border-collapse:collapse; padding:0; margin:-1px;} | ||
| + | #menu3 dl {width: 119px; margin: 0; padding: 0; background: transparent;} | ||
| + | #menu3 dd {margin:0; padding: 0;} | ||
| + | |||
| + | #menu d3 {margin:0; padding:0; color: #fff; font-size: 0.9em; text-align:left;width: 150px;} | ||
| + | #menu d3.first {margin: 30px 0 0;} | ||
| + | |||
| + | #menu3 dd a, | ||
| + | #menu3 dd a:visited { | ||
| + | width: 120px; | ||
| + | height: 35px; | ||
| + | margin: 10px 0x 10px 0px; | ||
| + | padding: 15px 0px 0px 0px; | ||
| + | float: left; | ||
| + | font-weight: bold; | ||
| + | font-size: 12px; | ||
| + | text-decoration: none; | ||
| + | color: #555555; | ||
| + | background: none repeat scroll 0 0 #F5F5F5; | ||
| + | outline:none;} | ||
| + | |||
| + | #menu3 li:hover dd a, | ||
| + | #menu3 a:hover dd a, | ||
| + | #menu3 li:active dd a, | ||
| + | #menu3 a:active dd a { | ||
| + | color:#030659; | ||
| + | background: background: none repeat scroll 0 0 #030659; | ||
| + | outline:none; | ||
| + | } | ||
| + | #menu3 li dd a.current, | ||
| + | #menu3 li dd a.current { | ||
| + | color:#970808; | ||
| + | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/8/88/Freiburg10_button_aho_120.jpg) no-repeat scroll center center; | ||
| + | outline:none; | ||
| + | } | ||
| + | #menu3 li:active dd a, #menu a:active dd a, #menu li:focus dd a, #menu a:focus dt a {color:#970808;} | ||
| + | #menu3 dd.menu_button_left a, | ||
| + | #menu3 dd.menu_button_left a:visited { | ||
| + | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/2/2f/Freiburg10_button_a_left_120.jpg) no-repeat scroll center center; | ||
| + | } | ||
| + | #menu3 li:hover dd.menu_button_left a, | ||
| + | #menu3 a:hover dd.menu_button_left a, | ||
| + | #menu3 li:active dd.menu_button_left a, | ||
| + | #menu3 a:active dd.menu_button_left a, | ||
| + | #menu3 li dd.menu_button_left a.current, | ||
| + | #menu3 a dd.menu_button_left a.current { | ||
| + | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/9/92/Freiburg10_button_aho_left_120.jpg) no-repeat scroll center center; | ||
| + | } | ||
| + | #menu3 li:active dd.menu_button_left a, | ||
| + | #menu3 a:active dd.menu_button_left a, | ||
| + | #menu3 li:focus dd.menu_button_left a, | ||
| + | #menu3 a:focus dd.menu_button_left a { | ||
| + | color:#970808; | ||
| + | } | ||
| + | #menu3 dd.menu_button_right a, | ||
| + | #menu3 dd.menu_button_right a:visited { | ||
| + | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/a/a6/Freiburg10_button_a_right_120.jpg) no-repeat scroll center center; | ||
| + | } | ||
| + | #menu3 li:hover dd.menu_button_right a, | ||
| + | #menu3 a:hover dd.menu_button_right a, | ||
| + | #menu3 li:active dd.menu_button_right a, | ||
| + | #menu3 a:active dd.menu_button_right a, | ||
| + | #menu3 li dd.menu_button_right a.current, | ||
| + | #menu3 a dd.menu_button_right a.current { | ||
| + | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/f/f9/Freiburg10_button_aho_right_120.jpg) no-repeat scroll center center; | ||
| + | } | ||
| + | #menu3 li:active dd.menu_button_right a, | ||
| + | #menu3 a:active dd.menu_button_right a, | ||
| + | #menu3 li:focus dd.menu_button_right a, | ||
| + | #menu3 a:focus dd.menu_button_right a { | ||
| + | color:#970808; | ||
| + | } | ||
| + | #menu3 d3 a, #menu3 d3 a:visited {background:#f5f5f5; color: #555555; padding:0.5em 0; text-decoration:none; display:block; text-align:left; border:none; font-weight:bolder; padding: 5px;} | ||
| + | #menu3 d3 a:hover {background: #d7f6d6; color:#030659; border: none; font-weight:bolder;} | ||
| + | #menu3 b {display:block; overflow:hidden; height:1px;} | ||
| + | #menu3 ul {list-style-image:none;} | ||
/* Drop-Down-End */ | /* Drop-Down-End */ | ||
Latest revision as of 01:03, 28 October 2010
