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

Line 1: Line 1:
−
{{NAU-CHINA/ResetCSS}}
+
 
 
<html>
 
<html>
 
<head>
 
<head>
−
<script>
+
<script
−
   src="https://2018.igem.org/wiki/index.php?title=NAU-CHINA/jQuery&action=raw&ctype=text/javascript"  
+
   src="https://code.jquery.com/jquery-3.3.1.js"
 +
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
 +
  crossorigin="anonymous"> 
 
</script>
 
</script>
 
<style type="text/css">
 
<style type="text/css">
Line 9: Line 11:
  
 
body {
 
body {
−
    font-family: 'Goudy Old Style Regular',sans-serif !important;
+
  margin: 0;
−
 
+
  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 27: Line 24:
 
     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 63: Line 44:
 
     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 79: Line 54:
 
     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 106: Line 61:
 
     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 183: Line 128:
  
 
<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) {
+
    //导航背景变色+下滑方法
−
        $(this).css({"background-color":"#f0f0f0"});
+
    $(".menu > ul > li").hover(function () {
−
        $(this).children("ul").stop(true, false).slideToggle(300);
+
      $(this).css({"background-color":"#f0f0f0"});
−
          e.preventDefault();
+
      $(this).children("ul").stop(true, false).slideToggle(300);
−
      });
+
    });
−
      $(".menu > ul > li").mouseleave(function (e) {
+
    //背景颜色还原+下拉菜单消失
−
        $(this).css({"background-color":"#fff"});
+
    $(".menu > ul > li").mouseleave(function () {
−
        $(this).children("ul").hide();
+
      $(this).css({"background-color":"#fff"});
−
        e.preventDefault();
+
      $(this).children("ul").hide();
−
      });
+
    });
 
   });
 
   });
 
</script>
 
</script>

Revision as of 08:05, 3 October 2018