Template:Team:Marburg/Template:HeaderMenu
From 2014.igem.org
- slider2_container {
position: relative; width: 600px; height: 300px; margin: 0px auto; border: 10px solid #FFF; box-shadow: 2px 7px 5px #888; top:-35px;
} .menu {display:block; padding:0; margin:0; height:42px; position:relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -ms-touch-action: none; } .menu img {position:absolute; left:0px; top:34px; z-index:100; display:none;} .menu.first img, .menu.second img {top:14px;} .menu ul {padding:0; margin:0; margin-top: 25px; padding-top: 25px;} .menu ul li {display:inline-block; position:relative;background: url('https://static.igem.org/mediawiki/2014/0/0d/Mr_navigation_general.png');} .menu ul li {*display:inline; z-index: 1;} .menu ul li a {display:block; font:normal 15pt/40px 'Muli', arial, sans-serif; color:#444; text-decoration:none; padding:0 18px; text-align:center;} .menu ul li a:hover {color:#a00;} .menu ul li.current a {color:#c00; z-index:100;} .menu ul li.current b {display:block; width:100%; height:40px; position:absolute;; top:0; left:0; background:url(trans.gif);} .menu.center {text-align:center;} .menu.right {text-align:right;}
.menu.first { z-index: 120; } .menu ul li.current a {color:#c00; z-index:120;}
@media only screen and (max-width:1200px) { .menu {width:235px;} .menu.center {margin:0 auto; text-align:left;} .menu.right {margin:0 0 0 auto; text-align:left;} .menu img {display:block;} .menu ul li {display:block; margin-bottom:-40px; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s; } .menu ul li:last-child {margin-bottom:0;} .menu ul li.current {display:block; z-index:10;} .menu:hover ul li {margin-bottom:0;}
#slider2_container { top:-0; border: none; }
} @media only screen and (max-device-width:1024px) and (orientation:portrait) { .menu {width:235px;} .menu.center {margin:0 auto; text-align:left;} .menu.right {margin:0 0 0 auto; text-align:left;} .menu img {display:block;} .menu ul li {display:block; margin-bottom:-40px; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s; } .menu ul li:last-child {margin-bottom:0;} .menu ul li.current {display:block; z-index:10;} .menu:hover ul li {margin-bottom:0;}
#slider2_container { top:0; border: none; }
} @media only screen and (max-device-width:480px) { .menu {width:235px;} .menu.center {margin:0 auto; text-align:left;} .menu.right {margin:0 0 0 auto; text-align:left;} .menu img {display:block;} .menu ul li {display:block; margin-bottom:-40px; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; transition:0.5s; } .menu ul li:last-child {margin-bottom:0;} .menu ul li.current {display:block; z-index:10;} .menu:hover ul li {margin-bottom:0;}
#slider2_container { top:0; border: none; }
}
.menu ul li.current a.a {
color: #C00;
} .menu ul li a.a: hover {
color: #A00 !important;
} .menu ul li.current a.b {
color: #00668d;
} .menu ul li a.b:hover {
color: #004b67 !important;
} .menu ul li.current a.c {
color: #e77235;
} .menu ul li a.c:hover {
color: #cb5f25 !important;
} .menu ul li.current a.d {
color: #339209;
} .menu ul li a.d:hover {
color: #256c06 !important;
}
.menu ul li.current a.e { color: #43969f;
} .menu ul li a.e:hover {
color: #26585e !important;
} .menu ul li a.f:hover {
color: #ad8d06 !important;
} .menu ul li.current a.f {
color: #cda80e !important;
}
- navbox {
background: url('https://static.igem.org/mediawiki/2014/b/bc/Mr_logo_surf.png'); background-repeat: no-repeat; margin: 0 auto; min-width: 500px; max-width: 1080px; width: 85%; text-align: center;
}
.menu {
height: 100px;
}
.menu.first, .menu.second {
height: 50px;
}
.menu ul.second {
padding-top: 0; margin: 0 auto;
}
.menu ul.first li {
background: url('https://static.igem.org/mediawiki/2014/7/75/Mr-navigation-first.png');
}
.menu ul.second li {
background: url('https://static.igem.org/mediawiki/2014/1/1a/Mr-navigation-second.png');
}
.menu.first, .menu.second {
height: 50px;
}
.menu.second ul li a {
font: 13pt/40px "Muli",arial,sans-serif;
}
.menu.first ul, .menu.second ul {
padding-top: 0px;
}