Difference between revisions of "Template:BU17 template menubar"

 
(315 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet">
 
<style>
 
<style>
−
.logo_2017, #sideMenu, #firstHeading, #bars_item { /* HIDES UNWANTED STUFF */
+
<style>
−
display: none;
+
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
 +
color: #a9a9a9 !important;
 
}
 
}
−
#bodyContent {
+
.menu-type {
−
padding-right: 0px;
+
font-family: 'Roboto Condensed', sans-serif !important;
−
width: 100%;
+
letter-spacing: 5pt !important;
−
}
+
font-size: 12pt;
−
#top_menu_14, #top_menu_inside {
+
text-align: center;
−
        background: none;
+
text-decoration: none !important;
−
        border: none;
+
text-transform: uppercase;
 +
font-weight: 700;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 
}
 
}
−
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
.wordmark img {
−
width: 100%;
+
vertical-align: sub;
−
}
+
−
#globalWrapper, #content { /* THIS IS A DEFAULT TAG. DONT KNOW IF NECESSARY BUT ALAN DID IT SO **LEGACY** */
+
−
background-color: transparent;
+
−
border: 0px;
+
−
height: 100%;
+
−
margin: 0px;
+
−
padding: 0px;
+
−
width: 100%;
+
−
}
+
−
#banner { /* SEE ABOVE */
+
−
margin-top: 50px;
+
−
width: 100%;
+
−
}
+
−
body {
+
−
width: 100%;
+
−
}
+
−
.logo { /* LOGO IN MENU */
+
−
margin-left: 20px;
+
−
margin-right: 20px;
+
−
margin-top: -3px;
+
 
width: 200px;
 
width: 200px;
 +
margin-left: 5%;
 +
margin-right: 50px;
 
}
 
}
−
red {color: #cc0000 !important;} /* LOL */
+
#menuwrap {
−
#mainwrap {
+
 
margin: 0 auto;
 
margin: 0 auto;
−
width: 1060px;
+
max-width: 960px;
 +
height: 100px;
 
}
 
}
−
#menubar { /* MASTER MENU TABLE */
+
.dropbtn {
−
background-color: blue;
+
text-decoration: none !important;
 +
}
 +
#menubartable {
 
border: 0;
 
border: 0;
−
display: table-row;
+
background: #F8F9F9;
−
height: 80px;
+
 
list-style-type: none;
 
list-style-type: none;
−
margin-top: -1px
 
−
padding: 0;
 
−
position: fixed;
 
−
top:0px;
 
 
white-space: nowrap;
 
white-space: nowrap;
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
padding-top: 100px;
 +
margin-top: -80px;
 +
padding-left: 3000px;
 
margin-left: -3000px;
 
margin-left: -3000px;
−
margin-right: -3000px;
 
−
padding-left: 3000px; /* THIS MAKES IT EXTEND TO FULL WIDTH */
 
 
padding-right: 3000px;
 
padding-right: 3000px;
 +
margin-right: -3000px;
 
}
 
}
−
#menubar li {
+
#menubartable li {
 
display: table-cell;
 
display: table-cell;
 
}
 
}
−
li .menuitem, .dropbtn { /* MAIN MENU BUTTONS */
+
li .menuitem, .dropbtn {
−
-webkit-transition:2s;
+
color: #a9a9a9 !important;
−
color: #605e5e !important;
+
background: #F8F9F9;
−
display: table-cell;
+
−
font-family: Arial, sans-serif;
+
−
font-size: 130%;
+
−
padding: 40px 18px;
+
−
text-align: center;
+
−
text-decoration: none !important;
+
−
vertical-align: sub;
+
−
}
+
−
li.dropdown {
+
−
align-self: left;
+
 
display: table-cell;
 
display: table-cell;
 +
vertical-align: middle;
 +
padding: 20px 15px;
 
}
 
}
−
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
+
.dropdown-content {
−
background-color: #fefefe;
+
 
display: none;
 
display: none;
−
margin-top: -12px;
 
−
min-width: 160px;
 
 
position: absolute;
 
position: absolute;
−
z-index: 1;
+
z-index: 10;
 
}
 
}
−
.dropdown-content .menuitem { /* RAIN DROP ... DROP DOWN */
+
.dropdown-content .menuitem {
−
color: black;
+
 
display: block;
 
display: block;
−
padding: 18px 16px;
 
 
text-align: left;
 
text-align: left;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
−
.dropdown-content .menuitem:hover {background-color: #fefefe;} /* HOVER ANIMATIONS */
+
.menu-column:hover .dropdown-content {
−
.dropdown:hover .dropdown-content {display: block;}
+
display: block;
−
li .menuitem:hover, .dropdown:hover .dropbtn {color: #cc0000 !important; -webkit-transition:0.25s;}
+
}
−
.logo:hover {color: #b9b4b4 !important; -webkit-transition:1s;}
+
li .menuitem:hover, li .dropbtn:hover {
 +
background: #f4f4f4;
 +
}
 +
#masterfooter {
 +
position: absolute;
 +
border: 0;
 +
background: #f8f9f9;
 +
list-style-type: none;
 +
white-space: nowrap;
 +
z-index: 10;
 +
width: 100%;
 +
bottom: 0;
 +
padding-left: 3000px;
 +
margin-left: -3000px;
 +
padding-right: 3000px;
 +
margin-right: -3000px;
 +
}
 
</style>
 
</style>
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
<div id="mainwrap">
+
<div id="menuwrap">
−
<ul id="menubar">
+
  <ul id="menubartable" class="menu-type">
−
 
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU" class="wordmark"><img src="https://static.igem.org/mediawiki/2017/f/f2/T--BostonU--RedGrey.svg"></img></a> </li>
−
<li><a href="https://2017.igem.org/Team:BostonU"><img class="logo" src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></a></img></li>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Team" class="dropbtn">People</a>
−
 
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Team">Team</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Attributions">Attributions</a></div>
−
<li><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Team">Team</a></li>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Description" class="dropbtn">Research</a>
−
 
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Overview</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Experiments">Experiments</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modeling</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Protocols">Protocols</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a> </div>
−
<li class="dropdown">
+
    </li>
−
<a href="https://2017.igem.org/Team:BostonU/Overview" class="dropbtn">Research</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Engagement" class="dropbtn">Beyond the Bench</a>
−
<div class="dropdown-content">
+
      <div class="dropdown-content"><a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Silver">Human Practices</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Gold_Integrated">Integrated Human Practices</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Engagement">Public Engagement</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/InterLab">InterLab Contribution</a> </div>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Overview">Overview</a>
+
    </li>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/JudgingCriteria" class="dropbtn">Achievements</a>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Overview</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a> </div>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a>
+
    </li>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a>
+
  </ul>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a>
+
</div>
−
</div>
+
−
</li>
+
−
 
+
−
<li class="dropdown">
+
−
<a href="https://2017.igem.org/Team:BostonU/Achievements" class="dropbtn">Achievements</a>
+
−
<div class="dropdown-content">
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Achievements">Overview</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Demonstrate">Demonstration</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a>
+
−
</div>
+
−
</li>
+
−
 
+
−
<li class="dropdown">
+
−
<a href="https://2017.igem.org/Team:BostonU/BTB" class="dropbtn">Beyond the Bench</a>
+
−
<div class="dropdown-content">
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/BTB">Overview</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP">Human Practices</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Contribution">Contribution</a>
+
−
</div>
+
−
</li>
+
−
 
+
−
<li><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Attributions">Attributions</a></li>
+
−
</ul>
+
−
</div>
+
 
</body>
 
</body>
 +
</html>

Latest revision as of 21:57, 1 November 2017