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">
-
/* Important stuff */
+
.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;}
-
nav {
 
-
  position: relative;
 
-
}
 
-
.dropdown-toggle {
 
-
  padding: .5em 1em;
 
-
  background: #777;
 
-
  border-radius: .2em .2em 0 0;
 
-
}
 
-
ul.dropdown {
 
-
  display:none;
 
-
  position: absolute;
 
-
  top: 100%;
 
-
  margin-top: .5em;
 
-
  background: #777;
 
-
  min-width: 12em;
 
-
  padding: 0;
 
-
  border-radius: 0 0 .2em .2em;
 
-
    li {
 
-
      list-style-type: none;
 
-
      a {
 
-
        text-decoration: none;
 
-
        padding: .5em 1em;
 
-
        display: block;
 
-
      }
 
-
  }
 
-
}
 
</style>
</style>
-
<body>
+
<div class="click-nav">
-
<nav>
+
    <ul class="no-js">
-
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
+
        <li>
-
<ul class="dropdown">
+
            <a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
-
  <li><a href="#">Menu Item</a></li>
+
            <ul>
-
  <li><a href="#">Menu</a></li>
+
                <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
-
  <li><a href="#">Settings</a></li>
+
                <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
-
  <li><a href="#">Search</a></li>
+
                <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
-
  </ul>
+
                <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
-
</nav>
+
                <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');
-
// Dropdown toggle
+
    $('.click-nav .js ul').hide();
-
$('.dropdown-toggle').click(function(){
+
    $('.click-nav .js').click(function(e) {
-
  $(this).next('.dropdown').toggle();
+
        $('.click-nav .js ul').slideToggle(200);
-
});
+
        $('.clicker').toggleClass('active');
-
 
+
        e.stopPropagation();
-
$(document).click(function(e) {
+
    });
-
  var target = e.target;
+
    $(document).click(function() {
-
  if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
+
        if ($('.click-nav .js ul').is(':visible')) {
-
    $('.dropdown').hide();
+
            $('.click-nav .js ul', this).slideUp();
-
  }
+
            $('.clicker').removeClass('active');
-
});
+
        }
-
 
+
    });
});
});
</script>
</script>
</body>
</body>
</html>
</html>

Revision as of 16:15, 27 January 2014

Retrieved from "http://2014.igem.org/User:Vinoo/2014Design6"