Added mobile responsiveness to nav
This commit is contained in:
parent
3b95a02639
commit
f14aa45ee2
@ -88,14 +88,10 @@ html {
|
||||
|
||||
.nav-container .menu-btn:checked ~ .nav-menu {
|
||||
max-height: 300px;
|
||||
background-color: rgb(24, 24, 24);
|
||||
background-color: rgba(24, 24, 24, 0.988);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:not(:checked) ~ .nav-menu {
|
||||
animation: slow-fade 1s ease;
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:checked ~ .menu-icon .navicon {
|
||||
background: transparent;
|
||||
}
|
||||
@ -145,6 +141,9 @@ html {
|
||||
#sign-up {
|
||||
right: 50px !important;
|
||||
}
|
||||
.nav-container .menu-btn:not(:checked) ~ .nav-menu {
|
||||
animation: slow-fade 1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
@ -1478,11 +1477,42 @@ li .splide__pagination__page.is-active {
|
||||
.button-close-modal {
|
||||
display: block;
|
||||
float: right;
|
||||
color: white;
|
||||
background-color: unset;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin: 5px 10px 0 0;
|
||||
margin-right: 5px;
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 15px 20px 10px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-close-modal:before,
|
||||
.button-close-modal:after {
|
||||
background: rgb(200, 200, 200);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: all .2s ease-out;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.button-close-modal:hover {
|
||||
transform: scale(1.2);
|
||||
filter: brightness(1.1);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.button-close-modal:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.button-close-modal:after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#modal-overlay {
|
||||
|
22
index.html
22
index.html
@ -87,7 +87,7 @@
|
||||
<span id="timer">---</span></div>
|
||||
</p>
|
||||
</div>
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<input class="menu-btn" onclick="CheckNavOpen()" type="checkbox" id="menu-btn"/>
|
||||
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||
<ul class="nav-menu">
|
||||
<li><a class="navlink" onclick="uncheck('menu-btn')" href="#event">Event</a></li>
|
||||
@ -402,7 +402,7 @@
|
||||
</div>
|
||||
<div id="modal-overlay">
|
||||
<div class="modal logistics-border" id="check-in">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header logistics">
|
||||
<h2>Check In</h2>
|
||||
</div>
|
||||
@ -413,7 +413,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal logistics-border" id="opening-ceremony">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header logistics">
|
||||
<h2>Opening Ceremony</h2>
|
||||
</div>
|
||||
@ -428,7 +428,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal hacking-border" id="hacking-starts">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header hacking">
|
||||
<h2>Hacking starts</h2>
|
||||
</div>
|
||||
@ -447,7 +447,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal food-border" id="lunch">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header food">
|
||||
<h2>Lunch</h2>
|
||||
</div>
|
||||
@ -458,7 +458,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal workshop-border" id="workshop1">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header workshop">
|
||||
<h2>Web Dev Workshop</h2>
|
||||
</div>
|
||||
@ -469,7 +469,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal workshop-border" id="workshop2">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header workshop">
|
||||
<h2>[REDACTED] Workshop</h2>
|
||||
</div>
|
||||
@ -480,7 +480,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal game-border" id="activity1">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header game">
|
||||
<h2>Kahoot</h2>
|
||||
</div>
|
||||
@ -491,7 +491,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal hacking-border" id="hacking-ends">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header hacking">
|
||||
<h2>Hacking ends</h2>
|
||||
</div>
|
||||
@ -509,7 +509,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal logistics-border" id="project-presentations">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header logistics">
|
||||
<h2>Project Presentations</h2>
|
||||
</div>
|
||||
@ -529,7 +529,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal logistics-border" id="judging">
|
||||
<button class="button-close-modal">x</button>
|
||||
<button class="button-close-modal"></button>
|
||||
<div class="modal-header logistics">
|
||||
<h2>Judging</h2>
|
||||
</div>
|
||||
|
@ -411,6 +411,7 @@ function showModal(id) {
|
||||
currentModal = id;
|
||||
}
|
||||
|
||||
// Check if user clicks outside of modal
|
||||
document.addEventListener(
|
||||
"click",
|
||||
function (event) {
|
||||
@ -425,6 +426,30 @@ document.addEventListener(
|
||||
false
|
||||
);
|
||||
|
||||
var openNavClick = false;
|
||||
var nav_is_open = false;
|
||||
function CheckNavOpen() {
|
||||
if (document.getElementById('menu-btn').checked == true) {
|
||||
nav_is_open = true;
|
||||
openNavClick = true;
|
||||
}
|
||||
}
|
||||
// Check if user clicks outside of navbar menu
|
||||
document.addEventListener(
|
||||
"click",
|
||||
function (event) {
|
||||
// If user either clicks X button OR clicks outside the modal window, then close modal
|
||||
if (!openNavClick && nav_is_open == true) {
|
||||
if (event.target.matches(".menu-btn") || !event.target.closest(".nav-container")) {
|
||||
uncheck('menu-btn');
|
||||
nav_is_open = false;
|
||||
}
|
||||
}
|
||||
openNavClick = false;
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
var splide = new Splide( '.splide', {
|
||||
type : 'loop',
|
||||
focus : 'center',
|
||||
|
Loading…
Reference in New Issue
Block a user