Difference between revisions of "Template:Sydney Australia"
Line 6: | Line 6: | ||
<!-- Start of CSS--> | <!-- Start of CSS--> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* WIKI SETTINGS*/ | ||
+ | |||
+ | /* Hide first heading */ | ||
+ | .firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /*-- Remove borders, float content left and remove padding/margin */ | ||
+ | #globalWrapper, #content{ | ||
+ | background-color: transparent; | ||
+ | border: 0px; | ||
+ | margin:0 auto; | ||
+ | |||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | /*left align Black Menu Bar */ | ||
+ | #top_menu_inside { | ||
+ | margin-left: 20px; | ||
+ | } | ||
+ | |||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | nav ul li:hover > ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav { | ||
+ | margin: 0 auto; | ||
+ | text-align:center; | ||
+ | } | ||
+ | nav ul { | ||
+ | |||
+ | background: #efefef; | ||
+ | background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); | ||
+ | box-shadow: 0px 0px 9px rgba(0,0,0,0.15); | ||
+ | padding: 0 0px; | ||
+ | border-radius: 0px; | ||
+ | list-style: none; | ||
+ | position: fixed; | ||
+ | display: inline-block; | ||
+ | |||
+ | |||
+ | top: 14px; | ||
+ | } | ||
+ | nav ul:after { | ||
+ | content: ""; clear: both; display: block; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav ul li { | ||
+ | float: left; | ||
+ | } | ||
+ | nav ul li:hover { | ||
+ | background: #4b545f; | ||
+ | background: linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); | ||
+ | } | ||
+ | nav ul li:hover a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | nav ul li a { | ||
+ | display: block; padding: 15px 25px; | ||
+ | color: #757575; text-decoration: none; | ||
+ | } | ||
+ | |||
+ | nav ul ul { | ||
+ | background: #5f6975; border-radius: 0px; padding: 0; | ||
+ | position: absolute; top: 90%; | ||
+ | } | ||
+ | nav ul ul li { | ||
+ | float: none; | ||
+ | border-top: 1px solid #6b727c; | ||
+ | border-bottom: 1px solid #575f6a; | ||
+ | position: relative; | ||
+ | } | ||
+ | nav ul ul li a { | ||
+ | padding: 5px 20px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | nav ul ul li a:hover { | ||
+ | background: #4b545f; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav ul ul ul { | ||
+ | position: absolute left: 30%; top:-15; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
Line 34: | Line 159: | ||
} | } | ||
− | + | /* Creates the container for the menu */ | |
+ | #menuContainer { | ||
+ | |||
+ | width: 100%; | ||
+ | padding: 20px 0px; | ||
+ | border-top: 0px ; | ||
+ | background-color: #E8E8E9; | ||
+ | } | ||
/* Creates the container for the content */ | /* Creates the container for the content */ | ||
Line 118: | Line 250: | ||
/*MENU STYLING */ | /*MENU STYLING */ | ||
− | + | /*Styling for the links in the menu */ | |
+ | #menuContainer a { | ||
+ | color: #565656; | ||
+ | text-decoration:none; | ||
+ | font-weight: bold; | ||
+ | position: fixed; | ||
+ | } | ||
+ | |||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #menuContainer ul { | ||
+ | list-style: none; | ||
+ | margin-left:0px; | ||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #menuContainer ul li { | ||
+ | text-align: center; | ||
+ | display: inline; | ||
+ | width: 100%; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | } | ||
+ | |||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #menuContainer li:hover { | ||
+ | color: #FFF; | ||
+ | background-color: #24B694; | ||
+ | } | ||
+ | |||
+ | /*Submenus are not displayed as default*/ | ||
+ | #menuContainer li ul { | ||
+ | display: none; | ||
+ | padding-top:15px; | ||
+ | margin-left: -19px; | ||
+ | } | ||
+ | |||
+ | /*Submenus are displayed when hovering the menu button */ | ||
+ | #menuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:none; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
+ | |||
+ | /*Style the submenu buttons*/ | ||
+ | #menuContainer li ul li{ | ||
+ | background-color: #59BF92; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | margin-top:-2px; | ||
+ | color: #565656; | ||
+ | width: 150px; | ||
+ | } | ||
/*CLASSES */ | /*CLASSES */ | ||
Line 155: | Line 343: | ||
<p>You can make the image 980px by 200px</p> | <p>You can make the image 980px by 200px</p> | ||
<p> Remember to call the file: "<i>Team_Sydney_Australia_banner.jpg</i>" </p> | <p> Remember to call the file: "<i>Team_Sydney_Australia_banner.jpg</i>" </p> | ||
+ | </div> | ||
+ | <!-- Start of menu --> | ||
+ | <div id="menuContainer"> | ||
+ | <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia"><li>HOME</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Team"><li>TEAM</li></a> | ||
− | + | <a href="#"><li>PROJECT | |
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Description"><li>Description</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Experiments"><li>Experiments & Protocols</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Results"><li>Results</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Design"><li>Design</li></a> | ||
+ | </ul> | ||
+ | </li></a> | ||
− | + | <a href="#"><li>PARTS | |
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Parts"><li>Team Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Basic_Part"><li>Basic Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Composite_Part"><li>Composite Parts</li></a> | ||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Part_Collection"><li>Part Collection</li></a> | ||
+ | </ul> | ||
+ | </li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Notebook"><li>NOTEBOOK</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Attributions"><li>ATTRIBUTIONS</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Collaborations"><li>COLLABORATIONS</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Practices"><li>HUMAN PRACTICES</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Safety"><li>SAFETY</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Modeling"><li>MODELING</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Measurement"><li>MEASUREMENT</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Software"><li>SOFTWARE</li></a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:Sydney_Australia/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <nav> | ||
+ | <ul> | ||
+ | <li><a href="#">Home</a></li> | ||
+ | <li><a href="#">Tutorials</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Photoshop</a></li> | ||
+ | <li><a href="#">Illustrator</a></li> | ||
+ | <li><a href="#">Web Design</a> | ||
+ | <ul> | ||
+ | <li><a href="#">HTML</a></li> | ||
+ | <li><a href="#">CSS</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Articles</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Web Design</a></li> | ||
+ | <li><a href="#">User Experience</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Inspiration</a></li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
<!-- End of menu --> | <!-- End of menu --> | ||
Revision as of 11:42, 21 July 2015