Difference between revisions of "Template:BU17 template menubar"

Line 4: Line 4:
 
<style>
 
<style>
 
.logo { /* LOGO IN MENU */
 
.logo { /* LOGO IN MENU */
−
width: 200px;
+
width: 320px;
 +
padding: 40px 40px;
 +
float: left;
 
}
 
}
−
.linklogo {
 
−
font-family: Arial, sans-serif;
 
−
font-size: 2.5em;
 
−
letter-spacing: -4;
 
−
font-weight: 900;
 
−
overflow: hidden;
 
−
padding: 10px 10px 0;
 
−
line-height: 1;
 
−
color: #242424;
 
−
}
 
−
 
−
.linklogo:hover {
 
−
color: #242424;
 
−
}
 
−
 
−
.linklogo::after {
 
−
content: '';
 
−
position: absolute;
 
−
height: 100%;
 
−
width: 100%;
 
−
top: 0;
 
−
right: 0;
 
−
z-index: -1;
 
−
background: #242424;
 
−
-webkit-transform: translate3d(101%,0,0);
 
−
transform: translate3d(101%,0,0);
 
−
-webkit-transition: -webkit-transform 0.5s;
 
−
transition: transform 0.5s;
 
−
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
 
−
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
 
−
}
 
−
 
−
.linklogo:hover::after {
 
−
-webkit-transform: translate3d(0,0,0);
 
−
transform: translate3d(0,0,0);
 
−
}
 
−
 
−
.linklogo span {
 
−
display: block;
 
−
position: relative;
 
−
}
 
−
 
−
.linklogo span::before {
 
−
content: attr(data-letters);
 
−
position: absolute;
 
−
color: #fff;
 
−
left: 0;
 
−
overflow: hidden;
 
−
white-space: nowrap;
 
−
width: 0%;
 
−
-webkit-transition: width 0.5s;
 
−
transition: width 0.5s;
 
−
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
 
−
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
 
−
}
 
−
 
−
.linklogo:hover span::before {
 
−
width: 100%;
 
−
}
 
−
red {color: #cc0000 !important;} /* LOL */
 
 
#mainwrap {
 
#mainwrap {
 
margin: 0 auto;
 
margin: 0 auto;
−
width: 1060px;
+
background-color: blue;
 +
max-width: 1080px;
 +
min-width: 320px;
 
}
 
}
 
#menubar { /* MASTER MENU TABLE */
 
#menubar { /* MASTER MENU TABLE */
−
background-color: #fefefe;
+
background-color: none;
 +
width: 100%;
 
border: 0;
 
border: 0;
 
display: table-row;
 
display: table-row;
−
height: 80px;
+
align: left;
 +
height: 160px;
 
list-style-type: none;
 
list-style-type: none;
−
margin-top: -1px
+
margin-top: -1px;
 
padding: 0;
 
padding: 0;
−
position: fixed;
+
top: 20px;
−
top:0px;
+
 
white-space: nowrap;
 
white-space: nowrap;
−
margin-left: -3000px;
+
float: right;
−
margin-right: -3000px;
+
−
padding-left: 3000px; /* THIS MAKES IT EXTEND TO FULL WIDTH */
+
−
padding-right: 3000px;
+
 
}
 
}
 
#menubar li {
 
#menubar li {
Line 91: Line 33:
 
li .menuitem, .dropbtn { /* MAIN MENU BUTTONS */
 
li .menuitem, .dropbtn { /* MAIN MENU BUTTONS */
 
-webkit-transition:2s;
 
-webkit-transition:2s;
−
color: #605e5e !important;
+
color: #f8f9f9 !important;
 
display: table-cell;
 
display: table-cell;
 
font-family: Arial, sans-serif;
 
font-family: Arial, sans-serif;
−
font-size: 130%;
+
font-size: 20pt;
−
padding: 40px 18px;
+
padding: 0px 40px;
−
text-align: center;
+
text-align: left;
 
text-decoration: none !important;
 
text-decoration: none !important;
−
vertical-align: sub;
+
vertical-align: middle;
 
}
 
}
 
li.dropdown {
 
li.dropdown {
 
align-self: left;
 
align-self: left;
 +
text-align: left;
 
display: table-cell;
 
display: table-cell;
 
}
 
}
 
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
 
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
−
background-color: #fefefe;
 
 
display: none;
 
display: none;
 
margin-top: -12px;
 
margin-top: -12px;
Line 115: Line 57:
 
color: black;
 
color: black;
 
display: block;
 
display: block;
−
padding: 18px 16px;
+
padding: 18px 18px;
 
text-align: left;
 
text-align: left;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
−
.dropdown-content .menuitem:hover {background-color: #fefefe;} /* HOVER ANIMATIONS */
 
 
.dropdown:hover .dropdown-content {display: block;}
 
.dropdown:hover .dropdown-content {display: block;}
 
li .menuitem:hover, .dropdown:hover .dropbtn {color: #cc0000 !important; -webkit-transition:0.25s;}
 
li .menuitem:hover, .dropdown:hover .dropbtn {color: #cc0000 !important; -webkit-transition:0.25s;}
−
.logo:hover {color: #b9b4b4 !important; -webkit-transition:1s;}
 
 
</style>
 
</style>
 
</head>
 
</head>
Line 128: Line 68:
 
<body>
 
<body>
 
<div id="mainwrap">
 
<div id="mainwrap">
 +
<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>
 
<ul id="menubar">
 
<ul id="menubar">
−
 
−
<li><a href="https://2017.igem.org/Team:BostonU"><div class="grid__item color-4">
 
−
<a class="link linklogo" href="#"><span data-letters="BOSTONU">BOSTONU</span></a>
 
−
</div></li>
 
−
 
−
<li><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Team">Team</a></li>
 
  
 
<li class="dropdown">
 
<li class="dropdown">

Revision as of 22:13, 1 August 2017