Difference between revisions of "Template:BioMarvel"

Line 240: Line 240:
 
$(".mBtn-menu").on('click', function() {
 
$(".mBtn-menu").on('click', function() {
 
$("#topMenu").slideToggle('fast');
 
$("#topMenu").slideToggle('fast');
−
});
 
−
$(".mMenu_left ul li").click(function(){
 
−
$("ul",this).slideToggle('fast');
 
 
});
 
});
 
});
 
});
Line 272: Line 269:
 
}
 
}
  
−
a:hover {
+
.mainBox a:hover {
 
color: grey;
 
color: grey;
 
     text-decoration:none;
 
     text-decoration:none;
Line 292: Line 289:
 
max-width: 1080px;
 
max-width: 1080px;
 
min-width: 360px;
 
min-width: 360px;
−
height: 300px;
 
−
padding: 2% 0%;
 
 
margin-left: auto;
 
margin-left: auto;
 
margin-right: auto;
 
margin-right: auto;
−
background-color: white;
+
background-color: #f8fafc;
 
background-image: url('https://static.igem.org/mediawiki/2018/2/27/T--Biomarvel--Header.jpg');
 
background-image: url('https://static.igem.org/mediawiki/2018/2/27/T--Biomarvel--Header.jpg');
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 308: Line 303:
 
margin-right: auto;
 
margin-right: auto;
 
padding-bottom: 10px;
 
padding-bottom: 10px;
 +
padding-top: 10px;
 
}
 
}
  
Line 331: Line 327:
 
@media screen and (max-width: 1079px){
 
@media screen and (max-width: 1079px){
 
#topMenu {
 
#topMenu {
−
width: auto;
+
width: 100%;
 
display: none;
 
display: none;
 
position: relative;
 
position: relative;
Line 338: Line 334:
  
 
.mHeader{
 
.mHeader{
−
height: 100px;
+
width: 100%;
 
}
 
}
  
Line 377: Line 373:
 
li.topMenuLi{
 
li.topMenuLi{
 
margin-bottom: 15px;
 
margin-bottom: 15px;
 +
cursor: default;
 
}
 
}
 
.submenuLink {
 
.submenuLink {
Line 384: Line 381:
 
}
 
}
 
ul.submenuC {
 
ul.submenuC {
−
display: none;
 
 
font-family: sans-serif;
 
font-family: sans-serif;
 
font-size: 140%;
 
font-size: 140%;
Line 392: Line 388:
 
}
 
}
 
.mMenu_left{
 
.mMenu_left{
−
width: 100%;
+
width: 33.33%;
−
float: right;
+
float: left;
 
display: inline-flex;
 
display: inline-flex;
 
justify-content: center;
 
justify-content: center;
Line 404: Line 400:
 
/* desktops */
 
/* desktops */
 
@media screen and (min-width: 1080px) {
 
@media screen and (min-width: 1080px) {
−
.header {padding: 1% 0%;}
+
.header {}
 
.mHeader{
 
.mHeader{
 
height: 300px;
 
height: 300px;
Line 415: Line 411:
 
display: block !important;
 
display: block !important;
 
position: relative;
 
position: relative;
−
padding: 2% 0%;
+
margin-top: 20px;
 
}
 
}
  
Line 422: Line 418:
 
}
 
}
 
#topMenu ul {
 
#topMenu ul {
 +
width: 100%;
 
list-style-type: none;
 
list-style-type: none;
−
margin: 0px;
+
vertical-align: middle;
 
padding: 0px;
 
padding: 0px;
 +
margin: 0px;
 
}
 
}
 
#topMenu ul li {
 
#topMenu ul li {
Line 430: Line 428:
 
color: black;
 
color: black;
 
background-color: rgba(0,0,0,0.0);
 
background-color: rgba(0,0,0,0.0);
−
float: left;
 
 
line-height: 30px;
 
line-height: 30px;
−
vertical-align: middle;
 
 
text-align: center;
 
text-align: center;
 
position: relative;
 
position: relative;
Line 444: Line 440:
 
color: black;
 
color: black;
 
font-family: sans-serif;
 
font-family: sans-serif;
−
font-size: 170%;
+
font-size: 20px;
−
margin-right: 70px;
+
font-style: bold;
 +
cursor: default;
 +
height: 60px;
 +
text-align: center;
 +
display: inline-table;
 
}
 
}
−
.topMenuUl{
+
.menuLinkText{
 +
display: table-cell;
 +
vertical-align: middle;
 +
}
 +
.topMenuLi{
  
 +
text-align: center;
 
}
 
}
−
.topMenuLi:hovor .menuLink {
+
.topMenuLi:hovor .menuLink{
−
color: #bc564a !important;
+
color: #bc564a;
 
}
 
}
−
.topMenuLi:hover .mMenu_left{
+
.topMenuLi:hover .submenuC{
−
border-bottom: solid 3px #bc564a;
+
border-top: solid 5px #bc564a;
 
}
 
}
 
.submenuLink {
 
.submenuLink {
 
color: black !important;
 
color: black !important;
 
margin-top: -1px;
 
margin-top: -1px;
−
text-align: left;
+
text-align: center;
 
}
 
}
 
.longLink {
 
.longLink {
−
width: 250px;
+
width: 100%;
 
}
 
}
 
ul.submenuC {
 
ul.submenuC {
 
position: absolute;
 
position: absolute;
 
height: 0px;
 
height: 0px;
 +
width: 100%;
 
overflow: hidden;
 
overflow: hidden;
 
transition: height .2s;
 
transition: height .2s;
 
font-family: sans-serif;
 
font-family: sans-serif;
−
font-size: 140%;
+
font-size: 18px;
 +
background-color: #f8fafc;
 
}
 
}
 
.submenuC a {
 
.submenuC a {
Line 476: Line 483:
 
}
 
}
 
.topMenuLi:hover .submenuC {
 
.topMenuLi:hover .submenuC {
−
height: 250px;
+
height: auto;
 
}
 
}
 
.submenuLink:hover {
 
.submenuLink:hover {
Line 483: Line 490:
 
 
 
.mMenu_left{
 
.mMenu_left{
−
width: 16.66%;
+
width: 16.666%;
 
float: left;
 
float: left;
 
display: inline-flex;
 
display: inline-flex;
Line 543: Line 550:
 
<ul>
 
<ul>
 
<li class="topMenuLi">
 
<li class="topMenuLi">
−
<a class="menuLink">PROJECT</a>
+
<a class="menuLink"><div class="menuLinkText">PROJECT</div></a>
 
<ul class="submenuC">
 
<ul class="submenuC">
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/Project/Description">Description</a></li>
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/Project/Description">Description</a></li>
Line 558: Line 565:
 
<ul>
 
<ul>
 
<li class="topMenuLi">
 
<li class="topMenuLi">
−
<a class="menuLink">WET LAB</a>
+
<a class="menuLink"><div class="menuLinkText">WET LAB</div></a>
 
<ul class="submenuC">
 
<ul class="submenuC">
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/WET_LAB/Experiments">Experiments</a></li>
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/WET_LAB/Experiments">Experiments</a></li>
Line 571: Line 578:
 
<ul>
 
<ul>
 
<li class="topMenuLi">
 
<li class="topMenuLi">
−
<a class="menuLink">HUMAN PRACTICES</a>
+
<a class="menuLink"><div class="menuLinkText">HUMAN PRACTICES</div></a>
 
<ul class="submenuC">
 
<ul class="submenuC">
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/Human_Practices/Overview">Overview</a></li>
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/Human_Practices/Overview">Overview</a></li>
Line 584: Line 591:
 
<ul>
 
<ul>
 
<li class="topMenuLi">
 
<li class="topMenuLi">
−
<a class="menuLink">NOTEBOOK</a>
+
<a class="menuLink"><div class="menuLinkText">NOTEBOOK</div></a>
 
<ul class="submenuC">
 
<ul class="submenuC">
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/Notebook/Lab_Journal">Lab Journal</a></li>
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/Team:BioMarvel/Notebook/Lab_Journal">Lab Journal</a></li>
Line 595: Line 602:
 
<ul>
 
<ul>
 
<li class="topMenuLi">
 
<li class="topMenuLi">
−
<a class="menuLink">PEOPLE</a>
+
<a class="menuLink"><div class="menuLinkText">PEOPLE</div></a>
 
<ul class="submenuC">
 
<ul class="submenuC">
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/ Team:BioMarvel/People/Team">Team</a></li>
 
<li><a class="submenuLink longLink" href="https://2018.igem.org/ Team:BioMarvel/People/Team">Team</a></li>
Line 607: Line 614:
 
<ul>
 
<ul>
 
<li class="topMenuLi">
 
<li class="topMenuLi">
−
<a class="menuLink" href="https://2018.igem.org/Team:BioMarvel/Achievement">Achievement</a>
+
<a class="menuLink" href="https://2018.igem.org/Team:BioMarvel/Achievement" style="cursor: pointer;"><div class="menuLinkText">Achievement</div></a>
 
</li>
 
</li>
 
</ul>
 
</ul>

Revision as of 05:43, 18 September 2018