Difference between revisions of "Template:Fudan-TSI"

m
(edited by Ehtele 20191001)
Line 1: Line 1:
 +
 
<html>
 
<html>
−
<script>
+
<head>
−
////////////////////////////////////////////////////////////////////////////////
+
−
$(document).ready(function() {
+
−
$("#HQ_page").attr('id','');
+
  
−
//highlight current page on the menu
+
−
highlight_current_page_menu();
+
 +
</head>
 +
 +
<script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/jQuery&action=raw&ctype=text/javascript"></script>
  
−
//accessing submenus
+
<body>
−
$(".menu_item").click(function(){
+
−
$(".submenu_control_icon", this).toggleClass("open");
+
−
$(this).next(".submenu").fadeToggle(400);
+
<!---- js代码基本确定，css存在几处bug未修，鉴于已到ddl因此先上传，细节修改在之后。 ---->
−
});
+
 +
 +
<div class="mobileBar">
 +
 +
<div class="logoMobile">
 +
<img id="logoMobile" src="https://static.igem.org/mediawiki/2019/3/3c/T--Fudan-TSI--Logo0.gif">
 +
<div id="teamName">Fudan-TSI</div>
 +
</div>
 +
 +
<div class="menuControlMobile">
 +
<img id="menu_control_image" src="https://static.igem.org/mediawiki/2019/e/ee/2019_team_menu_icon.svg">
 +
</div>
 +
 +
</div>
 +
 +
<div class="menu">
 +
<div class="logo">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI">
 +
<img id="logo" src="https://static.igem.org/mediawiki/2019/3/3c/T--Fudan-TSI--Logo0.gif">
 +
</a>
 +
</div>
 +
 +
<div class="Menu">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI">
 +
<div class="menuItem">Home</div>
 +
</a>
 +
</div>
 +
 +
<div class="Menu">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI/Description">
 +
<div class="menuItem">Project</div>
 +
</a>
 +
<div class="submenu">
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Description">
 +
<div class="submenuItem">Description</div>
 +
</a>
  
−
//mobile menu access
+
<a href="https://2019.igem.org/Team:Fudan-TSI/Design">
−
$(".igem_2018_team_mobile_bar").click(function(){
+
<div class="submenuItem">Design</div>
−
$(this).next().toggleClass("displaying_menu");
+
</a>
−
});
+
  
−
});
+
<a href="https://2019.igem.org/Team:Fudan-TSI/Design">
 +
<div class="submenuItem">Applied Design</div>
 +
</a>
  
−
function highlight_current_page_menu() {
+
<a href="https://2019.igem.org/Team:Fudan-TSI/Experiment">
−
var page_url="https://2018.igem.org/";
+
<div class="submenuItem">Experiment</div>
−
page_url = page_url + wgPageName;
+
</a>
−
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
</div>
−
+
</div>
−
//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>
+
<div class="Menu">
−
/*****************************************************************************/
+
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI/Results">
−
/* DEFAULT WIKI SETTINGS */
+
<div class="menuItem">Results</div>
−
/*****************************************************************************/
+
</a>
−
#home_logo, #sideMenu { display:none; }
+
<div class="submenu">
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
<a href="https://2019.igem.org/Team:Fudan-TSI/Results/Reverse_Transcription">
−
#content { margin-left: 0; padding:0px; width:100%;}
+
<div class="submenuItem">Reverse Transcription</div>
−
body {background-color:white; }
+
</a>
−
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
−
</style>
+
  
−
<!---------------------------------------------------------------------------->
+
<a href="https://2019.igem.org/Team:Fudan-TSI/Results/Recombination">
−
<!-- THIS IS WHERE THE HTML BEGINS -->
+
<div class="submenuItem">Recombination</div>
−
<!---------------------------------------------------------------------------->
+
</a>
  
−
<!-- LC 2019-8-30 above, required to clear the page -->
+
<a href="https://2019.igem.org/Team:Fudan-TSI/Demonstrate">
−
<!-- 2019-9-1 topNav here will not show all pages, eg /Attributions vs /Description https://static.igem.org/mediawiki/2019/3/3c/T--Fudan-TSI--Logo0.gif -->
+
<div class="submenuItem">Demonstration</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Measurement">
 +
<div class="submenuItem">Measurement</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Notebook">
 +
<div class="submenuItem">Notebook</div>
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div class="Menu">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI/Model_Software">
 +
<div class="menuItem">Model</div>
 +
</a>
 +
<div class="submenu">
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Model">
 +
<div class="submenuItem">Modeling</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Software">
 +
<div class="submenuItem">Software</div>
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<div class="Menu">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI/Parts">
 +
<div class="menuItem">Parts</div>
 +
</a>
 +
<div class="submenu">
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Basic_Part">
 +
<div class="submenuItem">Basic Parts</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Composite_Part">
 +
<div class="submenuItem">Composite Parts</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Improve">
 +
<div class="submenuItem">Improved Parts</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Part_Collection">
 +
<div class="submenuItem">Part Collection</div>
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
 
 +
 
 +
<div class="Menu">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI/Human_Practices">
 +
<div class="menuItem">Human Practices</div>
 +
</a>
 +
<div class="submenu">
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Public_Engagement">
 +
<div class="submenuItem">Education &amp; <br />Public Engagement</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Integrated_Human_Practice">
 +
<div class="submenuItem">Integrated <br />Human Practice</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Collaborations">
 +
<div class="submenuItem">Collaboration</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Safety">
 +
<div class="submenuItem">Safety</div>
 +
</a>
 +
</div>
 +
</div>
 +
 +
 
 +
<div class="Menu">
 +
<a class="mA" href="https://2019.igem.org/Team:Fudan-TSI/Team">
 +
<div class="menuItem">Team</div>
 +
</a>
 +
<div class="submenu">
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Team">
 +
<div class="submenuItem">Team Members</div>
 +
</a>
 +
 
 +
<a href="https://2019.igem.org/Team:Fudan-TSI/Team/Attribution">
 +
<div class="submenuItem">Attribution</div>
 +
</a>
 +
</div>
 +
</div>
 +
 +
</div>
 +
 +
 +
<style>
 +
body{
 +
margin:0;
 +
overflow:hidden;
 +
}
 +
a{
 +
text-decoration:none;
 +
}
 +
.mobileBar{
 +
height:60px;
 +
width:100%;
 +
background-color:#08273a;
 +
display:none;
 +
}
 +
#menu_control_image{
 +
display:none;
 +
float:right;
 +
margin-right:5%;
 +
margin-top:0;
 +
transform:translateY(-95%);
 +
}
 +
#logoMobile{
 +
display:none;
 +
margin-left:30%;
 +
}
 +
#teamName{
 +
display:none;
 +
font-size:40px;
 +
margin-left:2%;
 +
margin-top:10px;
 +
color:white;
 +
}
 +
 +
 
 +
/*links & images*/
 +
.mobileBar a{
 +
color:white;
 +
text-decoration:none;
 +
}
 +
.mobileBar img{
 +
float:left;
 +
height:60px;
 +
}
 +
 +
/*menu items*/
 +
.menu{
 +
width:100%;
 +
height:60px;
 +
background-color:#08273a;
 +
position:fixed;
 +
}
 +
.logo{
 +
display:inline-block;
 +
margin-left:30px;
 +
top:0;
 +
}
 +
#logo{
 +
height:40px;
 +
margin-top:13px;
 +
margin-right:200px;
 +
}
 +
.Menu{
 +
display:inline-block;
 +
height:60px;
 +
text-align:center;
 +
}
 +
.mA{
 +
height:60px;
 +
width:auto;
 +
display:block;
 +
position:relative;
 +
float:left;
 +
color:white;
 +
text-align:center;
 +
text-decoration:none;
 +
font-size:25px;
 +
}
 +
.menuItem{
 +
margin-top:20px;
 +
margin-left:40px;
 +
}
 +
.menuItem:hover{
 +
color:aqua;
 +
}
 +
.submenu{
 +
font-size:20px;
 +
color:white;
 +
position:absolute;
 +
margin-top:60px;
 +
text-align:center;
 +
display:none;
 +
background-color:#08273a;
 +
border-bottom-left-radius:10px;
 +
border-bottom-right-radius:10px;
 +
}
 +
.submenuItem{
 +
width:auto;
 +
overflow:hidden;
 +
color:white;
 +
padding:10px 20px;
 +
}
 +
.submenuItem:hover{
 +
color:black;
 +
background-color:white;
 +
opacity:0.5;
 +
}
 +
</style>
 +
 +
<style>
 +
@media only screen and (max-width:1100px){
 +
.menu{
 +
display:none;
 +
float:right;
 +
max-width:100%;
 +
width:30%;
 +
position:relative;
 +
height:auto;
 +
}
 +
.mobileBar{
 +
display:block;
 +
overflow:hidden;
 +
}
 +
#logoMobile{
 +
display:block;
 +
height:80px;
 +
}
 +
#teamName{
 +
display:inline-block;
 +
}
 +
#menu_control_image{
 +
display:inline-block;
 +
}
 +
.logo{
 +
display:none;
 +
}
 +
.Menu{
 +
display:block;
 +
width:100%;
 +
position:relative;
 +
float:right;
 +
}
 +
.menuItem{
 +
width:100%;
 +
text-align:right;
 +
display:block;
 +
position:relative;
 +
float:right;
 +
}
 +
.submenu{
 +
display:none;
 +
position:relative;
 +
text-align:right;
 +
transform:translateX(-100%);
 +
top:-60px;
 +
border-radius:0;
 +
width:60%;
 +
}
 +
.open{
 +
display:block;
 +
}
 +
}
 +
@media only screen and (max-width:850px){
 +
.mobileBar{
 +
height:100px;
 +
display:block;
 +
 +
}
 +
.Menu{
 +
width:40%;
 +
font-size:80px;
 +
}
 +
.submenu{
 +
top:-8%;
 +
font-size:70px;
 +
}
 +
}
 +
 +
</style>
 +
 +
 
 +
<script>
 +
 +
$(document).ready(function(){
 +
var winWidth=$(window).width();
 +
if (winWidth>1100){
 +
$(".Menu").mouseenter(function(){
 +
$(this).find(".submenu").show();
 +
});
 +
$(".Menu").mouseleave(function(){
 +
$(this).find(".submenu").hide();
 +
});
 +
}
 +
else{
 +
$(".mA").removeAttr("href");
 +
$(".mobileBar").click(function(){
 +
$(".menu").toggle();
 +
})
 +
$(".Menu").click(function(){
 +
if ($(this).find(".submenu").hasClass("open")){
 +
$(this).find(".submenu").removeClass("open");
 +
}
 +
else{
 +
$(".open").removeClass("open");
 +
$(this).find(".submenu").addClass("open");
 +
}
 +
})
 +
$(document).click(function(event){
 +
var m = $(".menu, .mobileBar");
 +
if (!m.is(event.target) && m.has(event.target).length===0){
 +
$(".menu").hide();
 +
$(".open").removeClass("open");
 +
}
 +
})
 +
}
 +
 +
})
 +
 +
 +
</script>
 +
 +
 +
</body>
 +
</html>

Revision as of 16:12, 30 September 2019

Fudan-TSI
<div class="menuItem">Home</div>
<div class="menuItem">Project</div>
<div class="submenuItem">Description</div> <div class="submenuItem">Design</div> <div class="submenuItem">Applied Design</div> <div class="submenuItem">Experiment</div>
<div class="menuItem">Results</div>
<div class="submenuItem">Reverse Transcription</div> <div class="submenuItem">Recombination</div> <div class="submenuItem">Demonstration</div> <div class="submenuItem">Measurement</div> <div class="submenuItem">Notebook</div>
<div class="menuItem">Model</div>
<div class="submenuItem">Modeling</div> <div class="submenuItem">Software</div>
<div class="menuItem">Parts</div>
<div class="submenuItem">Basic Parts</div> <div class="submenuItem">Composite Parts</div> <div class="submenuItem">Improved Parts</div> <div class="submenuItem">Part Collection</div>
<div class="menuItem">Human Practices</div>
<div class="submenuItem">Education &
Public Engagement</div> <div class="submenuItem">Integrated
Human Practice</div> <div class="submenuItem">Collaboration</div> <div class="submenuItem">Safety</div>
<div class="menuItem">Team</div>
<div class="submenuItem">Team Members</div> <div class="submenuItem">Attribution</div>