User:Vinoo/2014Design6
From 2014.igem.org
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | /* | + | .click-nav {margin:100px auto;width:200px;} |
+ | .click-nav ul {position:relative;font-weight:900;} | ||
+ | .click-nav ul li {position:relative;list-style:none;cursor:pointer;} | ||
+ | .click-nav ul li ul {position:absolute;left:0;right:0;} | ||
+ | .click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;} | ||
+ | .click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;} | ||
+ | .click-nav img {position:absolute;top:9px;left:12px;} | ||
+ | .click-nav 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;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;} | ||
+ | .click-nav ul li a:hover {background:#F2F2F2;} | ||
+ | |||
+ | /* Fallbacks */ | ||
+ | .click-nav .no-js ul {display:none;} | ||
+ | .click-nav .no-js:hover ul {display:block;} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
- | < | + | <div class="click-nav"> |
- | + | <ul class="no-js"> | |
- | < | + | <li> |
- | <ul | + | <a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a> |
- | + | <ul> | |
- | + | <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li> | |
- | + | <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li> | |
- | + | <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li> | |
- | + | <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li> | |
- | </ | + | <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li> |
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | ||
<script> | <script> | ||
- | $(function() { | + | $(function () { |
- | + | $('.click-nav > ul').toggleClass('no-js js'); | |
- | + | $('.click-nav .js ul').hide(); | |
- | $('. | + | $('.click-nav .js').click(function(e) { |
- | + | $('.click-nav .js ul').slideToggle(200); | |
- | }); | + | $('.clicker').toggleClass('active'); |
- | + | e.stopPropagation(); | |
- | $(document).click(function( | + | }); |
- | + | $(document).click(function() { | |
- | + | if ($('.click-nav .js ul').is(':visible')) { | |
- | + | $('.click-nav .js ul', this).slideUp(); | |
- | + | $('.clicker').removeClass('active'); | |
- | }); | + | } |
- | + | }); | |
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 16:15, 27 January 2014