"
Team:TU-Eindhoven/Style
From 2014.igem.org
Revision as of 18:49, 18 May 2014 by Rafiqlubken (Talk | contribs)
/* Removing iGEM style */
- searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display: none;
}
- content {
border: none;
}
/* Customizing standard iGEM navigation panel */
- top-section{
height: 200px;
width: 100%;
border: none;
border-top: none;
color: grey;
border: 2px solid black;
background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");
}
- menubar {
display: table-cell; height: 30px; font-size: 12pt; position: fixed; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #065700),color-stop(0.87, #000000)); background-image: -o-linear-gradient(bottom, #065700 0%, #000000 87%); background-image: -moz-linear-gradient(bottom, #065700 0%, #000000 87%); background-image: -webkit-linear-gradient(bottom, #065700 0%, #000000 87%); background-image: -ms-linear-gradient(bottom, #065700 0%, #000000 87%); background-image: linear-gradient(to bottom, #065700 0%, #000000 87%); border-radius: 2px;
}
- menubar.left-menu {
width: 100%; padding-left: 265px;
}
- menubar.right-menu {
text-align: right; padding-right: 275px;
}
- menubar.left-menu a {
border: none; color: white;
}
- menubar * {
background: transparent;
}
- menubar * a:hover{
color: green; text-decoration: none;
}
- menubar > ul > li:last-child {
display: none;
}
/* TU-Eindhoven Style */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: none;
}
body {
font-family: 'Noto Sans', sans-serif;
}
ol, ul {
list-style: none;
}
- navpanel {
height:50px; width:965px; background:rgba(0,50,0,1); border-radius: 8px; margin-left:auto; margin-right:auto; margin-top:50px; box-shadow:10px 10px 10px #888888;
}
.menu1 {
height:50px; width:200px; background:rgba(0,200,0,1); float:left; transition:all .2s ease-in-out 0s; border-radius: 7px;
}
.menu2 {
height:50px; width:200px; background:rgba(0,150,0,1); float:left; position:relative; left:-15px; transition:all .2s ease-in-out 0s; border-radius: 7px;
}
.menu3 {
height:50px; width:200px; background:rgba(0,100,0,1); float:left; position:relative; left:-30px; transition:all .2s ease-in-out 0s; border-radius: 7px;
}
.menu4 {
height:50px; width:200px; background:rgba(0,50,0,1); float:left; position:relative; left:-45px; transition:all .2s ease-in-out 0s; border-radius: 7px;
}
.p1 {
font-size: 20px; color: rgba(255,255,255,.75); position: relative; margin-left: 25px; margin-top: 10px; width: 100px;
}
.p2 {
font-size:16px;
}
.menu:hover {
width:300px;
}
.menu1:hover {
width:300px;
}
.menu2:hover {
width:300px;
}
.menu3:hover {
width:300px; height:auto; border-bottom-right-radius: 10px; box-shadow:10px 10px 10px #888888;
}
.menu1:hover .p1 {
color:rgba(255,255,255,1);
}
.menu2:hover .p1 {
color:rgba(255,255,255,1);
}
.menu3:hover .p1 {
color:rgba(255,255,255,1);
}
.menu4:hover .p1 {
color:rgba(255,255,255,1);
}
.menu3 ul {
visibility:hidden; list-style:none; font-size:16px; color:rgba(255,255,255,.75); position:relative; margin-left:25px;
}
.menu3:hover ul {
visibility:visible;
}
.menu3 ul li:hover {
color:rgba(255,255,255,1);
}
/* Second navigation panel */
ul.sdt_menu{
margin:0; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1020px;
}
ul.sdt_menu a{
text-decoration:none; outline:none;
}
ul.sdt_menu li{
float:left; width:170px; height:85px; position:relative; cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute; top:0px; left:0px; width:170px; height:85px; z-index:12; background:transparent url(../images/overlay.png) no-repeat bottom right; -moz-box-shadow:0px 0px 2px #000; -webkit-box-shadow:0px 0px 2px #000; box-shadow:0px 0px 2px #000;
}
ul.sdt_menu li a img{
border:none; position:absolute; width:0px; height:0px; bottom:0px; left:85px; z-index:100; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute; top:25px; left:0px; width:170px; height:60px; z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute; background:#111; top:85px; width:170px; height:0px; left:0px; z-index:14; -moz-box-shadow:0px 0px 4px #000 inset; -webkit-box-shadow:0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{
margin-left:15px; text-transform:uppercase; text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff; font-size:24px; float:left; clear:both;
} ul.sdt_menu li span span.sdt_descr{
color:#0B75AF; float:left; clear:both; width:155px; font-size:10px; letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block; position:absolute; width:170px; overflow:hidden; height:170px; top:85px; left:0px; display:none; background:#000;
} ul.sdt_menu li div.sdt_box a{
float:left; clear:both; line-height:30px; color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
} ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
