User:Vinoo/2014Design7
From 2014.igem.org
(Difference between revisions)
m |
m |
||
Line 64: | Line 64: | ||
margin: 0px auto; | margin: 0px auto; | ||
} | } | ||
- | + | .leftLinks, .rightLinks { | |
display: inline-block; | display: inline-block; | ||
margin: 0px; | margin: 0px; | ||
} | } | ||
- | + | .leftLinks li:hover, .rightLinks li:hover { | |
background-color: #4b4b4b; | background-color: #4b4b4b; | ||
} | } | ||
- | + | .rightLinks { | |
float: right; | float: right; | ||
} | } | ||
- | + | .leftLinks li { | |
display: table-cell; | display: table-cell; | ||
padding: 0px 30px; | padding: 0px 30px; | ||
} | } | ||
- | + | .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: | + | 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 | + | <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=" | + | <div class="grid_3"> |
<ul> | <ul> | ||
- | |||
<li>igem.org</li> | <li>igem.org</li> | ||
- | |||
- | |||
- | |||
<li>2014.igem.org</li> | <li>2014.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=" | + | <div class="grid_3"> |
- | + | <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 | + | <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