Difference between revisions of "Template:Hong Kong-CUHK"
Angellukpy25 (Talk | contribs) |
|||
Line 1: | Line 1: | ||
{{Template_All_Teams}} | {{Template_All_Teams}} | ||
− | |||
<!-- Declare that you are going to use html code instead of wiki code --> | <!-- Declare that you are going to use html code instead of wiki code --> | ||
<html> | <html> | ||
+ | <!-- Start of CSS--> | ||
+ | <style type="text/css"> | ||
+ | /* PAGE LAYOUT */ | ||
+ | |||
+ | |||
+ | /* Change Background color*/ | ||
+ | |||
+ | body { | ||
+ | background-color: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Creates a container that will wrap all of the content inside your wiki pages. */ | ||
+ | |||
+ | #mainContainer { | ||
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | margin-left: 20px; | ||
+ | margin-bottom: 10px; | ||
+ | background-color: #fff; | ||
+ | border-bottom: 14px solid #565656; | ||
+ | border-right: 2px solid #565656; | ||
+ | border-left: 2px solid #565656; | ||
+ | border-top: 2px solid #565656; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Creates the container for the menu */ | ||
+ | |||
+ | #menuContainer { | ||
+ | float: left; | ||
+ | width: 134px; | ||
+ | padding: 20px 0px; | ||
+ | border-top: 14px solid #565656; | ||
+ | background-color: #E8E8E9; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Creates the container for the content */ | ||
+ | |||
+ | #contentContainer { | ||
+ | padding-top: 20px; | ||
+ | padding-right: 10px; | ||
+ | margin-bottom: 20px; | ||
+ | width: 814px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | background-color: #fff; | ||
+ | border-top: 14px solid #565656; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Set up height place holder for the banner*/ | ||
+ | |||
+ | #bannerContainer { | ||
+ | height: 400px; | ||
+ | margin: auto; | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | color: #24B694; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/archive/9/98/20150719150030%21Team_Hong_Kong-CUHK_banner.jpg'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | #mainContainer, #bannerContainer { | ||
+ | width: 978px; | ||
+ | } | ||
+ | |||
+ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
+ | |||
+ | |||
+ | /*Change the styling of text for everything inside main container*/ | ||
+ | |||
+ | #mainContainer p { | ||
+ | font-size: 13px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*This changes the color and font family */ | ||
+ | |||
+ | #contentContainer h1, | ||
+ | h2, | ||
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6 { | ||
+ | color: #565656; | ||
+ | border-bottom: none; | ||
+ | font-weight: bold; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Style of the links - links are different inside the menu */ | ||
+ | |||
+ | #contentContainer a { | ||
+ | font-weight: bold; | ||
+ | color: #23b593; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Styling links on hover- links are different inside the menu */ | ||
+ | |||
+ | #contentContainer a:hover { | ||
+ | color: #59bf92; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Change the styling of tables */ | ||
+ | |||
+ | #contentContainer table { | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | width: 90% margin: auto; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Change the styling of table cells*/ | ||
+ | |||
+ | #contentContainer td { | ||
+ | padding: 10px; | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Change the styling of table headers */ | ||
+ | |||
+ | #contentContainer th { | ||
+ | background-color: #E8E8E9; | ||
+ | padding: 10px; | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*MENU STYLING */ | ||
+ | |||
+ | |||
+ | /*Styling for the links in the menu */ | ||
+ | |||
+ | #menuContainer a { | ||
+ | color: #565656; | ||
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* 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: block; | ||
+ | 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: right; | ||
+ | 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 */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*Clear class for all the pages, adds spacing too*/ | |
− | + | .clear { | |
− | + | clear: both; | |
− | + | height: 10px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* highlight box for special messages */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | .highlightBox { | |
− | + | width: 500px; | |
− | + | margin: auto; | |
− | + | background-color: #E8E8E9; | |
− | + | margin-bottom: 15px; | |
− | + | margin-top: 15px; | |
− | + | padding: 15px; | |
− | + | padding-top: 5px; | |
− | + | } | |
− | + | </style> | |
− | + | <style type="text/css"> | |
− | + | #colorNav { | |
− | + | display: block; | |
− | + | opacity: 0.9; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #colorNav > ul { | |
− | + | width: 540px; | |
− | + | /* Increase when adding more menu items */ | |
− | + | margin: 0 auto; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
+ | #colorNav > ul > li { | ||
+ | /* will style only the top level li */ | ||
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | line-height: 1; | ||
+ | margin: 1px; | ||
+ | border-radius: 3px; | ||
+ | position: relative; | ||
+ | } | ||
+ | #colorNav > ul > li > a { | ||
+ | color: inherit; | ||
+ | text-decoration: none !important; | ||
+ | font-size: 24px; | ||
+ | display: block; | ||
+ | height: 100%; | ||
+ | } | ||
− | + | #colorNav li ul { | |
+ | position: absolute; | ||
+ | list-style: none; | ||
+ | text-align: center; | ||
+ | width: 180px; | ||
+ | margin-left: -90px; | ||
+ | top: 70px; | ||
+ | font: bold 12px 'Open Sans Condensed', sans-serif; | ||
+ | /* This is important for the show/hide CSS animation */ | ||
+ | max-height: 0px; | ||
+ | overflow: hidden; | ||
+ | -webkit-transition: max-height 0.4s linear; | ||
+ | -moz-transition: max-height 0.4s linear; | ||
+ | transition: max-height 0.4s linear; | ||
+ | } | ||
− | + | #colorNav li ul li { | |
− | + | background-color: #313131; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #colorNav li ul li a { | |
− | + | padding: 12px; | |
− | + | color: #fff !important; | |
− | + | text-decoration: none !important; | |
− | + | display: block; | |
+ | } | ||
− | + | #colorNav li ul li:nth-child(odd) { | |
− | + | /* zebra stripes */ | |
− | + | background-color: #363636; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #colorNav li ul li:hover { | |
− | + | background-color: #444; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | #colorNav li ul li:first-child { | |
− | + | border-radius: 3px 3px 0 0; | |
− | + | margin-top: 25px; | |
− | + | position: relative; | |
− | + | } | |
− | + | ||
− | + | #colorNav li ul li:first-child:before { | |
− | + | /* the pointer tip */ | |
− | + | content: ''; | |
− | + | position: absolute; | |
− | + | width: 1px; | |
− | + | height: 1px; | |
− | + | border: 5px solid transparent; | |
− | + | border-bottom-color: #313131; | |
− | + | left: 50%; | |
+ | top: -10px; | ||
+ | margin-left: -5px; | ||
+ | } | ||
− | + | #colorNav li ul li:last-child { | |
− | + | border-bottom-left-radius: 3px; | |
− | + | border-bottom-right-radius: 3px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | + | /* This will trigger the CSS */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* transition animation on hover */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | #colorNav li:hover ul { | ||
+ | max-height: 200px; | ||
+ | /* Increase when adding more dropdown items */ | ||
+ | } | ||
− | |||
− | |||
+ | /*---------------------------- | ||
+ | Color Themes | ||
+ | -----------------------------*/ | ||
− | + | #colorNav > ul > li { | |
− | + | width: 80px; | |
+ | height: 80px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: contain; | ||
+ | } | ||
+ | </style> | ||
+ | <!-- End of CSS --> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | var bannerMenuData = [ | ||
+ | { | ||
+ | "title": "Home", | ||
+ | "bg-image": "https://placehold.it/80x80/0092C7/000000", | ||
+ | "bg-image-hover": "https://placehold.it/80x80/F3E59A/000000", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Team", | ||
+ | "bg-image": "https://placehold.it/80x80/0092C7/000000", | ||
+ | "bg-image-hover": "https://placehold.it/80x80/F3E59A/000000", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Team" | ||
+ | }, | ||
+ | { | ||
+ | "title": "????", | ||
+ | "bg-image": "https://placehold.it/80x80/0092C7/000000", | ||
+ | "bg-image-hover": "https://placehold.it/80x80/F3E59A/000000", | ||
+ | "items": [ | ||
+ | { | ||
+ | "title": "Description", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Description" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Experiments & Protocols", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Experiments" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Results", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Results" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Design", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Design" | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | "title": "Parts", | ||
+ | "bg-image": "https://placehold.it/80x80/0092C7/000000", | ||
+ | "bg-image-hover": "https://placehold.it/80x80/F3E59A/000000", | ||
+ | "items": [ | ||
+ | { | ||
+ | "title": "Team Parts", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Parts" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Basic Parts", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Basic_Part" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Composite Parts", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Composite_Part" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Part Collection", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Part_Collection" | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | "title": "Notebook", | ||
+ | "bg-image": "https://placehold.it/80x80/0092C7/000000", | ||
+ | "bg-image-hover": "https://placehold.it/80x80/F3E59A/000000", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Notebook" | ||
+ | }, | ||
+ | { | ||
+ | "title": "Attributions", | ||
+ | "bg-image": "https://placehold.it/80x80/0092C7/000000", | ||
+ | "bg-image-hover": "https://placehold.it/80x80/F3E59A/000000", | ||
+ | "link": "https://2015.igem.org/Team:Hong_Kong-CUHK/Attributions" | ||
+ | } | ||
+ | ]; | ||
− | + | var bannerMenuList = $('#colorNav ul'); | |
− | + | ||
− | + | ||
− | + | ||
− | + | bannerMenuData.forEach(function(data) { | |
+ | var listItem = $('<li>'); | ||
− | + | // Add background images | |
− | + | listItem.css('background-image', "url(" + data['bg-image'] + ")"); | |
+ | listItem.hover(function() { | ||
+ | listItem.css('background-image', "url(" + data['bg-image-hover'] + ")"); | ||
+ | }, function() { | ||
+ | listItem.css('background-image', "url(" + data['bg-image'] + ")"); | ||
+ | }); | ||
− | + | bannerMenuList.append(listItem); | |
− | + | console.log(data); | |
− | + | ||
− | + | // Insert link | |
+ | var link = $('<a>'); | ||
+ | if (data.link !== undefined) { | ||
+ | link.attr('href', data.link); | ||
+ | listItem.append(link); | ||
+ | } | ||
− | + | // Insert drop down list | |
− | + | if ($.isArray(data.items)) { | |
− | + | var subMenuList = $('<ul>'); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | data.items.forEach(function(item) { | |
− | + | if (item.title !== undefined) { | |
− | + | var subMenuItem = $('<li>'); | |
− | + | var subMenuItemLink = $('<a>'); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | subMenuItemLink.text(item.title); | |
− | + | ||
− | + | ||
− | + | var link = "#"; | |
+ | if (item.link !== undefined) { | ||
+ | link = item.link; | ||
+ | } | ||
+ | subMenuItemLink.attr('href', link); | ||
− | + | subMenuItem.append(subMenuItemLink); | |
− | + | subMenuList.append(subMenuItem); | |
− | + | console.log(subMenuItem); | |
− | + | } | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | listItem.append(subMenuList); | |
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
− | |||
− | + | <!-- Start of the template html elements. --> | |
+ | <div id="mainContainer"> | ||
+ | <!--The closing tag for mainContainer should be placed at the bottom of each content page.--> | ||
+ | <div id="bannerContainer"> | ||
+ | <nav id="colorNav"> | ||
+ | <ul></ul> | ||
+ | </nav> | ||
+ | </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:Hong_Kong-CUHK"> | ||
+ | <li>HOME</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Team"> | ||
+ | <li>TEAM</li> | ||
+ | </a> | ||
+ | <a href="#"> | ||
+ | <li>PROJECT | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Description"> | ||
+ | <li>Description</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Experiments"> | ||
+ | <li>Experiments & Protocols</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Results"> | ||
+ | <li>Results</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Design"> | ||
+ | <li>Design</li> | ||
+ | </a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </a> | ||
+ | <a href="#"> | ||
+ | <li>PARTS | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Parts"> | ||
+ | <li>Team Parts</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Basic_Part"> | ||
+ | <li>Basic Parts</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Composite_Part"> | ||
+ | <li>Composite Parts</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Part_Collection"> | ||
+ | <li>Part Collection</li> | ||
+ | </a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Notebook"> | ||
+ | <li>NOTEBOOK</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Attributions"> | ||
+ | <li>ATTRIBUTIONS</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Collaborations"> | ||
+ | <li>COLLABORATIONS</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Practices"> | ||
+ | <li>HUMAN PRACTICES</a> | ||
+ | <ul> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Workshop"> | ||
+ | <li>Workshop</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Questionnaire"> | ||
+ | <li>Questionnaire</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Presentation"> | ||
+ | <li>Presentation</li> | ||
+ | </a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Safety"> | ||
+ | <li>SAFETY</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Modeling"> | ||
+ | <li>MODELING</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Measurement"> | ||
+ | <li>MEASUREMENT</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Software"> | ||
+ | <li>SOFTWARE</li> | ||
+ | </a> | ||
+ | <a href="https://2015.igem.org/Team:Hong_Kong-CUHK/Entrepreneurship"> | ||
+ | <li>ENTREPRENEURSHIP</li> | ||
+ | </a> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!-- End of menu --> | ||
+ | <!-- Start of content --> | ||
+ | <div id="contentContainer"> | ||
+ | <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 20:16, 27 August 2015