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

 
(6 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Fluent&action=raw&ctype=text/css" />
 
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Fluent&action=raw&ctype=text/css" />
  
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/FontAwesome&action=raw&ctype=text/css" />
+
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/FontAwesome&action=raw&ctype=text/css" />
  
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Custom&action=raw&ctype=text/css" />
+
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Custom&action=raw&ctype=text/css" />
  
  
Line 66: Line 66:
 
}
 
}
 
body{
 
body{
−
padding-top: 50px;
+
padding-top: 40px;
 
}
 
}
 
h2 h3 h4 {
 
h2 h3 h4 {
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 99: Line 99:
 
         <div class="collapse navbar-collapse" id="navbarExample">
 
         <div class="collapse navbar-collapse" id="navbarExample">
 
             <ul class="navbar-nav ml-auto">
 
             <ul class="navbar-nav ml-auto">
 +
                <li class="nav-item dropdown">
 +
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
 +
                        aria-haspopup="true" aria-expanded="false">
 +
                        Awards
 +
                    </a>
 +
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied
 +
                            Design</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human
 +
                            Practices</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Public
 +
                            Engagement</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Model">Model</a>
 +
 +
                    </div>
 +
                </li>
  
 
                 <li class="nav-item dropdown">
 
                 <li class="nav-item dropdown">
Line 167: Line 184:
 
                             ">Applet</a>
 
                             ">Applet</a>
 
                 </li>
 
                 </li>
−
                <li class="nav-item dropdown">
 
−
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
 
−
                        aria-haspopup="true" aria-expanded="false">
 
−
                        Awards
 
−
                    </a>
 
−
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a>
 
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied Design</a>
 
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
 
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Public Engagement</a>
 
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Model">Applied Design</a>
 
  
−
                    </div>
 
−
                </li>
 
 
             </ul>
 
             </ul>
  
−
            <script>
+
           
−
                //hover to dropdown
+
<style>
−
 
+
.dropdown:hover .dropdown-menu {
−
 
+
    display: block;
−
 
+
    margin-top: 0; // remove the gap so it doesn't close
−
              //$('.dropdown').hover(function () {
+
}
−
                //    $('.dropdown-toggle', this).trigger('click');
+
</style>
−
              // });
+
<!--
−
 
+
<script>
−
                // Add slideDown animation to Bootstrap dropdown when expanding.
+
−
                $('.dropdown').on('show.bs.dropdown', function () {
+
−
                    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
+
$('.dropdown').hover(function() {
−
                });
+
$('.dropdown-toggle', this).trigger('click');
 +
});
  
−
                // Add slideUp animation to Bootstrap dropdown when collapsing.
+
// Add slideDown animation to Bootstrap dropdown when expanding.
−
                $('.dropdown').on('hide.bs.dropdown', function () {
+
$('.dropdown').on('show.bs.dropdown', function() {
−
                    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
+
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
−
                });
+
});
−
                //scrollspy
+
−
                $('body').scrollspy({
+
−
                    target: '#myScrollspy',
+
−
                    offset: 10
+
−
                });
+
−
                //smoothscroll
+
−
                var scroll = new SmoothScroll('a[href*="#"]');
+
−
            </script>
+
  
 +
// Add slideUp animation to Bootstrap dropdown when collapsing.
 +
$('.dropdown').on('hide.bs.dropdown', function() {
 +
$(this).find('.dropdown-menu').first().stop(true, true).deslideUp();
 +
});
 +
</script>
 +
-->
 
         </div>
 
         </div>
 
     </nav>
 
     </nav>

Latest revision as of 14:09, 11 October 2018