Mguillaume (Talk | contribs) (Blanked the page) |
Mguillaume (Talk | contribs) |
||
(31 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | |||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>mohammad</title> | ||
+ | <link rel="stylesheet" type="text/css" href="style.css"> | ||
+ | <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="https://2017.igem.org/Team:Amsterdam"> HOME</a> | ||
+ | |||
+ | </li> | ||
+ | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/team">TEAM</a> | ||
+ | <div class="sub-content"> | ||
+ | <div class="sub-drop"> | ||
+ | <ul> | ||
+ | <li><a href="https://2017.igem.org/Team:Amsterdam/team" class="sub-item">The Team</a></li> | ||
+ | <li><a href="#" class="sub-item">Team Attribution</a></li> | ||
+ | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Sponsors">Sponsors</a> </li> | ||
+ | <li><a href="#" class="sub-item">Collaborations</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Project">PROJECT</a> | ||
+ | <div class="sub-content"> | ||
+ | <div class="sub-drop"> | ||
+ | <ul> | ||
+ | <li><a href="https://2017.igem.org/Team:Amsterdam/Project" class="sub-item">Home</a></li> | ||
+ | <li><a href="#" class="sub-item">Modeling</a></li> | ||
+ | <li><a href="#" class="sub-item">Glyoxylate Shunt</a></li> | ||
+ | <li><a href="#" class="sub-item">Biosensor</a></li> | ||
+ | <li><a href="#" class="sub-item">Transporter</a> | ||
+ | <ul id="subx-menu"> | ||
+ | <li><a href="#" class="subx-item">Bioinformatics</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> <a class="menu-item" href="#">PRACTICES</a> | ||
+ | <div class="sub-content"> | ||
+ | <div class="sub-drop"> | ||
+ | <ul> | ||
+ | <li><a href="https://2017.igem.org/Team:Amsterdam/News" class="sub-item">Carbon Accounting</a></li> | ||
+ | <li> <a class="sub-item" href="https://2017.igem.org/Team:Amsterdam/Outreach">Outreach</a> </li> | ||
+ | <li> <a class="sub-item" href="#">Articles</a> </li> | ||
+ | <li> <a class="sub-item" href="#">Entrepreneurship</a> </li> | ||
+ | <li> <a class="sub-item" href="#">Safety</a> </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Laboratory">LAB</a> | ||
+ | <div class="sub-content"> | ||
+ | <div class="sub-drop"> | ||
+ | <ul> | ||
+ | <li><a href="#" class="sub-item">Parts</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Amsterdam/InterLab" class="sub-item">Interlab Study</a></li> | ||
+ | <li><a href="#" class="sub-item">Labjournal</a></li> | ||
+ | <li><a href="#" class="sub-item">Protocols</a></li> | ||
+ | <li><a href="#" class="sub-item">Methods</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Achievements">ACHIEVEMENTS</a> </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </body> | ||
+ | |||
+ | <!-- //////////////////////////////////////////// --> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font: 1em "open Sans", sans-serf; | ||
+ | } | ||
+ | body { | ||
+ | |||
+ | background-color: #eee; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*.....................................*/ | ||
+ | |||
+ | .menu { | ||
+ | position: fixed; | ||
+ | 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: white; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | .menu > ul > li { | ||
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | .menu-item { | ||
+ | display: inline-block; | ||
+ | padding: 15px 10px; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .menu-item:hover { | ||
+ | |||
+ | 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; | ||
+ | padding: 10px 20px; | ||
+ | } | ||
+ | |||
+ | .sub-drop ul li:hover { | ||
+ | |||
+ | background-color: #ff0055; | ||
+ | } | ||
+ | |||
+ | /*...............Sub-sub Menu.....................*/ | ||
+ | |||
+ | ul#subx-menu { | ||
+ | position: absolute; | ||
+ | top: 36px; | ||
+ | left: 99px; | ||
+ | background-color: #333; | ||
+ | overflow: hidden; | ||
+ | max-width: 0; | ||
+ | } | ||
+ | |||
+ | ul#subx-menu { | ||
+ | width: 130px; | ||
+ | } | ||
+ | |||
+ | .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; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*...............Sub Drop.....................*/ | ||
+ | |||
+ | |||
+ | |||
+ | .sub-drop > ul { | ||
+ | overflow: hidden; | ||
+ | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .menu ul li:hover .sub-drop ul{ | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | transition: visibility 0s, opacity 0.3s ease-in; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*................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; | ||
+ | } | ||
+ | |||
+ | |||
+ | #top_title { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | width: 100vw; | ||
+ | padding: 0px; | ||
+ | border: none; | ||
+ | color: black; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #fff; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | font-size: inherit; | ||
+ | padding-bottom: 0; | ||
+ | } | ||
+ | #sideMenu { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #top_menu_under { | ||
+ | height: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </style> |
Latest revision as of 10:28, 1 September 2017