User:Vinoo/2014Design6

From 2014.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
{{CSS/Grid16}}
 
<html>
<html>
<head>
<head>
<style type="text/css">
<style type="text/css">
 +
#topNav { /*-- creates styled 100% width fixed navigation bar --*/
 +
width: 100%;
 +
position: fixed;
 +
top: 14px;
 +
height: 50px;
 +
background-color: #f0f0f0;
 +
border-bottom: 1px solid #ccc;
 +
z-index: 1000;
 +
}
-
#contentSub, .firstHeading, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
+
#navContainer { /*-- creates centered container for nav bar --*/
 +
width: 975px;
 +
height: 100%;
 +
margin: 0px auto;
 +
position: relative;
 +
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 +
}
-
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover {color: #ccc; background-color: transparent;} /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
.navLinks { /*-- clears style for nav bar ul --*/
 +
margin: 0px;
 +
height: 100%;
 +
}
-
 
+
.navLinks li { /*-- styles nav bar li, the nav bar elements --*/
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
display: inline-block;
-
background-color: #000;
+
float: left;
-
border: 0 none;
+
font-size: 12px;
-
display: block;
+
height: 49px;
-
height: 14px;
+
padding: 0px;  
-
position: fixed;
+
margin: 0px;  
-
top: 0;
+
border: 1px solid transparent;
-
width: 100%;
+
-
z-index: 10;
+
}
}
-
body { background-color: #fff;}
+
.navLinks li:hover {  
-
 
+
background-color: #fff;
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
border: 1px solid #ccc;
-
width: 100%;
+
border-bottom: 1px solid #fff;
-
height: 100%;
+
-
border: 0px;
+
-
background-color: transparent;
+
-
margin: 0px;
+
-
padding: 0px;
+
}
}
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
#navSingleLink:hover  {  
-
width: 100%;
+
border-bottom: 1px solid #ccc;
-
height: 100%;
+
-
background-color: transparent;
+
}
}
-
#contentcontainer { /*-- creates container for all content on page --*/
+
.navLinks li a { /*-- styles the links within the nav bar li --*/
-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+
text-decoration: none;  
-
font-weight: 200;  
+
line-height: 50px;
-
font-size: 16px;  
+
color: #000;
color: #000;
-
width: 960px;
+
padding-left: 30px;
-
margin-left: auto;  
+
padding-right: 30px;
-
margin-right: auto;  
+
display: block;
-
background-color: #transparent;  
+
height: 100%;
-
margin-top: 70px;
+
-
padding-bottom: 100px;
+
}
}
-
#loginBar {
+
.morelink {display:inline-block; padding: 0px; margin: 0px; height: auto; width: auto; line-height: auto;}
 +
 
 +
.navlinks li a:hover {
 +
color: #fff;
 +
 
 +
}
 +
.navDropMenu { /*-- the drop down box --*/
width: 100%;
width: 100%;
-
top: 14px;
+
position: absolute;
-
height: 18px;
+
top: 50px;
-
background-color: #383838;
+
left: 0px;
-
color: rgb(204, 204, 204);
+
display: none;
-
border-bottom: 2px solid #000;
+
background-color: #fff;  
-
position: fixed;  
+
border-bottom: 1px solid #ccc;  
 +
z-index: -100;
 +
padding: 20px 0px;
 +
border: 1px solid #ccc;
}
}
-
#loginBarContainer {
+
 
-
width: 960px;  
+
.navDropMenu li { /*-- the drop down box --*/
-
height: 100%;  
+
display: block;
-
margin: 0px auto;  
+
float: none;
-
}
+
list-style: none;
-
#leftLinks, #rightLinks {
+
height: auto;
-
display: inline-block;
+
padding: 3px 6px;  
margin: 0px;
margin: 0px;
 +
border: 0px;
}
}
-
#leftLinks li:hover, #rightLinks li:hover {
+
.navDropMenu li:hover {  
-
background-color: #4b4b4b;  
+
border: 0px;
}
}
-
#rightLinks {
+
 
-
float: right;
+
.navDropMenu li a { /*-- styles the links within the nav bar li --*/
-
}
+
text-decoration: none;  
-
#leftLinks li {
+
color: #333;
-
display: table-cell;
+
display: block;
-
padding: 0px 30px;
+
height: auto;
 +
line-height: normal;
 +
padding: 4px 0px 4px 6px;
}
}
-
#rightLinks li {
+
 
-
display: table-cell;
+
.navDropMenu li a:hover { /*-- styles the links within the nav bar li --*/
-
padding: 0px 10px;
+
background-color: #f0f0f0;
 +
color: #484848;
}
}
-
#notify {
+
 
-
background-color: #bbb;
+
.navLinks > li:hover > .navDropMenu {
-
border-radius: 8px;
+
display: block;
display: block;
-
}
 
-
#notifyNumber {
 
-
color: #fff;
 
-
display: block;
 
-
height: 15px;
 
-
width: 15px;
 
-
font-size: 12px;
 
-
padding: 0px 5px;
 
-
text-align: center;
 
-
}
 
-
.dropMenu {
 
-
position: absolute;
 
-
display: none;
 
-
left: 0px;
 
-
top: 18px;
 
-
width: 100%;
 
-
height: 100px;
 
-
background-color: #4b4b4b;
 
-
border-bottom: 1px solid #000;
 
}
}
-
#leftLinks li:hover > .dropMenu {display: block;}
+
.menuHeader { border-bottom: 1px solid #ccc; display: block; font-weight: bold;}
-
+
</style>
</style>
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
</head>
</head>
-
<header>
+
<div id="top-section-bar"></div>
-
<nav id="loginBar">
+
<header id="topNav">
-
<div id="loginBarContainer">
+
<nav id="navContainer">
-
<ul id="leftLinks">
+
<ul class="navLinks">
-
<li class="dropToggle">iGEM
+
<li id="navSingleLink">
-
<div class="dropMenu">
+
<a href="https://2014.igem.org" style="padding: 0px;"><img src="https://static.igem.org/mediawiki/2014/d/d4/Logo2014.png" style="height: 60px; margin-top: -6px;" /></a>
 +
</li>
 +
<li>
 +
<a href="#">ABOUT</a>
 +
<div class="navDropMenu">
 +
</html>{{Nav/About}}<html>
</div>
</div>
</li>
</li>
-
<li class="dropToggle">wiki tools
 
-
<div class="dropMenu">hello</div>
 
-
</li>
 
-
<li>search</li>
 
-
<li>team info</li>
 
-
</ul>
 
-
<ul id="rightLinks">
 
-
<li>login</li>
 
<li>
<li>
-
<div id="notify">
+
<a href="#" class="dropToggle">COMPETITION</a>
-
<div id="notifyNumber">0</div>
+
<div class="navDropMenu">
 +
</html>{{Nav/Competition}}<html>
</div>
</div>
</li>
</li>
<li>
<li>
-
<img style="display: block; height:14px;" src="http://parts.igem.org/images/website/folder_gray_20.png" />
+
<a href="#">RESOURCES</a>
-
</li>
+
<div class="navDropMenu">
 +
</html>{{Nav/Resources}}<html>
 +
</div>
 +
</li>
 +
<li id="navSingleLink">
 +
<a href="https://igem.org/Contact">CONTACT</a>
 +
</li>
</ul>
</ul>
-
</div>
 
</nav>
</nav>
</header>
</header>
-
 
+
<html>
-
<script>
+
-
$(document).ready(function() {
+
-
});
+
-
</script>
+
-
</body>
+
-
</html>
+

Revision as of 16:13, 6 February 2014