User:Vinoo/2014Design6
From 2014.igem.org
(Difference between revisions)
m |
m |
||
Line 2: | Line 2: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | #loginBarContainer { | |
width: 100%; | width: 100%; | ||
position: fixed; | position: fixed; | ||
Line 11: | Line 11: | ||
z-index: 1000; | z-index: 1000; | ||
} | } | ||
- | + | #loginBar { | |
width: 960px; | width: 960px; | ||
height: 100%; | height: 100%; | ||
margin: 0px auto; | margin: 0px auto; | ||
} | } | ||
- | + | #loginBar ul {position:relative;font-weight:900;} | |
- | + | #loginBar ul li {position:relative;list-style:none;cursor:pointer; display: table-cell;} | |
- | + | #loginBar ul li ul {position:absolute;left:0;right:0;} | |
- | + | #loginBar ul .clicker {position:relative;color:#FFF;} | |
- | + | #loginBar ul .clicker:hover,.click-nav ul .active {background:#ccc;} | |
- | + | #loginBar ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out; | |
-moz-transition:background-color 0.2s ease-in-out;display:block;color:#333;text-decoration:none;} | -moz-transition:background-color 0.2s ease-in-out;display:block;color:#333;text-decoration:none;} | ||
- | + | #loginBar ul li a:hover {background:#ccc;} | |
/* Fallbacks */ | /* Fallbacks */ | ||
- | + | #loginBar .no-js ul {display:none;} | |
- | + | #loginBar > .no-js > li:hover > ul { | |
display:block; | display:block; | ||
} | } | ||
Line 33: | Line 33: | ||
</style> | </style> | ||
- | <div | + | <div id="loginBarContainer"> |
- | <div | + | <div id="loginBar"> |
<ul class="no-js"> | <ul class="no-js"> | ||
<li> | <li> | ||
Line 62: | Line 62: | ||
<script> | <script> | ||
$(function () { | $(function () { | ||
- | $(' | + | $('#loginBar > ul').toggleClass('no-js js'); |
- | $(' | + | $('loginBar .js ul').hide(); |
$(document).on("click", function(e) { | $(document).on("click", function(e) { | ||
var $elem = $(e.target); | var $elem = $(e.target); | ||
if ($elem.hasClass('clicker')) { | if ($elem.hasClass('clicker')) { | ||
- | $(' | + | $('#loginBar .js ul').not($elem.next('ul')).hide(); |
$elem.next("ul").slideToggle(); | $elem.next("ul").slideToggle(); | ||
} else { | } else { | ||
- | $(' | + | $('#loginBar .js ul').hide(); |
} | } | ||
}); | }); |
Revision as of 16:29, 27 January 2014