Difference between revisions of "Template:SZU-China/Nav"

 
(One intermediate revision by the same user not shown)
Line 87: Line 87:
  
 
     <!-- Navbar -->
 
     <!-- Navbar -->
−
     <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary ">
+
     <nav class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: #212529;">
 
         <a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
 
         <a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
 
             <img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
 
             <img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
Line 187: Line 187:
 
             </ul>
 
             </ul>
  
−
            <script>
+
           
−
                //hover to dropdown
+
<style>
 +
.dropdown:hover .dropdown-menu {
 +
    display: block;
 +
    margin-top: 0; // remove the gap so it doesn't close
 +
}
 +
</style>
 +
<!--
 +
<script>
 +
 +
 +
$('.dropdown').hover(function() {
 +
$('.dropdown-toggle', this).trigger('click');
 +
});
  
 +
// Add slideDown animation to Bootstrap dropdown when expanding.
 +
$('.dropdown').on('show.bs.dropdown', function() {
 +
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
 +
});
  
−
 
+
// Add slideUp animation to Bootstrap dropdown when collapsing.
−
                //$('.dropdown').hover(function () {
+
$('.dropdown').on('hide.bs.dropdown', function() {
−
                //    $('.dropdown-toggle', this).trigger('click');
+
$(this).find('.dropdown-menu').first().stop(true, true).deslideUp();
−
                // });
+
});
−
 
+
</script>
−
                // Add slideDown animation to Bootstrap dropdown when expanding.
+
-->
−
                $('.dropdown').on('show.bs.dropdown', function () {
+
−
                    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
+
−
                });
+
−
 
+
−
                // Add slideUp animation to Bootstrap dropdown when collapsing.
+
−
                $('.dropdown').on('hide.bs.dropdown', function () {
+
−
                    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
+
−
                });
+
−
                //scrollspy
+
−
                $('body').scrollspy({
+
−
                    target: '#myScrollspy',
+
−
                    offset: 10
+
−
                });
+
−
                //smoothscroll
+
−
                var scroll = new SmoothScroll('a[href*="#"]');
+
−
            </script>
+
−
 
+
 
         </div>
 
         </div>
 
     </nav>
 
     </nav>

Latest revision as of 14:09, 11 October 2018