Difference between revisions of "Template:BU17 template menubar"

 
(36 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 { /* LOGO IN MENU */
+
<style>
−
width: 300px;
+
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
−
margin-top: 50px;
+
color: #a9a9a9 !important;
 +
}
 +
.menu-type {
 +
font-family: 'Roboto Condensed', sans-serif !important;
 +
letter-spacing: 5pt !important;
 +
font-size: 12pt;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase;
 +
font-weight: 700;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.wordmark img {
 +
vertical-align: sub;
 +
width: 200px;
 
margin-left: 5%;
 
margin-left: 5%;
 +
margin-right: 50px;
 
}
 
}
−
#mainwrap {
+
#menuwrap {
 
margin: 0 auto;
 
margin: 0 auto;
−
        height: 100% !important;
+
max-width: 960px;
 +
height: 100px;
 
}
 
}
−
#mybody {
+
.dropbtn {
−
position: relative;
+
text-decoration: none !important;
−
width:100%;
+
−
padding-bottom:5%;  /* Height of the footer */
+
−
background-color: yellow;
+
 
}
 
}
−
#menubartable { /* MASTER MENU TABLE */
+
#menubartable {
 
border: 0;
 
border: 0;
 +
background: #F8F9F9;
 
list-style-type: none;
 
list-style-type: none;
−
margin-top: 60px;
 
−
margin-right: 5%;
 
−
padding: 0;
 
−
position: relative;
 
−
float: right;
 
 
white-space: nowrap;
 
white-space: nowrap;
−
width: 0 auto !important;
+
z-index: 10;
−
background-color: blue;
+
position: fixed;
 +
width: 100%;
 +
padding-top: 100px;
 +
margin-top: -80px;
 +
padding-left: 3000px;
 +
margin-left: -3000px;
 +
padding-right: 3000px;
 +
margin-right: -3000px;
 
}
 
}
 
#menubartable 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: #f8f9f9 !important;
+
background: #F8F9F9;
 
display: table-cell;
 
display: table-cell;
−
padding: 5px 18px;
 
−
font-family: Arial Black, sans-serif;
 
−
font-size: 120%;
 
−
text-align: center;
 
−
text-decoration: none !important;
 
−
text-transform: uppercase;
 
−
font-weight: bold;
 
 
vertical-align: middle;
 
vertical-align: middle;
 +
padding: 20px 15px;
 
}
 
}
−
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
+
.dropdown-content {
 
display: none;
 
display: none;
 
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: 5px 18px;
 
 
text-align: left;
 
text-align: left;
 
text-decoration: none;
 
text-decoration: none;
−
background-color: red;
 
 
}
 
}
−
.menu-column:hover .dropdown-content {display: block;}
+
.menu-column:hover .dropdown-content {
−
li .menuitem:hover, .menu-column:hover .dropbtn {color: #a9a9a9 !important; -webkit-transition:0.25s;}
+
display: block;
−
.logo:hover {color: #b9b4b4 !important; -webkit-transition:1s;}
+
}
−
#myfooter {
+
li .menuitem:hover, li .dropbtn:hover {
−
position: absolute;
+
background: #f4f4f4;
−
bottom: 0pt;
+
}
−
width:100%;
+
#masterfooter {
−
height:25px;   /* Height of the footer */
+
position: absolute;
−
background-color: green;
+
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="menuwrap">
−
<div id="mainwrap">
+
  <ul id="menubartable" class="menu-type">
−
<a href="https://2017.igem.org/Team:BostonU"><img class="logo" src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></img></a>
+
    <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>
−
<ul id="menubartable">
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Team" class="dropbtn">People</a>
−
<li class="menu-column">
+
      <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>
−
<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/Description" class="dropbtn">Research</a>
−
<div class="dropdown-content">
+
      <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>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a>
+
    </li>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Engagement" class="dropbtn">Beyond the Bench</a>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a>
+
      <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/Notebook">Notebook</a>
+
    </li>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/JudgingCriteria" class="dropbtn">Achievements</a>
−
</div>
+
      <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>
−
</li>
+
    </li>
−
<li class="menu-column">
+
  </ul>
−
<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/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="menu-column">
+
−
<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/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 class="menu-column">
+
−
<a href="https://2017.igem.org/Team:BostonU/attributions" class="dropbtn">Attributions</a>
+
−
</li>
+
−
</li>
+
−
</ul>
+
−
<div id="myfooter">
+
−
<div class="footer-left">This is some footer content!</div>
+
−
<div class="footer-right"></div>
+
−
</div>
+
 
</div>
 
</div>
 
</body>
 
</body>
 +
</html>

Latest revision as of 21:57, 1 November 2017