Difference between revisions of "Team:Imperial College/Templates/NavBar"
| Line 27: | Line 27: | ||
}); | }); | ||
} | } | ||
| + | |||
| + | (function($) { // Begin jQuery | ||
| + | $(function() { // DOM ready | ||
| + | // If a link has a dropdown, add sub menu toggle. | ||
| + | $('nav ul li a:not(:only-child)').click(function(e) { | ||
| + | $(this).siblings('.nav-dropdown').toggle(); | ||
| + | // Close one dropdown when selecting another | ||
| + | $('.nav-dropdown').not($(this).siblings()).hide(); | ||
| + | e.stopPropagation(); | ||
| + | }); | ||
| + | // Clicking away from dropdown will remove the dropdown class | ||
| + | $('html').click(function() { | ||
| + | $('.nav-dropdown').hide(); | ||
| + | }); | ||
| + | // Toggle open and close nav styles on click | ||
| + | $('#nav-toggle').click(function() { | ||
| + | $('nav ul').slideToggle(); | ||
| + | }); | ||
| + | // Hamburger to X toggle | ||
| + | $('#nav-toggle').on('click', function() { | ||
| + | this.classList.toggle('active'); | ||
| + | }); | ||
| + | }); // end DOM ready | ||
| + | })(jQuery); // end jQuery | ||
</script> | </script> | ||
| Line 120: | Line 144: | ||
color: #24305E; | color: #24305E; | ||
cursor: pointer; | cursor: pointer; | ||
| − | |||
padding: 18px; | padding: 18px; | ||
width: 100%; | width: 100%; | ||
| Line 128: | Line 151: | ||
font-size: 27px; | font-size: 27px; | ||
transition: 0.4s; | transition: 0.4s; | ||
| − | border-radius: | + | border-radius: 20px; |
} | } | ||
| Line 206: | Line 229: | ||
text-align:center; | text-align:center; | ||
background-color:white; | background-color:white; | ||
| − | |||
} | } | ||
nav ul { | nav ul { | ||
| − | + | margin:0; | |
list-style: none; | list-style: none; | ||
padding: 0; | padding: 0; | ||
| Line 225: | Line 247: | ||
nav a, a:visited { | nav a, a:visited { | ||
| − | |||
padding: 0 15px 0; | padding: 0 15px 0; | ||
line-height: 50px; | line-height: 50px; | ||
| Line 240: | Line 261: | ||
dropdown-menu ul li { | dropdown-menu ul li { | ||
| − | |||
min-width: 190px; | min-width: 190px; | ||
} | } | ||
| Line 249: | Line 269: | ||
} | } | ||
dropdown-item :hover{ | dropdown-item :hover{ | ||
| − | |||
color: rgb(248, 59, 122); | color: rgb(248, 59, 122); | ||
text-shadow: lightpink ; | text-shadow: lightpink ; | ||
| + | |||
} | } | ||
.dropdown-menu { | .dropdown-menu { | ||
position: absolute; | position: absolute; | ||
| − | display: | + | display: none; |
z-index: 1; | z-index: 1; | ||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); | box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); | ||
| Line 263: | Line 283: | ||
#navbarDropdown{ | #navbarDropdown{ | ||
text-decoration: none; | text-decoration: none; | ||
| − | |||
} | } | ||
/* Mobile navigation */ | /* Mobile navigation */ | ||
| Line 283: | Line 302: | ||
nav{ | nav{ | ||
| − | |||
width:100%; | width:100%; | ||
height:auto; | height:auto; | ||
| Line 291: | Line 309: | ||
z-index: 40; | z-index: 40; | ||
} | } | ||
| + | nav ul{ | ||
| + | display: none; | ||
| + | } | ||
| + | |||
a{ | a{ | ||
text-decoration: none; | text-decoration: none; | ||
| − | |||
| − | |||
} | } | ||
.nav-list{ | .nav-list{ | ||
margin: auto; | margin: auto; | ||
| − | display: | + | display: block !important; |
| − | + | ||
} | } | ||
| Line 374: | Line 393: | ||
margin: auto; | margin: auto; | ||
padding: 20px; | padding: 20px; | ||
| − | margin-top: | + | margin-top: 12%; |
font-size: 70px; | font-size: 70px; | ||
background-color:none; | background-color:none; | ||
| Line 411: | Line 430: | ||
} | } | ||
| − | |||
h5{ | h5{ | ||
text-align: left; | text-align: left; | ||
| Line 531: | Line 549: | ||
<ul class="dropdown-menu"> | <ul class="dropdown-menu"> | ||
<li><a href="https://2018.igem.org/Team:Imperial_College/Human_Practices">OVERVIEW</a></li> | <li><a href="https://2018.igem.org/Team:Imperial_College/Human_Practices">OVERVIEW</a></li> | ||
| − | |||
<li><a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a></li> | <li><a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a></li> | ||
<li><a href="https://2018.igem.org/Team:Imperial_College/Public_Engagement">OUTREACH</a></li> | <li><a href="https://2018.igem.org/Team:Imperial_College/Public_Engagement">OUTREACH</a></li> | ||
<li><a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a></li> | <li><a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a></li> | ||
Revision as of 13:42, 14 October 2018
