User:Vinoo/2014Design6

From 2014.igem.org

< User:Vinoo(Difference between revisions)
m
m
 
(45 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<head>
<style type="text/css">
<style type="text/css">
-
 
+
#topNav { /*-- creates styled 100% width fixed navigation bar --*/
-
.click-nav-container {
+
width: 100%;  
width: 100%;  
position: fixed;  
position: fixed;  
-
top: 16px;  
+
top: 14px;  
-
height: 19px;  
+
height: 50px;  
-
background-color: #383838;  
+
background-color: #f0f0f0;  
border-bottom: 1px solid #ccc;  
border-bottom: 1px solid #ccc;  
z-index: 1000;
z-index: 1000;
}
}
-
.click-nav {
+
 
-
width: 960px;  
+
#navContainer { /*-- creates centered container for nav bar --*/
-
height: 100%;  
+
width: 975px;  
 +
height: 100%;
margin: 0px auto;  
margin: 0px auto;  
 +
position: relative;
 +
font-family: Arial, sans-serif;
}
}
-
.click-nav ul {position:relative;font-weight:900;}
 
-
.click-nav ul li {position:relative;list-style:none;cursor:pointer; display: table-cell;}
 
-
.click-nav ul li ul {position:absolute;left:0;right:0;}
 
-
.click-nav ul .clicker {position:relative;color:#FFF;}
 
-
.click-nav ul .clicker:hover,.click-nav ul .active {background:#ccc;}
 
-
.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;color:#333;text-decoration:none;}
 
-
.click-nav ul li a:hover {background:#ccc;}
 
-
/* Fallbacks */
+
.navLinks { /*-- clears style for nav bar ul --*/
-
.click-nav .no-js ul {display:none;}
+
margin: 0px;  
-
click.nav > .no-js > li:hover > ul {
+
height: 100%;  
-
display:block;
+
}
}
-
</style>
+
.navLinks li { /*-- styles nav bar li, the nav bar elements --*/
 +
display: table-cell;
 +
font-size: 12px;
 +
height: 100%;
 +
margin: 0px;
 +
padding: 0px 20px;
 +
border: 1px solid #000;
 +
}
-
<div class="click-nav-container">
 
-
<div class="click-nav">
 
-
    <ul class="no-js">
 
-
        <li>
 
-
            <a href="#" class="clicker">iGEM 2014</a>
 
-
            <ul>
 
-
                <li><a href="#">Dashboard</a></li>
 
-
                <li><a href="#">Settings</a></li>
 
-
                <li><a href="#">Privacy</a></li>
 
-
                <li><a href="#">Help</a></li>
 
-
                <li><a href="#">Sign out</a></li>
 
-
            </ul>
 
-
        </li>
 
-
        <li>
 
-
            <a href="#" class="clicker">wiki tools</a>
 
-
            <ul>
 
-
                <li><a href="#">Dashboard</a></li>
 
-
                <li><a href="#">Help</a></li>
 
-
                <li><a href="#">Sign out</a></li>
 
-
            </ul>
 
-
        </li>
 
-
    </ul>
 
-
</div>
 
-
</div>
 
 +
.navLinks li:hover {
 +
background-color: #fff;
 +
border: 1px solid #ccc;
 +
border-bottom: 1px solid #fff;
 +
}
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
.navSingleLink:hover  {  
-
<script>
+
border-bottom: 1px solid #ccc;
-
$(function () {
+
-
    $('.click-nav > ul').toggleClass('no-js js');
+
-
    $('.click-nav .js ul').hide();
+
-
$(document).on("click", function(e) {
+
-
var $elem = $(e.target);
+
-
if ($elem.hasClass('clicker')) {
+
-
$('.click-nav .js ul').not($elem.next('ul')).hide();
+
-
$elem.next("ul").slideToggle();
+
-
} else {
+
-
$('.click-nav .js ul').hide();
+
}
}
-
});
+
 
-
    $(document).click(function() {
+
.navLinks li > a {  /*-- styles the links within the nav bar li --*/
-
        if ($('.click-nav .js ul').is(':visible')) {
+
text-decoration: none;
-
            $('.click-nav .js ul', this).slideUp();
+
color: #000; height: 100%; display: block; width: 100%; border: 1px solid #000;
-
            $('.clicker').removeClass('active');
+
}
-
        }
+
 
-
    });
+
.navDropMenu {  /*-- the drop down box --*/
-
});
+
width: 100%;
-
</script>
+
position: absolute;
-
</body>
+
top: 50px;
-
</html>
+
left: 0px;
 +
display: none;
 +
background-color: #fff;
 +
border-bottom: 1px solid #ccc;
 +
z-index: -100;
 +
padding: 20px 0px;
 +
border: 1px solid #ccc;
 +
}
 +
 
 +
.navDropMenu a {border: 1px solid #000; display: inline-block; color: red;}
 +
 
 +
.navDropMenu li {  /*-- the drop down box --*/
 +
display: block;
 +
float: none;
 +
list-style: none;
 +
height: auto;
 +
padding: 3px 6px;
 +
margin: 0px;
 +
border: 0px;
 +
}
 +
.navDropMenu li:hover {  
 +
border: 0px;
 +
}
 +
 
 +
.navDropMenu li a {  /*-- styles the links within the nav bar li --*/
 +
text-decoration: none;
 +
color: #333;
 +
display: block;
 +
height: auto;
 +
line-height: normal;
 +
padding: 4px 0px 4px 6px;
 +
}
 +
 
 +
.navDropMenu li a:hover {  /*-- styles the links within the nav bar li --*/
 +
background-color: #f0f0f0;
 +
color: #484848;
 +
}
 +
 
 +
.navLinks > li:hover > .navDropMenu {
 +
display: block;
 +
}
 +
 
 +
.menuHeader { border-bottom: 1px solid #ccc; display: block; font-weight: bold;}
 +
</style>
 +
</head>
 +
<div id="top-section-bar"></div>
 +
<header id="topNav">
 +
<nav id="navContainer">
 +
<ul class="navLinks">
 +
<li id="navSingleLink">
 +
<a href="https://2014.igem.org"><img src="https://static.igem.org/mediawiki/2014/d/d4/Logo2014.png" style="height: 49px;" /></a>
 +
</li>
 +
<li>
 +
<a href="#">ABOUT</a>
 +
<div class="navDropMenu">
 +
</html>{{Nav/About}}<html>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#" class="dropToggle">COMPETITION</a>
 +
<div class="navDropMenu">
 +
</html>{{Nav/Competition}}<html>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#">RESOURCES</a>
 +
<div class="navDropMenu">
 +
</html>{{Nav/Resources}}<html>
 +
</div>
 +
</li>
 +
<li id="navSingleLink">
 +
<a href="https://igem.org/Contact">CONTACT</a>
 +
</li>
 +
</ul>
 +
</nav>
 +
</header>
 +
<html>

Latest revision as of 20:47, 6 February 2014

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