Line 12: | Line 12: | ||
/********************************* MENU ********************************/ | /********************************* MENU ********************************/ | ||
− | + | html, body { | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | background-color: aliceblue; | |
− | + | ||
− | + | font-family: 'century gothic', arial, sans-serif; | |
− | + | color: #000; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .fixed-nav li,ul { | |
− | + | list-style: none; | |
− | + | box-sizing: border-box; | |
− | + | border: 1px #fff solid; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | a { | |
− | + | text-decoration: none; | |
− | + | color: #aaa; | |
− | + | } | |
− | + | ||
− | + | .fixed-nav { | |
− | + | position: fixed; | |
− | + | top: 0; | |
− | + | left: 0; | |
− | + | right: 0; | |
− | + | box-sizing: border-box; | |
− | + | padding-top: 16px; | |
− | + | padding-left: 16px; | |
− | + | padding-bottom: 16px; | |
− | + | display: inline-block; | |
− | + | z-index: 9999; | |
− | + | width: 100%; | |
− | + | ||
− | + | background-color: #fff; | |
− | + | ||
+ | font-size: 14px; | ||
+ | text-align: left; | ||
+ | color: #aaa; | ||
+ | } | ||
− | + | .fixed-nav:hover > .primary { | |
− | + | width: auto; | |
− | + | margin-right: 10px; | |
− | + | padding-right: 2px; | |
− | + | border-radius: 0px; | |
− | + | border: #fff solid 1px; | |
− | + | ||
+ | text-align: left; | ||
+ | |||
+ | transition: all 0.5s ease-out; | ||
+ | -webkit-transition: all 0.5s ease-out; | ||
+ | } | ||
− | + | .primary { | |
− | + | position: relative; | |
− | + | display: inline-block; | |
− | + | float: left; | |
− | + | ||
− | + | width: 18px; height: 20px; | |
− | + | margin-right: 2px; | |
− | + | padding-left: 2px; | |
− | + | padding-right: 2px; | |
− | + | border-radius: 50%; | |
− | + | border: #aaa solid 1px; | |
− | + | overflow: hidden; | |
− | + | ||
− | + | text-align: center; | |
− | + | font-size: 14px; | |
− | + | line-height: 18px; | |
− | + | ||
− | + | transition: all 0.5s ease-out; | |
+ | -webkit-transition: all 0.5s ease-out; | ||
+ | } | ||
− | + | .submenu_top:hover { | |
− | + | overflow: visible; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .submenu { | |
− | + | position: absolute; | |
− | + | padding: 5px; | |
− | + | margin: 0; | |
+ | display: inline-block; | ||
+ | white-space: nowrap; | ||
+ | text-align: left; | ||
+ | background-color: #fff; | ||
+ | line-height: 30px; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
− | + | a:hover { | |
− | + | color: #8b008b; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
/********************************* RESPONSIVE STYLING ********************************/ | /********************************* RESPONSIVE STYLING ********************************/ | ||
Line 332: | Line 112: | ||
@media only screen and (max-width: 1000px) { | @media only screen and (max-width: 1000px) { | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 344: | Line 119: | ||
@media only screen and (max-width: 680px) { | @media only screen and (max-width: 680px) { | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 364: | Line 132: | ||
<!-- This tells the browser that your page is responsive --> | <!-- This tells the browser that your page is responsive --> | ||
− | <head> | + | <!DOCTYPE html> |
− | + | <html> | |
− | </head> | + | <head> |
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <title>Menu</title> | ||
+ | <link rel="stylesheet" type="text/css" href='nav.css'> | ||
+ | <script src="https://use.fontawesome.com/9a70aea62c.js"></script> | ||
+ | </head> | ||
− | + | <body> | |
− | + | <nav class="fixed-nav"> | |
− | + | <div class="primary"> | |
− | < | + | <a href="https://2016.igem.org/Team:Northwestern"><li><i class="fa fa-home" aria-hidden="true"></i> Home</li></a> |
− | + | </div> | |
− | + | <div class="primary submenu_top"> | |
− | + | <li><i class="fa fa-user" aria-hidden="true"></i> Team | |
− | + | <ul class="submenu"> | |
− | + | <a href=" https://2016.igem.org/Team:Northwestern/Team"><li class="secondary"><i class="fa fa-newspaper-o" aria-hidden="true"></i> About Us</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Collaborations"><li class="secondary"><i class="fa fa-users" aria-hidden="true"></i> Collaborations</li></a> | |
− | + | </ul> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</li> | </li> | ||
− | + | </div> | |
− | + | <div class="primary submenu_top"> | |
− | + | <li><i class="fa fa-scissors" aria-hidden="true"></i> Project | |
− | + | <ul class="submenu"> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Description"><li class="secondary"><i class="fa fa-file-text" aria-hidden="true"></i> Description</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Design"><li class="secondary"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Design</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Experiments"><li class="secondary"><i class="fa fa-flask" aria-hidden="true"></i> Experiments</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Proof"><li class="secondary"><i class="fa fa-shield" aria-hidden="true"></i> Proof of Concept</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Demonstrate"><li class="secondary"><i class="fa fa-film" aria-hidden="true"></i> Demonstrate</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Results"><li class="secondary"><i class="fa fa-bar-chart" aria-hidden="true"></i> Results</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Notebook"><li class="secondary"><i class="fa fa-book" aria-hidden="true"></i> Notebook</li></a> | |
+ | </ul> | ||
</li> | </li> | ||
− | + | </div> | |
− | + | <div class="primary submenu_top"> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Parts"><li><i class="fa fa-wrench" aria-hidden="true"></i> Parts | |
− | + | <ul class="submenu"> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Basic_Part"><li class="secondary"><i class="fa fa-cog" aria-hidden="true"></i> Basic Parts</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Composite_Part"><li class="secondary"><i class="fa fa-cogs" aria-hidden="true"></i> Composite Parts</li></a> | |
− | + | <a href="https://2016.igem.org/Team:Northwestern/Part_Collection"><li class="secondary"><i class="fa fa-briefcase" aria-hidden="true"></i> Part Collection</li></a> | |
− | + | </ul> | |
+ | </li></a> | ||
+ | </div> | ||
+ | <div class="primary"> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Safety"><li><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Safety</li></a> | ||
+ | </div> | ||
+ | <div class="primary"> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Attributions"><li><i class="fa fa-heart" aria-hidden="true"></i> Attributions</li></a> | ||
+ | </div> | ||
+ | <div class="primary submenu_top"> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Human_Practices"><li><i class="fa fa-street-view" aria-hidden="true"></i> Human Practices | ||
+ | <ul class="submenu"> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/HP/Silver"><li class="secondary"><i class="fa fa-moon-o" aria-hidden="true"></i> Silver</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/HP/Gold"><li class="secondary"><i class="fa fa-sun-o" aria-hidden="true"></i> Gold</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Integrated_Practices"><li class="secondary"><i class="fa fa-globe" aria-hidden="true"></i> Integrated Practices</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Engagement"><li class="secondary"><i class="fa fa-comments-o" aria-hidden="true"></i> Engagement</li></a> | ||
+ | </ul> | ||
+ | </li></a> | ||
+ | </div> | ||
+ | <div class="primary submenu_top"> | ||
+ | <li><i class="fa fa-trophy" aria-hidden="true"></i> Awards | ||
+ | <ul class="submenu"> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Entrepreneurship"><li class="secondary"><i class="fa fa-industry" aria-hidden="true"></i> Entrepreneurship</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Hardware"><li class="secondary"><i class="fa fa-sitemap" aria-hidden="true"></i> Hardware</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Software"><li class="secondary"><i class="fa fa-code-fork" aria-hidden="true"></i> Software</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Measurement"><li class="secondary"><i class="fa fa-balance-scale" aria-hidden="true"></i> Measurement</li></a> | ||
+ | <a href="https://2016.igem.org/Team:Northwestern/Model"><li class="secondary"><i class="fa fa-cubes" aria-hidden="true"></i> Model</li></a> | ||
+ | </ul> | ||
</li> | </li> | ||
− | + | </div> | |
− | + | </nav> | |
− | + | ||
− | + | <script src="https://2016.igem.org/Team:Northwestern/libraries/jquery"></script> | |
− | + | </body> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
</html> | </html> |
Revision as of 16:17, 9 August 2016