Template:Team:Washington/Templates/Top

From 2012.igem.org

(Difference between revisions)
Line 118: Line 118:
position:relative;
position:relative;
}
}
 +
 +
#igemuwmenu, #igemuwmenu ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
#igemuwmenu {
 +
width: 820px;
 +
margin: 10px auto;
 +
border: 1px solid #222;
 +
background-color: #111;
 +
background-image: -moz-linear-gradient(#444, #111);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 +
background-image: -webkit-linear-gradient(#444, #111);
 +
background-image: -o-linear-gradient(#444, #111);
 +
background-image: -ms-linear-gradient(#444, #111);
 +
background-image: linear-gradient(#444, #111);
 +
-moz-border-radius: 6px;
 +
-webkit-border-radius: 6px;
 +
border-radius: 6px;
 +
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
}
 +
 +
#igemuwmenu:before,
 +
#igemuwmenu:after {
 +
content: "";
 +
display: table;
 +
}
 +
 +
#igemuwmenu:after {
 +
clear: both;
 +
}
 +
 +
#igemuwmenu {
 +
zoom:1;
 +
}
 +
 +
#igemuwmenu li {
 +
float: left;
 +
border-right: 1px solid #222;
 +
-moz-box-shadow: 1px 0 0 #444;
 +
-webkit-box-shadow: 1px 0 0 #444;
 +
box-shadow: 1px 0 0 #444;
 +
position: relative;
 +
}
 +
 +
#igemuwmenu a {
 +
float: left;
 +
padding: 12px 20px;
 +
color: #999;
 +
text-transform: uppercase;
 +
font: bold 12px Arial, Helvetica;
 +
text-decoration: none;
 +
text-shadow: 0 1px 0 #000;
 +
}
 +
 +
#igemuwmenu li:hover > a {
 +
color: #fafafa;
 +
}
 +
 +
*html #igemuwmenu li a:hover { /* IE6 only */
 +
color: #fafafa;
 +
}
 +
 +
#igemuwmenu ul {
 +
margin: 20px 0 0 0;
 +
_margin: 0; /*IE6 only*/
 +
opacity: 0;
 +
visibility: hidden;
 +
position: absolute;
 +
top: 38px;
 +
left: 0;
 +
z-index: 1;   
 +
background: #444;
 +
background: -moz-linear-gradient(#444, #111);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 +
background: -webkit-linear-gradient(#444, #111);   
 +
background: -o-linear-gradient(#444, #111);
 +
background: -ms-linear-gradient(#444, #111);
 +
background: linear-gradient(#444, #111);
 +
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 +
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
border-radius: 3px;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-ms-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
transition: all .2s ease-in-out; 
 +
}
 +
 +
#igemuwmenu li:hover > ul {
 +
opacity: 1;
 +
visibility: visible;
 +
margin: 0;
 +
}
 +
 +
#igemuwmenu ul ul {
 +
top: 0;
 +
left: 150px;
 +
margin: 0 0 0 20px;
 +
_margin: 0; /*IE6 only*/
 +
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
box-shadow: -1px 0 0 rgba(255,255,255,.3);
 +
}
 +
 +
#igemuwmenu ul li {
 +
float: none;
 +
display: block;
 +
border: 0;
 +
_line-height: 0; /*IE6 only*/
 +
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 +
}
 +
 +
#igemuwmenu ul li:last-child { 
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;   
 +
}
 +
 +
#igemuwmenu ul a {   
 +
padding: 10px;
 +
width: 130px;
 +
_height: 10px; /*IE6 only*/
 +
display: block;
 +
white-space: nowrap;
 +
float: none;
 +
text-transform: none;
 +
}
 +
 +
#igemuwmenu ul a:hover {
 +
background-color: #785D84;
 +
background-image: -moz-linear-gradient(#B6A0BA,  #785D84);
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(#B6A0BA), to(#785D84));
 +
background-image: -webkit-linear-gradient(#B6A0BA, #785D84);
 +
background-image: -o-linear-gradient(#B6A0BA, #785D84);
 +
background-image: -ms-linear-gradient(#B6A0BA, #785D84);
 +
background-image: linear-gradient(#B6A0BA, #785D84);
 +
}
 +
 +
#igemuwmenu ul li:first-child > a {
 +
-moz-border-radius: 3px 3px 0 0;
 +
-webkit-border-radius: 3px 3px 0 0;
 +
border-radius: 3px 3px 0 0;
 +
}
 +
 +
#igemuwmenu ul li:first-child > a:after {
 +
content: '';
 +
position: absolute;
 +
left: 40px;
 +
top: -6px;
 +
border-left: 6px solid transparent;
 +
border-right: 6px solid transparent;
 +
border-bottom: 6px solid #444;
 +
}
 +
 +
#igemuwmenu ul ul li:first-child a:after {
 +
left: -6px;
 +
top: 50%;
 +
margin-top: -6px;
 +
border-left: 0;
 +
border-bottom: 6px solid transparent;
 +
border-top: 6px solid transparent;
 +
border-right: 6px solid #3b3b3b;
 +
}
 +
 +
#igemuwmenu ul li:first-child a:hover:after {
 +
border-bottom-color: #B6A0BA;
 +
}
 +
 +
#igemuwmenu ul ul li:first-child a:hover:after {
 +
border-right-color: #0299d3;
 +
border-bottom-color: transparent;
 +
}
 +
 +
#igemuwmenu ul li:last-child > a {
 +
-moz-border-radius: 0 0 3px 3px;
 +
-webkit-border-radius: 0 0 3px 3px;
 +
border-radius: 0 0 3px 3px;
 +
}
 +
 +
/* Mobile */
 +
#igemuwmenu-trigger {
 +
display: none;
 +
}
 +
 +
@media screen and (max-width: 600px) {
 +
 +
/* nav-wrap */
 +
#igemuwmenu-wrap {
 +
position: relative;
 +
}
 +
 +
#igemuwmenu-wrap * {
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
 +
/* menu icon */
 +
#igemuwmenu-trigger {
 +
display: block; /* show menu icon */
 +
height: 40px;
 +
line-height: 40px;
 +
cursor: pointer;
 +
padding: 0 0 0 35px;
 +
border: 1px solid #222;
 +
color: #fafafa;
 +
font-weight: bold;
 +
background-color: #111;
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
 +
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
 +
-moz-border-radius: 6px;
 +
-webkit-border-radius: 6px;
 +
border-radius: 6px;
 +
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 +
}
 +
 +
/* main nav */
 +
#igemuwmenu {
 +
margin: 0; padding: 10px;
 +
position: absolute;
 +
top: 40px;
 +
width: 100%;
 +
z-index: 1;
 +
background-color: #444;
 +
display: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
 +
#igemuwmenu:after {
 +
content: '';
 +
position: absolute;
 +
left: 25px;
 +
top: -8px;
 +
border-left: 8px solid transparent;
 +
border-right: 8px solid transparent;
 +
border-bottom: 8px solid #444;
 +
}
 +
 +
#igemuwmenu ul {
 +
position: static;
 +
visibility: visible;
 +
opacity: 1;
 +
margin: 0;
 +
background: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
 +
#igemuwmenu ul ul {
 +
margin: 0 0 0 20px !important;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
 +
#igemuwmenu li {
 +
position: static;
 +
display: block;
 +
float: none;
 +
border: 0;
 +
margin: 5px;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
 +
#igemuwmenu ul li{
 +
margin-left: 20px;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
}
 +
 +
#igemuwmenu a{
 +
display: block;
 +
float: none;
 +
padding: 0;
 +
color: #999;
 +
}
 +
 +
#igemuwmenu a:hover{
 +
color: #fafafa;
 +
}
 +
 +
#igemuwmenu ul a{
 +
padding: 0;
 +
width: auto;
 +
}
 +
 +
#igemuwmenu ul a:hover{
 +
background: none;
 +
}
 +
 +
#igemuwmenu ul li:first-child a:after,
 +
#igemuwmenu ul ul li:first-child a:after {
 +
border: 0;
 +
}
 +
 +
}
 +
 +
@media screen and (min-width: 600px) {
 +
#igemuwmenu {
 +
display: block !important;
 +
}
 +
}
 +
 +
/* iPad */
 +
.no-transition {
 +
-webkit-transition: none;
 +
-moz-transition: none;
 +
-ms-transition: none;
 +
-o-transition: none;
 +
transition: none;
 +
opacity: 1;
 +
visibility: visible;
 +
display: none; 
 +
}
 +
 +
#igemuwmenu li:hover > .no-transition {
 +
display: block;
 +
}
 +
</style>
</style>
Line 219: Line 559:
<!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com -->
<!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com -->
-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
+
<nav id="igemuwmenu-wrap">  
-
<script type="text/javascript">
+
-
function ddnav() {
+
-
$('#ddnav ul li').hover(
+
-
function () {
+
-
$(this).find('div:first').css('display','block');},
+
-
function () {
+
-
$(this).find('div:first').css('display','none');}
+
-
);
+
-
}
+
-
+
-
function ddnavsub() {
+
-
$('#ddnav span > a').toggle(
+
-
function () {
+
-
$(this).removeClass("#ddnav expand").addClass("#ddnav collapse");
+
-
$(this).parent().find('div:first').slideDown('fast');
+
-
$(this).hover(
+
-
function (){$(this).css('background-color','#99AAFF');},
+
-
function (){$(this).css('background-color','#99AAFF');});},
+
-
function () {
+
-
$(this).removeClass("#ddnav collapse").addClass("#ddnav expand");
+
-
$(this).parent().find('div:first').css('display','none');
+
-
$(this).hover(
+
-
function (){$(this).css('background-color','#99CCFF');},
+
-
function (){$(this).css('background-color','#075A90');});}
+
-
).addClass("#ddnav expand");
+
-
}
+
-
+
-
/* If you wish to omit the docking feature, remove following function ddtoggle() */
+
-
function ddtoggle() {
+
-
$('#ddtoggle').toggle(
+
-
function () {
+
-
$(this).removeClass('undocked').addClass('docked');
+
-
$('#ddnav').css('position','fixed');},
+
-
function () {
+
-
$(this).removeClass('docked').addClass('undocked');
+
-
$('#ddnav').css('position','static');}
+
-
);
+
-
}
+
-
function ddalign() {
+
<ul id="igemuwmenu">
-
var _windowWidth = $(window).width();
+
-
var _leftOffset = (_windowWidth - 965)/2;
+
-
$('div#ddnav').css('left',_leftOffset);
+
<li><a href="https://2012.igem.org/Team:Washington">Home</a>
-
}
+
<ul>
-
+
<li><a href="https://2012.igem.org/Main_Page">iGEM Homepage</a></li>
-
function ddmsie() {
+
<li><a href="https://2011.igem.org/Team:Washington">UW 2011</a></li>
-
$('#ddnav a').hover(
+
<li><a href="https://2010.igem.org/Team:Washington">UW 2010</a></li>
-
function () {$(this).css('background-color','#99ccff');},
+
<li><a href="https://2009.igem.org/Team:Washington">UW 2009</a></li>
-
function () {$(this).css('background-color','#075a90');}
+
<li><a href="https://2008.igem.org/Team:Washington">UW 2008</a></li>
-
);
+
<li><a href="http://synbio.washington.edu">UW SynBio</a></li>
-
+
</ul>
-
/* toggle doesn't work yet */
+
</li>
-
$('#ddtoggle').css('display','none');
+
-
+
-
$('#ddnav ul').css('display','inline-block');
+
-
$('#ddnav ul li').css('display','inline');
+
-
$('#ddnav ul li').css('position','relative');
+
-
$('#ddnav ul li>a').css('display','inline-block');
+
-
$('#ddnav ul li>a').css('margin-right','-4px');
+
-
+
-
$('#ddnav div').css('left','0');
+
-
$('#ddnav div').css('top','100%');
+
-
$('#ddnav span div').css('top','0');
+
-
}
+
-
+
-
function ddmozilla() {
+
-
ddtoggle();
+
-
$(window).bind('resize', function() {ddalign();});
+
-
}
+
-
$(function () {
 
-
ddnav();
 
-
ddnavsub();
 
-
if(jQuery.browser.msie) ddmsie();
+
<li>
-
if(jQuery.browser.mozilla) ddmozilla();
+
<a href="https://2012.igem.org/Team:Washington/Plastics">Plastic Degradation</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Washington/Plastics#Background">Background</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Plastics#Methods">Methods</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Plastics#Results">Results Summary</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Plastics#Future">Future Directions</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Plastics#Parts">Parts Submitted</a></li>
 +
</ul>
 +
</li>
 +
 
 +
<li>
 +
<a href="https://2012.igem.org/Team:Washington/Flu">Flu Binders</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Washington/Flu#Background">Background</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Flu#Methods">Methods</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Flu#Results">Results Summary</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Flu#Future">Future Directions</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Flu#Parts">Parts Submitted</a></li>
 +
</ul>
 +
</li>
 +
 
 +
<li>
 +
<a href="https://2012.igem.org/Team:Washington/Optogenetics">Optogenetics</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Washington/Optogenetics#Background">Background</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Optogenetics#Methods">Methods</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Optogenetics#Results">Results Summary</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Optogenetics#Future">Future Directions</a></li>
 +
<li><a href="https://2012.igem.org/Team:Washington/Optogenetics#Parts">Parts Submitted</a></li>
 +
</ul>
 +
</li>
 +
 
 +
<li><a href="https://2012.igem.org/Team:Washington/Outreach">Outreach</a></li>
 +
 
 +
<li>
 +
<a href="https://2012.igem.org/Team:Washington/Protocols">Protocols</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Washington/Safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
 
 +
<li>
 +
<a href="https://2012.igem.org/Team:Washington/Team:Members">About Us</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Washington/Team:Members">The Team</a></li>
 +
</ul>
 +
</li>
 +
 
 +
 
 +
</li>
 +
                                                                                               
 +
</ul>
 +
</nav>
 +
 
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 +
<script type="text/javascript">
 +
    $(function() {
 +
if ($.browser.msie && $.browser.version.substr(0,1)<7)
 +
{
 +
$('li').has('ul').mouseover(function(){
 +
$(this).children('ul').css('visibility','visible');
 +
}).mouseout(function(){
 +
$(this).children('ul').css('visibility','hidden');
 +
})
 +
}
 +
 
 +
/* Mobile */
 +
$('#igemuwmenu-wrap').prepend('<div id="igemuwmenu-trigger">igemuwmenu</div>');
 +
$("#igemuwmenu-trigger").on("click", function(){
 +
$("#menu").slideToggle();
 +
});
-
$('#ddnav').css('visibility','visible');
+
// iPad
-
});
+
var isiPad = navigator.userAgent.match(/iPad/i) != null;
 +
if (isiPad) $('#igemuwmenu ul').addClass('no-transition');    
 +
    });  
 +
     
</script>
</script>
 +
<script type="text/javascript">
<script type="text/javascript">
Line 316: Line 670:
</script>
</script>
-
<!-- If you wish to omit the docking feature omit following line (div with id ddtoggle) -->
+
 
-
<div id="ddtoggle" class="undocked"></div>
+
 
-
<div id="ddwrapper">
+
-
<!-- Here the actual links are defined, simply replace with your own links in the appropriate sections -->
+
-
<div id="ddnav" align="center">
+
-
<ul>
+
-
<li>
+
-
<a href="https://2012.igem.org/Team:Washington">Home</a>
+
-
                <div>
+
-
                <a href="https://2012.igem.org/Main_Page"> iGEM Homepage </a>
+
-
                        <a href="https://2011.igem.org/Team:Washington">UW 2011</a>
+
-
<a href="https://2010.igem.org/Team:Washington"> UW 2010 </a>
+
-
<a href="https://2009.igem.org/Team:Washington"> UW 2009 </a>
+
-
<a href="https://2008.igem.org/Team:University_of_Washington"> UW 2008 </a>
+
-
<a href="http://synbio.washington.edu/"> UW SynBio </a>
+
-
</div>
+
-
</li>
+
-
        <li>
+
-
<a href="https://2012.igem.org/Team:Washington/Plastics">Plastic Degradation</a>
+
-
<div>
+
-
<a href="https://2012.igem.org/Team:Washington/Plastics#Background">Background</a>
+
-
<a href="https://2012.igem.org/Team:Washington/Plastics#Methods"> Methods </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Plastics#Results"> Results Summary</a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Plastics#Future"> Future Directions </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Plastics#Parts"> Parts Submitted </a>
+
-
</div>
+
-
</li>
+
-
        <li>
+
-
<a href="https://2012.igem.org/Team:Washington/Flu">Flu Binders</a>
+
-
<div>
+
-
<a href="https://2012.igem.org/Team:Washington/Flu#Background">Background</a>
+
-
<a href="https://2012.igem.org/Team:Washington/Flu#Methods"> Methods </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Flu#Results"> Results Summary</a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Flu#Future"> Future Directions </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Flu#Parts"> Parts Submitted </a>
+
-
                       
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<a href="https://2012.igem.org/Team:Washington/Optogenetics">Optogenetics</a>
+
-
<div>
+
-
<a href="https://2012.igem.org/Team:Washington/Optogenetics#Background">Background</a>
+
-
<a href="https://2012.igem.org/Team:Washington/Optogenetics#Methods"> Methods </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Optogenetics#Results"> Results Summary </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Optogenetics#Future"> Future Directions </a>
+
-
                        <a href="https://2012.igem.org/Team:Washington/Optogenetics#Parts"> Parts Submitted </a>
+
-
</div>
+
-
</li>
+
-
        <li>
+
-
<a href="https://2012.igem.org/Team:Washington/Outreach">Outreach</a>
+
-
</li>
+
-
        <li>
+
-
<a href="https://2012.igem.org/Team:Washington/Protocols">Protocols</a>
+
-
</li>
+
-
        <li>
+
-
<a href="https://2012.igem.org/Team:Washington/Safety">Safety</a>
+
-
</li>
+
-
        <li>
+
-
<a href="https://2012.igem.org/Team:Washington/Team:Members">About Us</a>
+
-
<div>
+
-
<a href="https://2012.igem.org/Team:Washington/Team:Members">The Team</a>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
</html>
</html>

Revision as of 04:01, 24 September 2012

Retrieved from "http://2012.igem.org/Template:Team:Washington/Templates/Top"