Template:USTC-Software/html/Header

<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:USTC-Software/css/default?action=raw&ctype=text/css" /> <link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:USTC-Software/css/bootstrap?action=raw&ctype=text/css" /> <script type="text/javascript" src="https://2019.igem.org/Template:USTC-Software/js/jquery?action=raw&ctype=text/javascript"></script> <script type="text/javascript" src="https://2019.igem.org/Template:USTC-Software/js/popper?action=raw&ctype=text/javascript"></script> <script type="text/javascript" src="https://2019.igem.org/Template:USTC-Software/js/bootstrap?action=raw&ctype=text/javascript"></script> <link rel="stylesheet" href="../css/common.css"> <style type="text/css"> 

   .header {width: 100%}
   .top_menu {display: flex}
   .logo {padding: 1em}
   .menu {width: 100%;}
   .menu_list {display: flex; justify-content: flex-end; color: #248ea9; width: 100%;}
   .menu_list li {display: inline-block;  position: relative;}
   .menu_list li a {color: #248ea9; }
   .menu_list li a:hover {color: #ffd24a; }
   .menu_list > li:hover {color: #ffd24a; cursor: pointer;}
   .menu_item {padding: 1em;}
   .menu_item div {z-index: 1000; background: rgba(255, 255, 255, .5);}
   .menu_icon {display: none}
   .menu_icon > img {width: 2em; height: 2em; padding-top: .75em}
   .more > span {display: inline-block; width: 1em; height: 1em; background-image: url('https://static.igem.org/mediawiki/2019/0/0a/T--USTC-Software--slide_down.svg'); background-position: -18px; background-size: cover; transform: rotate(-90deg);}
   .more:hover > span {transform: rotate(0deg);}
   .more > span {transition: all .4s; }
   @media screen and (max-width: 800px) {
       .menu {display: none}
       .menu_icon {display: block; position: absolute; right: 1em}
   }
   .info_menu_item {font-size: .9em; width: 140px; position: absolute; display: block; border: 1px solid #dddddd; border-radius: 3px; visibility: hidden;opacity: 0; transition: all .3s; }
   .info_menu_item ul {display: flex; flex-direction: column; align-items: center;}
   .info_menu_item li {padding: .3em}
   .info_menu_item li a {color: #248ea9}
   .info_menu_item li a:hover {color: #ffd24a}
   .team_menu > .info_menu_item {left: -1.6em}
   .project_menu > .info_menu_item {left: -1.1em}
   .parts_menu > .info_menu_item {left: -1.2em}
   .human_practice_menu > .info_menu_item {left: 1.5em}
   .awards_menu > .info_menu_item {left: -0.8em}

   .more:hover > .info_menu_item {display: block; opacity: 1; visibility: visible;}

   .slide_menu {display: none; background-color: #2196F3; width: 100%;}
   .slide_menu_item > li > span {display: inline-block; width: 1em; height: 1em; background-image: url('https://static.igem.org/mediawiki/2019/f/f4/T--USTC-Software--Slide_down_white.svg'); background-position: center; background-size: cover; transition: all .3s; transform: rotate(-90deg);}
   .slide_menu_item > li {text-align: center; padding: .2em; color: aliceblue; }
   .slide_menu_item > li:hover { color: aqua; cursor: pointer;}
   .slide_menu_item > li:hover > i{ transform: rotate(0deg);}
   .slide_info {display: none;}
   .slide_info li {color: aliceblue; margin-top: .5em;}
   .slide_info li > a {color: aliceblue;}
   .slide_info li:hover {color: aqua;}
   .slide_info li:hover > a {color: aqua;}

</style> 

   <nav class="header">

   </nav>

<script> $('#menu_icon').on('click', function(){ 

   console.log('hello');
   $('#slide_menu').slideToggle(250)

}); $('.slide_menu li.more').on('click', function(){ 

   $(this).children('div.slide_info').slideToggle(250);

}); </script>