Difference between revisions of "Template:Fudan-CHINA"

(Replaced content with "{{Fudan-CHINA/initialize}} {{Fudan-CHINA/mainNav}}")
 
(83 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
+
{{Fudan-CHINA/initialize}}
<script>
+
{{Fudan-CHINA/mainNav}}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
$(document).ready(function() {
+
 
+
$("#HQ_page").attr('id','');
+
+
 
+
//highlight current page on the menu
+
highlight_current_page_menu();
+
+
//accessing submenus
+
$(".menu_item").click(function(){
+
$(".submenu_control_icon", this).toggleClass("open");
+
$(this).next(".submenu").fadeToggle(400);
+
});
+
+
//mobile menu access
+
$(".igem_2018_team_mobile_bar").click(function(){
+
$(this).next().toggleClass("displaying_menu");
+
});
+
+
});
+
 
+
 
+
function highlight_current_page_menu() {
+
+
var page_url="https://2018.igem.org/";
+
page_url = page_url + wgPageName;
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
+
//if the page is in a submenu, open the submenu and make the appropiate changes
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
+
$(".current_page").parent().parent().fadeToggle(400);
+
$(".current_page").parent().parent().prev().addClass("current_page");
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
+
}
+
}
+
 
+
 
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
</script>
+
 
+
<style>
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/**************************************************************************************************************************************************************************************************/
+
/* MENU */
+
/**************************************************************************************************************************************************************************************************/
+
 
+
/*this wraps the whole of the menu*/
+
.igem_2018_team_menu {
+
background-color:#c4baba;
+
border-left: 1px solid #c4baba;
+
display:block;
+
float:right;
+
height:100vh;
+
max-width: 270px;
+
overflow-y: auto;
+
overflow-x: hidden;
+
padding:0px;
+
position:fixed;
+
right:0%;
+
text-align:left;
+
width: 15%;
+
}
+
 
+
 
+
.igem_2018_team_menu.displaying_menu{
+
display:block;
+
}
+
 
+
.igem_2018_team_menu  a {
+
color: #484848;
+
text-decoration:none;
+
}
+
 
+
.igem_2018_team_menu img {
+
width:100%;
+
}
+
 
+
 
+
.igem_2018_team_menu .menu_item {
+
    background-color: #c4baba;
+
    border-bottom: 1px solid #928b8b;
+
    clear: both;
+
color: #484848;
+
    cursor: pointer;
+
float: left;
+
    font-size: 120%;
+
    font-weight: bold;
+
    padding: 15px 0px 15px 5%;
+
  width: 100%;
+
}
+
 
+
.igem_2018_team_menu .menu_item.direct_link {
+
color: #484848;
+
padding-left: 15%;
+
}
+
.igem_2018_team_menu .menu_item:hover {
+
background-color: #ecb656;
+
}
+
 
+
 
+
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
color: #484848;
+
float: left;
+
width: 10%;
+
}
+
 
+
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
content: "+";
+
}
+
 
+
/* submenu icon "+"  "-"*/
+
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
content: "-";
+
}
+
 
+
/*submenu wrapper*/
+
.igem_2018_team_menu .submenu{
+
background-color: #e4dede;
+
clear:both;
+
display:none;
+
float: left; 
+
width:100%;
+
}
+
 
+
/*styling for a submenu item*/
+
.igem_2018_team_menu .submenu .submenu_item {
+
border-bottom: 1px solid #c4baba;
+
  color: #635d5d;
+
    height: 30px;
+
  float: left;
+
    font-size: 110%;
+
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
 
+
.igem_2018_team_menu .submenu .submenu_item:hover {
+
background-color: #f3bd5d;
+
}
+
 
+
 
+
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
.igem_2018_team_menu .menu_item.current_page,
+
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
background-color:#7acbd8;
+
}
+
 
+
    .submenu{
+
width: 240px;
+
margin-left: 20px;
+
margin-right: -40px;
+
margin-top: -10px;
+
    }
+
+
    .submenu ul{
+
        width:240px;
+
 
+
    }
+
    .submenu li{
+
width: 220px;
+
margin-left: -20px;
+
margin-top: -10px;
+
    }
+
       
+
nav {
+
    width: 1920px;
+
     
+
    text-align:center;
+
   
+
}
+
    nav:link{
+
    color:#666666;   
+
    }
+
nav ul {
+
border-radius: 0px;
+
padding: 0 20px;
+
display: block;
+
position: fixed;
+
background-color: #adadad;
+
top: 15px;
+
}
+
nav ul ul {
+
    display:none;
+
}
+
nav ul li {
+
    float:left;
+
    font-size: 20px;
+
    line-height: 50px;
+
 
+
}
+
nav ul::after {
+
    content:"";
+
    display:block;
+
    clear:both;
+
}
+
nav ul li a {
+
display: block;
+
width: 220px;
+
color: #666666;
+
text-decoration: none;
+
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;   
+
}
+
nav ul li:hover > ul {
+
    display:block;
+
}
+
nav ul li:hover {
+
background:#5f6975;
+
}
+
nav ul li:hover a {
+
    color:#FFF;
+
}
+
nav ul ul {
+
    background:#5f6975;
+
    border-radius:0;
+
    position:absolute;
+
    top:100%;
+
    padding:0;
+
   
+
 
+
}
+
nav ul ul li {
+
    float:none;
+
 
+
 
+
}
+
nav ul ul li a {
+
    color:#FFF;
+
+
nav ul ul li a:hover {
+
    background:#4b545f;
+
}
+
nav ul ul ul {
+
    width:100%;
+
    position:absolute;
+
    left:100%;
+
    top:50%;
+
}
+
 
+
ul li{
+
list-style: none;
+
width: 240px;
+
padding: 0;
+
margin-top: 0px;
+
margin-right: 0px;
+
margin-left: 0px;
+
}
+
 
+
 
+
 
+
</style>
+
 
+
 
+
<head>
+
<style type="text/css">
+
a:link {color: #666666}  
+
a:visited {color: #666666}  
+
a:hover {color: #666666}
+
a:active {color: #666666}
+
ul.nav{
+
width: 999999px;
+
margin-left: -27px;
+
    }
+
 
+
</style>
+
+
</head>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--- Content of the page  --->
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
 
+
<div class="nav">
+
<nav>
+
        <ul class="nav">
+
            <li><a href="https://2018.igem.org/Team:Fudan-CHINA">
+
                  <div class="menu_item direct_link">
+
                      HOME
+
                  </div>
+
                  </a>
+
 
+
            </li>
+
            <li><a href="#">TEAM</a>
+
                <ul>
+
                  <div class="submenu">
+
                    <li>                      <a href="https://2018.igem.org/Team:Fudan-CHINA/Team">
+
                      <div class="submenu_item">
+
                        Team Members
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Collaborations">
+
                      <div class="submenu_item">
+
                        Collaborations
+
                      </div>
+
                      </a></li>
+
                    </div>
+
                 
+
                </ul>
+
           
+
            </li>
+
            <li><a href="#"><div class="menu_item">
+
 
+
                      PROJECT
+
                    </div>  </a>
+
                <ul>
+
                  <div class="submenu">
+
                 
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Description">
+
                      <div class="submenu_item">
+
                        Description
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Design">
+
                      <div class="submenu_item">
+
                        Design
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Experiments">
+
                      <div class="submenu_item">
+
                        Experiments
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Notebook">
+
                      <div class="submenu_item">
+
                        Notebook
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/InterLab">
+
                      <div class="submenu_item">
+
                        InterLab
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Model">
+
                      <div class="submenu_item">
+
                        Model
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Results">
+
                      <div class="submenu_item">
+
                        Results
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Demonstrate">
+
                      <div class="submenu_item">
+
                        Demonstrate
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Improve">
+
                      <div class="submenu_item">
+
                        Improve
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Attributions">
+
                      <div class="submenu_item">
+
                        Attributions
+
                      </div>
+
                      </a></li>
+
                    </div>
+
 
+
                </ul>
+
            </li>
+
            <li><a href="#"><div class="menu_item">
+
           
+
                    PARTS
+
                    </div></a>
+
                <ul>
+
                  <div class="submenu">
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Parts">
+
                      <div class="submenu_item">
+
                        Parts Overview
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Basic_Part">
+
                      <div class="submenu_item">
+
                        Basic Parts
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Composite_Part">
+
                      <div class="submenu_item">
+
                        Composite Parts
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Part_Collection">
+
                      <div class="submenu_item">
+
                        Part Collection
+
                      </div>
+
                      </a></li>
+
                    </div>
+
                </ul>
+
            </li>
+
            <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Safety"><div class="menu_item direct_link">
+
                    SAFETY
+
                  </div></a></li>
+
            <li><a href="#"><div class="menu_item">
+
             
+
                    HP
+
                    </div></a>
+
                <ul>
+
                  <div class="submenu">
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Human_Practices">
+
                      <div class="submenu_item">
+
                        Human Practices
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Public_Engagement">
+
                      <div class="submenu_item">
+
                        Education & Engagement
+
                      </div>
+
                      </a></li>
+
                    </div>
+
                </ul>
+
               
+
            </li>
+
                        <li><a href="#"><div class="menu_item">
+
 
+
                    AWARDS
+
                    </div> </a>
+
                <ul>
+
                  <div class="submenu">
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Applied_Design">
+
                      <div class="submenu_item">
+
                        Applied Design
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Entrepreneurship">
+
                      <div class="submenu_item">
+
                        Entrepreneurship
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Hardware">
+
                      <div class="submenu_item">
+
                        Hardware
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Measurement">
+
                      <div class="submenu_item">
+
                        Measurement
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Model">
+
                      <div class="submenu_item">
+
                        Model
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Plant">
+
                      <div class="submenu_item">
+
                        Plant
+
                      </div>
+
                      </a></li>
+
                    <li><a href="https://2018.igem.org/Team:Fudan-CHINA/Software">
+
                      <div class="submenu_item">
+
                        Software
+
                      </div>
+
                      </a></li>
+
                    </div>
+
                </ul>
+
                <li><a href="https://igem.org/2018_Judging_Form?team=Fudan-CHINA"><div class="menu_item direct_link">
+
                    JUDGING FORM
+
                  </div></a></li>
+
            </li>
+
        </ul>
+
    </nav>
+
    </div>
+
 
+
</html>
+

Latest revision as of 08:58, 17 October 2018