Difference between revisions of "Template:Amsterdam"

Line 2: Line 2:
  
  
−
<head>
+
<!DOCTYPE html>
−
<title>iGEM amsterdam 2017</title>
+
<html>
−
    <meta charset="utf-8">
+
<head>
−
    <link rel="stylesheet" href="style.css">
+
<title>mohammad</title>
−
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
+
<link rel="stylesheet" type="text/css" href="style.css">
−
</head>
+
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=open+Sans">
 +
</head>
  
  
 +
<body>
 +
<nav class="menu">
 +
 +
<ul id="rmenu">
 +
<li> <a class="menu-item" href="#"> HOME</a>
 +
 +
</li>
 +
<li> <a class="menu-item" href="#">TEAM</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="#" class="sub-item">The Team</a></li>
 +
<li><a href="#" class="sub-item">Team Attribution</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li> <a class="menu-item" href="#">PROJECT</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
  
−
<body class="body">
 
  
 +
<li><a href="#" class="sub-item">The Project</a></li>
 +
<li><a href="#" class="sub-item">Modeling</a>
 +
<ul id="subx-menu">
 +
<li><a href="#" class="subx-item">Genetic stability</a></li>
 +
<li><a href="#" class="subx-item">Glyoxylate Shunt</a></li>
 +
<li><a href="#" class="subx-item">Biosensor</a></li>
 +
<li><a href="#" class="subx-item">Transporter</a></li>
 +
</ul>
  
−
<header class="mainheader">
+
</li>
 +
 
 +
 
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
</li>
 +
<li> <a class="menu-item" href="#">NEWS</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="#" class="sub-item">The news</a></li>
 +
<li><a href="#" class="sub-item">Newsletters</a></li>
 +
<li><a href="#" class="sub-item">Online articles</a></li>
 +
<li><a href="#" class="sub-item">Magazines</a></li>
 +
<li><a href="#" class="sub-item">Platforms</a></li>
 +
</ul>
 +
</div>
 +
</div> </li>
 +
<li> <a class="menu-item" href="#">OUTREACH</a> </li>
 +
<li> <a class="menu-item" href="#">SPONSORS</a> </li>
 +
<li> <a class="menu-item" href="#">LABORATORY</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="#" class="sub-item">Parts</a></li>
 +
<li><a href="#" class="sub-item">Labjournal</a></li>
 +
<li><a href="#" class="sub-item">Protocols</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li> <a class="menu-item" href="#">Achievements</a> </li>
 +
<li> <a class="menu-item" href="#">SAFETY</a> </li>
 +
 +
 +
 +
</ul>
 +
</nav>
 
 
  
−
<nav><ul>
+
</body>
−
<li> <a href="https://2017.igem.org/Team:Amsterdam"> HOME</a> </li>
+
 
−
<li> <a href="https://2017.igem.org/Team:Amsterdam/team">TEAM</a> </li>
+
−
<li> <a href="https://2017.igem.org/Team:Amsterdam/Project_Overview">PROJECT</a> </li>
+
−
<li> <a href="#">PARTS</a> </li>
+
−
<li> <a href="#">SAFETY</a> </li>
+
−
<li> <a href="#">HUMAN PRACTCE</a> </li>
+
−
<li> <a href="#">AWARDS</a> </li>
+
−
<li> <a href="#">JUDGING FORM</a> </li>
+
−
</ul></nav>
+
−
</header>
+
 
<!-- //////////////////////////////////////////// -->
 
<!-- //////////////////////////////////////////// -->
  
  
 
<style>
 
<style>
−
/*................MAIN HEADER.....................*/
+
* {
 +
margin: 0;
 +
padding: 0;
 +
font: 1em "open Sans", sans-serf;
 +
}
 +
body {
  
−
.mainheader img {
+
background-color: #eee;
−
width: 100%
+
 
}
 
}
  
−
.mainheader nav {
+
 
−
background-color: #e74c3c;
+
/*.....................................*/
−
height: 40px;
+
 
−
border-radius: 5px;
+
.menu {
−
-webkit- border-radius: 5px;
+
position: fixed;
−
-moz-border-radius: 5px;
+
left: 0;
 +
top: 0;
 +
border-top: 0;
 +
z-index: 100;
 +
box-shadow: -1px 15px 1px rgba(0,0,0,0.3);
 +
width: 100%;
 +
background-color: #333;
 +
color: #fff;
 +
height: 60px;
 +
}
 +
.myimg {
 +
width: 100px;
 +
float: left;
 +
height: 30px;
 +
padding: 15px 30px;
 +
}
 +
.menu #logo {
 +
float: left;
 +
height: 30px;
 +
padding: 15px 30px;
 +
font-size: 1.2em;
 +
line-height: 30px;
 +
display: none;
 +
}
 +
.menu > ul {
 +
margin: 0;
 +
padding: 0;
 +
float: left;
 +
list-style-type: none;
 
}
 
}
  
−
.mainheader nav ul {
+
.menu > ul > li {
−
text-align: center;;
+
      overflow: hidden;
−
list-style: none;
+
float: left;
−
margin: 0 auto;
+
 
}
 
}
  
−
.mainheader nav ul li {
+
 
−
display: inline;
+
.menu-item {
 +
display: inline-block;
 +
padding: 15px 10px;
 +
height: 30px;
 +
line-height: 30px;
 +
color: #fff;
 +
text-decoration: none;
 
}
 
}
  
−
.mainheader a:link, .mainheader a:visited{
+
.menu-item:hover {
−
color: white;
+
 
−
padding: 10px 40px;
+
background-color: #ff0055;
 +
}
 +
 
 +
 
 +
/*................STYLING SUB.....................*/
 +
 
 +
.sub-content {
 +
 +
position: absolute;
 +
top: 100%;
 +
overflow: hidden;
 +
background-color: #333;
 +
max-height: 0;
 +
}
 +
 
 +
.sub-content a {
 +
color: #fff;
 +
text-decoration: none;
 +
}
 +
 
 +
.sub-drop {
 +
 
 +
padding: 0;
 +
}
 +
 
 +
.sub-drop ul {
 +
width: 100%;
 +
padding: 0;
 +
margin: 0;
 +
list-style-type: none;
 +
}
 +
 
 +
.sub-drop ul li a {
 
display: inline-block;
 
display: inline-block;
−
height: 20px;
+
padding: 10px 20px;
 
}
 
}
  
−
.mainheader a:hover, .mainheader a:active{
+
.sub-drop ul li:hover {
−
color: white;
+
−
background-color: #f58233;
+
background-color: #ff0055;
−
text-shadow: none;
+
 
}
 
}
  
−
/*  
+
/*...............Sub-sub Menu.....................*/
−
This style is included by iGEM TUDelft
+
 
−
It will remove the space around a wrapper included by the CMS
+
ul#subx-menu {
−
There are more stupid wrappers / content included by the CMS
+
position: absolute;
−
Take a look in your browsers devtools to see which selectors you need to overwrite them to what you like.  
+
top: 36px;
−
*/
+
left: 99px;
−
#content {
+
background-color: #333;
−
        width: 100%;
+
overflow: hidden;
−
        margin-left: 0;
+
max-width: 0;
−
        padding: 0;
+
 
}
 
}
−
/*
+
 
−
Here I suggest some other modifications:
+
ul#subx-menu {
−
#content {
+
width: 130px;
−
        margin-top: -17px;
+
−
        margin-bottom: -17px;
+
 
}
 
}
−
#firstHeading {
+
 
−
        display: none;
+
.sub-drop ul li:hover > ul#subx-menu {
 +
max-width: 400px;
 +
transition: max-width 0.5s ease-in;
 +
-webkit-transition: max-height 0.3s ease-in;
 +
-moz-transition: max-height 0.3s ease-in;
 
}
 
}
−
#sideMenu {
+
 
−
        display: none;
+
 
 +
/*...............Sub Drop.....................*/
 +
 
 +
 
 +
 
 +
.sub-drop > ul {
 +
overflow: hidden;
 +
visibility: hidden;
 +
opacity: 0;
 
}
 
}
−
.logo_2017 {
+
 
−
        display: none;
+
.menu ul li:hover .sub-drop ul{
 +
visibility: visible;
 +
opacity: 1;
 +
transition: visibility 0s, opacity 0.3s ease-in;
 
}
 
}
  
−
Also you can do something with the iGEM menu. Although it is against the regulations, most teams make it disappear, and make it available on hover.
 
−
This menu is available with the selectors #igem_menu_under and #igem_menu_14, if I am correct.
 
−
*/
 
  
 +
/*................Controling.....................*/
 +
 +
 +
.menu-item:focus {
 +
 +
background-color: #ff0055;
 +
}
 +
 +
.menu ul li:hover .sub-content {
 +
max-height: 400px;
 +
overflow: visible;
 +
transition: max-height 0.3s ease-in;
 +
-webkit-transition: max-height 0.3s ease-in;
 +
-moz-transition: max-height 0.3s ease-in;
 +
}
 +
 +
#rmenu {
 +
 +
float:right;
 +
}
  
  
 
</style>
 
</style>

Revision as of 22:19, 1 August 2017

mohammad