|
|
| Line 9: |
Line 9: |
| | <!-- This tells the browser that your page is responsive --> | | <!-- This tells the browser that your page is responsive --> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"> | | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| − |
| |
| − | <style>
| |
| − | /*Strip the ul of padding and list styling*/
| |
| − | #windowcontent ul {
| |
| − | list-style-type:none;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | position: absolute;
| |
| − | }
| |
| − | /*Create a horizontal list with spacing*/
| |
| − | #windowcontent li {
| |
| − | display:inline-block;
| |
| − | float: left;
| |
| − | margin-right: 1px;
| |
| − | }
| |
| − |
| |
| − | /*Style for menu links*/
| |
| − | #windowcontent li a {
| |
| − | display:block;
| |
| − | min-width:140px;
| |
| − | height: 50px;
| |
| − | text-align: center;
| |
| − | line-height: 50px;
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | color: #fff;
| |
| − | background: #2f3036;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | /*Hover state for top level links*/
| |
| − | #windowcontent li:hover a {
| |
| − | background: #19c589;
| |
| − | }
| |
| − | /*Style for dropdown links*/
| |
| − | #windowcontent li:hover ul a {
| |
| − | background: #f3f3f3;
| |
| − | color: #2f3036;
| |
| − | height: 40px;
| |
| − | line-height: 40px;
| |
| − | }
| |
| − | /*Hover state for dropdown links*/
| |
| − | #windowcontent li:hover ul a:hover {
| |
| − | background: #19c589;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | /*Hide dropdown links until they are needed*/
| |
| − | #windowcontent li ul {
| |
| − | display: none;
| |
| − | }
| |
| − | /*Make dropdown links vertical*/
| |
| − | #windowcontent li ul li {
| |
| − | display: block;
| |
| − | float: none;
| |
| − | }
| |
| − | /*Prevent text wrapping*/
| |
| − | #windowcontent li ul li a {
| |
| − | width: auto;
| |
| − | min-width: 100px;
| |
| − | padding: 0 20px;
| |
| − | }
| |
| − | /*Display the dropdown on hover*/
| |
| − | #windowcontent ul li a:hover + .hidden, #windowcontent .hidden:hover {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*Responsive Styles*/
| |
| − | @media screen and (max-width : 760px){
| |
| − | /*Make dropdown links appear inline*/
| |
| − | #windowcontent ul {
| |
| − | position: static;
| |
| − | display: none;
| |
| − | }
| |
| − | /*Create vertical spacing*/
| |
| − | #windowcontent li {
| |
| − | margin-bottom: 1px;
| |
| − | }
| |
| − | /*Make all menu links full width*/
| |
| − | #windowcontent ul li, #windowcontent li a {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /*Display 'show menu' link*/
| |
| − | #windowcontent .show-menu {
| |
| − | display:block;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*Style 'show menu' label button and hide it by default*/
| |
| − | #windowcontent .show-menu {
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | text-decoration: none;
| |
| − | color: #fff;
| |
| − | background: #19c589;
| |
| − | text-align: center;
| |
| − | padding: 10px 0;
| |
| − | display: none;
| |
| − | }
| |
| − | /*Hide checkbox*/
| |
| − | input[type=checkbox]{
| |
| − | display: none;
| |
| − | }
| |
| − | /*Show menu when invisible checkbox is checked*/
| |
| − | input[type=checkbox]:checked ~ #menu{
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| | | | |
| | </head> | | </head> |
| Line 140: |
Line 22: |
| | <div class="col-12 rmvpadmarg tofront fixed"> | | <div class="col-12 rmvpadmarg tofront fixed"> |
| | <nav class="navbar"> | | <nav class="navbar"> |
| − | <a href="https://2017.igem.org/Team:DTU-Denmark">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/3/31/T--DTU-Denmark--home_button_white.jpg" alt="DTU-logo" align="left" height="27" style="margin:7px 0px 0px 20px;">
| |
| − | </a>
| |
| − | <div class="navbarcenter">
| |
| − | <ul id="menu">
| |
| − | <li><a href="#">Home</a></li>
| |
| − | <li>
| |
| − | <a href="#">About ￬</a>
| |
| − | <ul class="hidden">
| |
| − | <li><a href="#">Who We Are</a></li>
| |
| − | <li><a href="#">What We Do</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">Portfolio ￬</a>
| |
| − | <ul class="hidden">
| |
| − | <li><a href="#">Photography</a></li>
| |
| − | <li><a href="#">Web & User Interface Design</a></li>
| |
| − | <li><a href="#">Illustration</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a href="#">News</a></li>
| |
| − | <li><a href="#">Contact</a></li>
| |
| − |
| |
| − | <label for="show-menu" class="show-menu">Show Menu</label>
| |
| − | <input type="checkbox" id="show-menu" role="button">
| |
| − | </ul>
| |
| − | </div>
| |
| − |
| |
| | </nav> | | </nav> |
| | </div> | | </div> |
