Difference between revisions of "Template:Fudan-CHINA"

Line 1: Line 1:
 
<html>
 
<html>
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
 +
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
</p>
 
</p>
 
 
Line 246: Line 247:
 
</script>   
 
</script>   
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
+
+
 
+
 
+
 
+
+
 
+
+
<!--make the menu hidden-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
<script>
+
$(document).ready(function(){
+
  $('#sideMenu').remove();
+
  let trigger = document.createElement('div');
+
$(trigger).attr('id','menu-trigger');
+
let menu = document.getElementById('top_menu_14');
+
  $(trigger).mouseenter(function(){
+
$(menu).css('top','0');
+
  });
+
  $(trigger).mouseleave(function(){
+
    $(menu).css('top','-20px');
+
  });
+
  document.body.appendChild(trigger);
+
});
+
</script>
+
+
+
+
<style>
+
+
#top_menu_14{
+
  top: -20px; padding-bottom: 2px; transition: top 0.3s;
+
}
+
#top_menu_14:hover {
+
    top: 0 !important;
+
}
+
#menu-trigger{
+
  width:100%;
+
  height:16px;
+
  position:fixed;
+
  left:0;
+
  top:0;
+
  z-index:10;
+
}
+
#HQ_page ul.navigation-bar > li > ul.sub-menu > li{
+
  min-width: 100px;
+
}
+
#HQ_page ul.navigation-bar > li > ul > li.long{
+
  min-width: 160px;
+
}
+
</style>
+
--------------------------------------------------------------------------------------------------------------------------------------------------->
+
+
+
+
 
 
  
 
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
+
+
+
+
 
<ul id="navUl" style="z-index: 999;">
 
<ul id="navUl" style="z-index: 999;">
 
<li class="navLi navImg" style="display: inline-block;float: left;width: 3%;" href="#8"></li>
 
<li class="navLi navImg" style="display: inline-block;float: left;width: 3%;" href="#8"></li>
Line 313: Line 258:
 
<li class="navLi" style="display: inline-block;width: 3%;" href="#8"></li>
 
<li class="navLi" style="display: inline-block;width: 3%;" href="#8"></li>
 
   <li class="navLi"><a class="navA" href="#7">Team</a></li>
 
   <li class="navLi"><a class="navA" href="#7">Team</a></li>
<li class="navLi"><a class="navA" href="#6">Parts</a></li>
+
<li class="navLi"><a class="navA" href="#6">Awards</a></li>
<li class="navLi"><a class="navA" href="#5">Practices</a></li>
+
<li class="navLi"><a class="navA" href="#5">HP</a></li>
<li class="navLi"><a class="navA" href="#4">Lab</a></li>
+
<li class="navLi"><a class="navA" href="#4">Modeling</a></li>
<li class="navLi"><a class="navA" href="#3">Modeling</a></li>
+
 
<li class="navLi"><a class="navA" href="#2">Project</a></li>
 
<li class="navLi"><a class="navA" href="#2">Project</a></li>
 
 
</ul>
 
</ul>
 
<style>
 
<style>
Line 371: Line 314:
 
</style>
 
</style>
 
<script>
 
<script>
 
 
function navFun(){
 
function navFun(){
 
var winWidth=$(window).width();
 
var winWidth=$(window).width();
Line 385: Line 327:
 
$(".teamImg").css("width","5vh");
 
$(".teamImg").css("width","5vh");
 
$(".teamImg").css("height","5vh");
 
$(".teamImg").css("height","5vh");
$(".teamImg").css("padding","1.5vh 0");
+
$(".teamImg").css("padding","1.5vh 0");
+
 
}
 
}
 
else{
 
else{
Line 397: Line 338:
 
$(".teamImg").css("height","2.5vw");
 
$(".teamImg").css("height","2.5vw");
 
$(".teamImg").css("padding","0.75vw 0");
 
$(".teamImg").css("padding","0.75vw 0");
 
 
}
 
}
 
 
};
 
};
 
navFun();
 
navFun();

Revision as of 12:44, 25 September 2018