Difference between revisions of "Template:USTC-Software/html/header"

(fix bottom)
(remove responsive)
Line 31: Line 31:
 
     .more:hover > span {transform: rotate(0deg);}
 
     .more:hover > span {transform: rotate(0deg);}
 
     .more > span {transition: all .4s; }
 
     .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 {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 ul {display: flex; flex-direction: column; align-items: center;}
Line 115: Line 111:
 
                     </li> -->
 
                     </li> -->
 
                 </ul>
 
                 </ul>
−
            </div>
 
−
            <div class="menu_icon" id="menu_icon">
 
−
                <img src="https://static.igem.org/mediawiki/2019/d/d2/T--USTC-Software--menu.svg" alt="" srcset="">
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
  
−
         <div class="slide_menu" id="slide_menu">
+
          
−
            <ul class="slide_menu_item">
+
−
                <li class="slide_team_menu more">TEAM<span></span>
+
−
                    <div class="slide_info" id="team_menu_item">
+
−
                        <ul>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Team">Team Members</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Collaborations">Collaborations</a></li>
+
−
                        </ul>
+
−
                    </div>
+
−
                </li>
+
−
                <li class="slide_project_menu more">PROJECT<span></span>
+
−
                    <div class="slide_info" id="project_menu_item">
+
−
                        <ul>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Description">Description</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Design">Design</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Model">Model</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Contribution">Contribution</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/ResultsContribution">Results</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Demonstrate">Demonstrate</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Improve">Improve</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Attributions">Attributions</a></li>
+
−
                        </ul>
+
−
                    </div>
+
−
                </li>
+
−
                <li><a href="https://2019.igem.org/Team:USTC-Software/Safety">SAFETY</a></li>
+
−
                <li class="slide_human_practice_menu more">HUMAN PRACTICE<span></span>
+
−
                    <div class="slide_info" id="human_practice_menu_item">
+
−
                        <ul>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Human_Practices">Human Practices</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Public_Engagement">Education & Engagement</a></li>
+
−
                        </ul>
+
−
                    </div>
+
−
                </li>
+
−
                <li><a href="https://2019.igem.org/Team:USTC-Software/Awards">AWARDS</a></li>
+
−
                <!-- <li class="slide_awards_menu more">AWARDS<span></span>
+
−
                    <div class="slide_info" id="awards_menu_item">
+
−
                        <ul>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Entrepreneurship">Entrepreneurship</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Hardware">Hardware</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Measurement">Measurement</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Model">Model</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Plant">Plant</a></li>
+
−
                            <li><a href="https://2019.igem.org/Team:USTC-Software/Software">Software</a></li>
+
−
                        </ul>
+
−
                    </div>
+
−
                </li> -->
+
−
            </ul>
+
−
        </div>
+
 
     </nav>
 
     </nav>
 
</div>
 
</div>
  
−
<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>
 
  
 
</html>
 
</html>

Revision as of 19:02, 21 October 2019