Difference between revisions of "Template:NAU-CHINA/header"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script
+
<script>
−
   src="https://code.jquery.com/jquery-3.3.1.js"
+
   src="https://2018.igem.org/wiki/index.php?title=NAU-CHINA/jQuery&action=raw&ctype=text/javascript"  
−
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+
−
  crossorigin="anonymous"> 
+
 
</script>
 
</script>
 
<style type="text/css">
 
<style type="text/css">
Line 11: Line 9:
  
 
body {
 
body {
−
  margin: 0;
+
    font-family: 'Goudy Old Style Regular',sans-serif !important;
−
  font-family: 'Goudy Old Style Regular',sans-serif !important;
+
 
−
  font-size: 13px !important;
+
}
 +
 
 +
* {
 +
    box-sizing: border-box;
 +
}
 +
 
 +
a:link,a:visited {
 +
    color: black !important;
 
}
 
}
  
−
* {box-sizing: border-box;}
 
  
−
a:link,a:visited {color: black !important;}
 
  
 
.menu-container {
 
.menu-container {
Line 24: Line 27:
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     padding-right: 30px;
 
     padding-right: 30px;
 +
    /*background: #e9e9e9;*/
 
}
 
}
  
  
 
.menu > ul {
 
.menu > ul {
 +
    margin: 0 auto;
 +
    width: 100%;
 
     list-style: none;
 
     list-style: none;
 
     padding: 0;
 
     padding: 0;
 
     position: relative;
 
     position: relative;
 +
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
 +
    box-sizing: border-box;
 +
}
 +
 +
.menu > ul:before,
 +
.menu > ul:after {
 +
    content: "";
 +
    display: table;
 +
}
 +
 +
.menu > ul:after {
 +
    clear: both;
 
}
 
}
  
 
.menu > ul > li {
 
.menu > ul > li {
 
     float: right;
 
     float: right;
 +
    /*background: #e9e9e9;*/
 
     padding: 0;
 
     padding: 0;
 
     margin: 0;
 
     margin: 0;
Line 44: Line 63:
 
     display: block;
 
     display: block;
 
}
 
}
−
 
+
/*
 +
.menu > ul > li:hover {
 +
    background: #f0f0f0;
 +
    transition: linear 0.5s;
 +
}
 +
*/
 
.menu > ul > li > ul {
 
.menu > ul > li > ul {
 
     display: none;
 
     display: none;
 
     width: 100%;
 
     width: 100%;
 
     background-color: whitesmoke;
 
     background-color: whitesmoke;
 +
    /*padding: 20px;*/
 
     position: absolute;
 
     position: absolute;
 
     z-index: 99;
 
     z-index: 99;
Line 54: Line 79:
 
     margin: 0;
 
     margin: 0;
 
     list-style: none;
 
     list-style: none;
 +
    box-sizing: border-box;
 
}
 
}
  
 +
.menu > ul > li > ul:before,
 +
.menu > ul > li > ul:after {
 +
    content: "";
 +
    display: table;
 +
}
 +
 +
.menu > ul > li > ul:after {
 +
    clear: both;
 +
}
 +
 +
 +
 +
.menu > ul > li > ul > li a {
 +
    color: #777;
 +
    /*padding: .2em 0;*/
 +
    width: 100%;
 +
    display: block;
 +
    border-bottom: 1px solid #ccc;
 +
}
  
 
.menu > ul > li > ul.normal-sub {
 
.menu > ul > li > ul.normal-sub {
Line 61: Line 106:
 
     left: auto;
 
     left: auto;
 
     padding: 10px 20px;
 
     padding: 10px 20px;
 +
}
 +
 +
.menu > ul > li > ul.normal-sub:before {
 +
    width: 40px;
 +
 +
}
 +
 +
.menu > ul > li > ul.normal-sub > li {
 +
    width: 100%;
 
}
 
}
  
 
.menu > ul > li > ul.normal-sub > li a {
 
.menu > ul > li > ul.normal-sub > li a {
 +
    border: 0;
 
     padding: 1em 0;
 
     padding: 1em 0;
 
}
 
}
Line 128: Line 183:
  
 
<script>
 
<script>
 +
 
   $(document).ready(function () {
 
   $(document).ready(function () {
−
    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
+
      $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
−
    //导航背景变色+下滑方法
+
      $(".menu > ul > li").hover(function (e) {
−
    $(".menu > ul > li").hover(function () {
+
        $(this).css({"background-color":"#f0f0f0"});
−
      $(this).css({"background-color":"#f0f0f0"});
+
        $(this).children("ul").stop(true, false).slideToggle(300);
−
      $(this).children("ul").stop(true, false).slideToggle(300);
+
          e.preventDefault();
−
    });
+
      });
−
    //背景颜色还原+下拉菜单消失
+
      $(".menu > ul > li").mouseleave(function (e) {
−
    $(".menu > ul > li").mouseleave(function () {
+
        $(this).css({"background-color":"#fff"});
−
      $(this).css({"background-color":"#fff"});
+
        $(this).children("ul").hide();
−
      $(this).children("ul").hide();
+
        e.preventDefault();
−
    });
+
      });
 
   });
 
   });
 
</script>
 
</script>

Revision as of 08:07, 3 October 2018