Difference between revisions of "Template:CSU CHINA"

Line 16: Line 16:
 
     <!-- HiCharts -->
 
     <!-- HiCharts -->
 
     <script src="https://2019.igem.org/wiki/index.php?title=Template:XJTLU-CHINA/highcharts.js&action=raw&ctype=text/javascript"></script>
 
     <script src="https://2019.igem.org/wiki/index.php?title=Template:XJTLU-CHINA/highcharts.js&action=raw&ctype=text/javascript"></script>
 +
 +
    <style>
 +
   
 +
    </style>
 
</head>
 
</head>
  
Line 21: Line 25:
 
     <style>
 
     <style>
 
         #navigator{ margin-top: 16px; }
 
         #navigator{ margin-top: 16px; }
 +
        #navigator:hover{ background-color: #212529;}
 
         #navigator .navbar-brand img{ height: 45px; }
 
         #navigator .navbar-brand img{ height: 45px; }
 
         #navigator a{ font-size: 16px; }
 
         #navigator a{ font-size: 16px; }
 +
        #navigator a:hover{ color: white;}
 +
        .trans{ background-color: rgba(0, 0, 0, 0.1); }
 +
 
         #top_title{ display:none; }
 
         #top_title{ display:none; }
 
         #content{
 
         #content{
Line 36: Line 44:
 
     </style>
 
     </style>
 
        
 
        
       
 
 
     <nav class="navbar navbar-expand-lg navbar-dark py-0 fixed-top bg-dark" id="navigator" >
 
     <nav class="navbar navbar-expand-lg navbar-dark py-0 fixed-top bg-dark" id="navigator" >
         <a class="navbar-brand py-0" href="#">
+
         <a class="navbar-brand py-0" href="/Team:CSU_CHINA">
 
                 <img src="https://static.igem.org/mediawiki/2019/c/ca/T--CSU_CHINA--LOGOWITHWORDS.png" alt="logo">
 
                 <img src="https://static.igem.org/mediawiki/2019/c/ca/T--CSU_CHINA--LOGOWITHWORDS.png" alt="logo">
 
         </a>
 
         </a>
Line 46: Line 53:
 
         <div class="collapse navbar-collapse" id="collapsibleNavId">
 
         <div class="collapse navbar-collapse" id="collapsibleNavId">
 
             <ul class="navbar-nav ml-md-auto ">
 
             <ul class="navbar-nav ml-md-auto ">
                 <li class="nav-item active">
+
                 <li class="nav-item">
                     <a class="nav-link" href="#">HOME</a>
+
                     <a class="nav-link" href="/Team:CSU_CHINA">HOME</a>
 
                 </li>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
                 <li class="nav-item dropdown">
Line 98: Line 105:
 
     <script>
 
     <script>
 
         $(document).ready(function() {
 
         $(document).ready(function() {
 +
            //标识当前页面
 +
            switch($(document).attr("title"))
 +
            {
 +
                case "HOME":            $("a:contains('HOME')").addClass("active"); break;
 +
                case "DESCRIPTION":
 +
                case "DESIGN":
 +
                case "DEMONSTRATION":
 +
                case "PROJECT":        $("a:contains('PROJECT')").addClass("active"); break;
 +
                case "BASIC PARTS":
 +
                case "COMPOSITE PARTS":
 +
                case "IMPROVED PARTS":
 +
                case "PARTS":          $("a:contains('PARTS')").addClass("active"); break;
 +
                case "MODELING":        $("a:contains('MODELING')").addClass("active"); break;
 +
                case "INTERGRATED":
 +
                case "PUBLIC ENGAGEMENT":
 +
                case "HUMAN PRACTICES": $("a:contains('HUMAN PRACTICES')").addClass("active"); break;
 +
                case "SAFETY":          $("a:contains('SAFETY')").addClass("active"); break;
 +
                case "LAB":            $("a:contains('LAB')").addClass("active"); break;
 +
                case "COLLABORATIONS":
 +
                case "ATTRIBUTIONS":   
 +
                case "TEAM MEMBERS":
 +
                case "TEAM":            $("a:contains('TEAM')").addClass("active"); break;   
 +
            }
 +
            // 下拉展开
 
             $(".dropdown").hover(function() {
 
             $(".dropdown").hover(function() {
 
                 $('.dropdown-menu', this).slideToggle("fast");
 
                 $('.dropdown-menu', this).slideToggle("fast");
 +
            });
 +
            // 滚动渐隐
 +
            $(window).scroll(function(){
 +
                if ($(document).scrollTop() > 50)
 +
                    $("#navigator").removeClass("bg-dark").addClass("trans");
 +
                else
 +
                    $("#navigator").removeClass("trans").addClass("bg-dark");
 
             });
 
             });
 
         });
 
         });

Revision as of 13:58, 17 October 2019