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

 
(21 intermediate revisions by the same user not shown)
Line 7: Line 7:
  
 
     <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/Custom&action=raw&ctype=text/css" />
  
  
Line 54: Line 58:
 
     width: 160px !important;
 
     width: 160px !important;
 
    
 
    
−
}
 
−
 
−
body {
 
−
font-family: 'Segoe UI', sans-serif !important;
 
−
font-weight: 400;
 
−
}
 
−
 
−
@font-face {
 
−
font-family: 'Segoe UI';
 
−
src: url('https://static.igem.org/mediawiki/2018/b/b8/T--SZU-China--segoeui.ttf');
 
 
}
 
}
  
  
 
#HQ_page p{
 
#HQ_page p{
−
font-size: 18px
+
font-size: 20px;
 +
color: #393939;
 
}
 
}
 
body{
 
body{
−
padding-top: 50px;
+
padding-top: 40px;
 
}
 
}
 +
h2 h3 h4 {
 +
font-weight: bold;
 +
}
 +
 +
.row {
 +
padding: 36px;
 +
}
 +
hr {
 +
width: auto;
 +
border-top: 1px solid rgba(0, 0, 0, 0.125);
 +
}
  
 
     </style>
 
     </style>
Line 81: 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://mdbootstrap.com/img/logo/mdb-transparent.png" height="20" 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">
−
             <span class="d-inline-block align-top ml-2">SZU-China</span>
+
             <span class="d-inline-block ml-2"><b>SZU-China</b></span>
 
         </a>
 
         </a>
 
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample"
 
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample"
Line 93: 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 161: 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">
 
−
                        Judging
 
−
                    </a>
 
−
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
−
                        <a class="dropdown-item" href="https://igem.org/2018_Judging_Form?team=SZU-China">Form</a>
 
−
                        <a class="dropdown-item" href="https://2018.igem.org/Team:SZU-China/Software
 
−
                                ">Awards</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
−
              $('li.nav-item.dropdown.show').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