User:Vinoo/2014Design7

From 2014.igem.org

(Difference between revisions)
m
m
Line 64: Line 64:
margin: 0px auto;  
margin: 0px auto;  
}
}
-
#leftLinks, #rightLinks {
+
.leftLinks, .rightLinks {
display: inline-block;
display: inline-block;
margin: 0px;
margin: 0px;
}
}
-
#leftLinks li:hover, #rightLinks li:hover {
+
.leftLinks li:hover, .rightLinks li:hover {
background-color: #4b4b4b;  
background-color: #4b4b4b;  
}
}
-
#rightLinks {
+
.rightLinks {
float: right;
float: right;
}
}
-
#leftLinks li {
+
.leftLinks li {
display: table-cell;
display: table-cell;
padding: 0px 30px;
padding: 0px 30px;
}
}
-
#rightLinks li {
+
.rightLinks li {
display: table-cell;
display: table-cell;
padding: 0px 10px;
padding: 0px 10px;
Line 109: Line 109:
height: 100%;  
height: 100%;  
margin: 0px auto;  
margin: 0px auto;  
-
opacity: 1;  
+
opacity: 0;
 +
}
 +
.dropMenuContainer ul {
 +
list-style-type: none;
 +
margin: 0px;
 +
padding: 0px;
}
}
.dropMenuContainer li {
.dropMenuContainer li {
 +
list-style: none;
display: block;
display: block;
 +
padding: 2px 8px;
 +
width: 100%;
 +
}
 +
.dropMenuContainer li:hover {
 +
background-color: #383838;
}
}
Line 134: Line 145:
<nav id="loginBar">
<nav id="loginBar">
<div id="loginBarContainer">
<div id="loginBarContainer">
-
<ul id="leftLinks">
+
<ul class="leftLinks">
<li class="dropToggle">iGEM
<li class="dropToggle">iGEM
<div class="dropMenu">
<div class="dropMenu">
<div class="dropMenuContainer container_16">
<div class="dropMenuContainer container_16">
-
<div class="grid_4">
+
<div class="grid_3">
<ul>
<ul>
-
<li>2014.igem.org</li>
 
<li>igem.org</li>
<li>igem.org</li>
-
<li>parts.igem.org</li>
 
-
</ul>
 
-
<ul>
 
<li>2014.igem.org</li>
<li>2014.igem.org</li>
-
<li>igem.org</li>
 
<li>parts.igem.org</li>
<li>parts.igem.org</li>
 +
<li>previous years</li>
</ul>
</ul>
</div>
</div>
Line 156: Line 163:
<div class="dropMenu">
<div class="dropMenu">
<div class="dropMenuContainer container_16">
<div class="dropMenuContainer container_16">
-
<div class="grid_4">
+
<div class="grid_3">
-
Aliquam dolor purus, pharetra ac tellus id, eleifend venenatis augue. Quisque lobortis augue lacus, eget consectetur diam dapibus quis. Donec ac felis eget erat scelerisque ornare ut eu metus. Mauris blandit et tellus sit amet ultricies. Nam turpis nunc, fringilla congue urna scelerisque, luctus fermentum metus. Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.
+
<ul>
 +
<li>edit</li>
 +
<li>history</li>
 +
<li>watch</li>
 +
<li>discussion</li>
 +
<li>move</li>
 +
<li>related changes</li>
 +
</ul>
 +
</div>
 +
<div class="grid_3">
 +
<ul>
 +
<li>upload</li>
 +
<li>list of upload files</li>
 +
<li>my uploads</li>
 +
</ul>
</div>
</div>
</div>
</div>
Line 181: Line 202:
</li>
</li>
</ul>
</ul>
-
<ul id="rightLinks">
+
<ul class="rightLinks">
<li class="loginToggle">login
<li class="loginToggle">login
<div class="dropMenu">
<div class="dropMenu">
Line 215: Line 236:
$('.dropToggle').hover(function() {
$('.dropToggle').hover(function() {
-
$('.dropMenu', this).stop(true,true).delay(150).slideDown('normal');
+
$('.dropMenu', this).stop(true,true).delay(150).slideDown('normal', function(){
 +
$('.dropMenuContainer', this).stop(true,true).animate(
 +
{
 +
opacity: "1"
 +
},
 +
300
 +
);
 +
}
 +
);
}, function() {
}, function() {
$('.dropMenu', this).stop(true,true).delay(150).slideUp('normal');
$('.dropMenu', this).stop(true,true).delay(150).slideUp('normal');

Revision as of 16:00, 28 January 2014