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">
 +
 +
#contentSub, .firstHeading, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
 +
 +
#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.) --*/
 +
 +
 +
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 +
background-color: #f0f0f0;
 +
border: 0 none;
 +
display: block;
 +
height: 14px;
 +
position: fixed;
 +
top: 0;
 +
width: 100%;
 +
z-index: 10;
 +
}
 +
 +
body { background-color: #fff;}
 +
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 +
html, body, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 +
#contentcontainer { /*-- creates container for all content on page --*/
 +
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 +
font-weight: 200;
 +
font-size: 16px;
 +
color: #000;
 +
width: 960px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #transparent;
 +
margin-top: 70px;
 +
padding-bottom: 100px;
 +
}
 +
#loginBar {
#loginBar {
width: 100%;
width: 100%;
height: 18px;
height: 18px;
-
background-color: #000;
+
background-color: #383838;
color: #f0f0f0;
color: #f0f0f0;
-
border-bottom: 2px solid #666;
+
border-bottom: 2px solid #000;
 +
position: fixed;  
}
}
-
#barLinks, #userLinks {
+
#loginBarContainer {
 +
width: 960px;
 +
height: 100%;
 +
margin: 0px auto;
 +
position: relative;
 +
}
 +
#leftLinks, #rightLinks {
display: inline-block;
display: inline-block;
margin: 0px;
margin: 0px;
}
}
-
#userLinks {
+
#rightLinks {
float: right;
float: right;
}
}
-
#barLinks li, #userLinks li {
+
#leftLinks li {
display: table-cell;
display: table-cell;
padding: 0px 30px;
padding: 0px 30px;
 +
}
 +
#rightLinks li {
 +
display: table-cell;
 +
padding: 0px 10px;
 +
}
 +
#notify {
 +
background-color: #bbb;
 +
border-radius: 8px;
 +
display: block;
 +
}
 +
#notifyNumber {
 +
color: #fff;
 +
display: block;
 +
height: 15px;
 +
width: 15px;
 +
font-size: 11px;
 +
padding: 0px 5px;
 +
text-align: center;
}
}
.dropMenu {
.dropMenu {
Line 27: Line 100:
height: 100px;
height: 100px;
background-color: #333;
background-color: #333;
-
}
+
}
 +
</style>
</style>
<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>
Line 33: Line 107:
<header>
<header>
<nav id="loginBar">
<nav id="loginBar">
-
<ul id="barLinks">
+
<div id="loginBarContainer">
 +
<ul id="leftLinks">
<li class="dropToggle">iGEM
<li class="dropToggle">iGEM
-
<div class="dropMenu"></div>
+
<div class="dropMenu">
 +
</div>
 +
</li>
 +
<li class="dropToggle">wiki tools
 +
<div class="dropMenu">hello</div>
</li>
</li>
-
<li>wiki tools</li>
 
<li>search</li>
<li>search</li>
<li>team info</li>
<li>team info</li>
</ul>
</ul>
-
<ul id="userLinks">
+
<ul id="rightLinks">
<li>login</li>
<li>login</li>
-
<li>icon1</li>
+
<li>
-
<li>icon2</li>
+
<div id="notify">
 +
<div id="notifyNumber">0</div>
 +
</div>
 +
</li>
 +
<li>
 +
<img style="display: block; height:14px;" src="http://parts.igem.org/images/website/folder_gray_20.png" />
 +
</li>
</ul>
</ul>
 +
</div>
</nav>
</nav>
</header>
</header>
Line 51: Line 136:
<script>
<script>
$(document).ready(function() {
$(document).ready(function() {
-
$('dropToggle').mouseenter( function() {
 
-
$('dropMenu').show();
 
-
});
 
});
});
</script>
</script>
</body>
</body>
</html>
</html>

Revision as of 21:40, 27 January 2014