Updated nav menu
This commit is contained in:
James Dinh
parent
f891c2bdf7
commit
4ff1578841
214
css/general.css
214
css/general.css
@ -18,6 +18,138 @@ html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* menu */
|
||||
|
||||
.nav-container .nav-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
clear: none;
|
||||
float: right;
|
||||
max-height: none;
|
||||
margin-right: 110px;
|
||||
}
|
||||
|
||||
.nav-container .nav-menu li {
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
margin: 10px 7px;
|
||||
padding: 3px 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* menu icon */
|
||||
|
||||
.nav-container .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-container .menu-icon .navicon {
|
||||
background: rgb(123, 123, 123);
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
transition: background .2s ease-out;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.nav-container .menu-icon .navicon:before,
|
||||
.nav-container .menu-icon .navicon:after {
|
||||
background: rgb(123, 123, 123);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all .2s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-container .menu-icon .navicon:before {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.nav-container .menu-icon .navicon:after {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
/* menu btn */
|
||||
|
||||
.nav-container .menu-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:checked ~ .nav-menu {
|
||||
max-height: 300px;
|
||||
background-color: rgb(24, 24, 24);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:not(:checked) ~ .nav-menu {
|
||||
animation: slow-fade 1s ease;
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:checked ~ .menu-icon .navicon {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:checked ~ .menu-icon .navicon:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:checked ~ .menu-icon .navicon:after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
|
||||
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@keyframes slow-fade {
|
||||
0% {
|
||||
background-color: rgb(24, 24, 24);
|
||||
}
|
||||
90% {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 950px) {
|
||||
/* .nav-container {
|
||||
background-color: unset;
|
||||
} */
|
||||
.nav-container .nav-menu {
|
||||
clear: both;
|
||||
max-height: 0;
|
||||
transition: max-height .2s ease-out;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.nav-container .nav-menu li {
|
||||
display: block;
|
||||
}
|
||||
.nav-container .menu-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 28px 20px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
#sign-up {
|
||||
right: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 59px;
|
||||
width: 100%;
|
||||
@ -30,7 +162,6 @@ nav {
|
||||
|
||||
nav * {
|
||||
padding: 0;
|
||||
margin: 0px 5px;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
@ -54,19 +185,6 @@ nav * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
margin: 10px 7px;
|
||||
padding: 3px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navlink {
|
||||
color:rgb(233, 203, 104);
|
||||
font-size: 18px;
|
||||
@ -119,7 +237,6 @@ nav ul li {
|
||||
padding: 0;
|
||||
height: 59px;
|
||||
float: right;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row-reverse;
|
||||
align-content: stretch;
|
||||
}
|
||||
@ -131,18 +248,19 @@ nav ul li {
|
||||
#sign-up {
|
||||
padding: 6px 7px;
|
||||
margin: 14px 15px 14px 4px;
|
||||
|
||||
width: 72px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
background-color: rgb(140, 42, 165);
|
||||
color: bisque;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
position: fixed;
|
||||
display: inline-flex;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#sign-up:hover {
|
||||
transform: scale(1.05);
|
||||
background-color: blueviolet;
|
||||
transform: scale(1.03);
|
||||
filter: brightness(1.05);
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
}
|
||||
@ -163,7 +281,7 @@ nav ul li {
|
||||
}
|
||||
|
||||
#event-name {
|
||||
margin: 0px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#timer {
|
||||
@ -172,7 +290,9 @@ nav ul li {
|
||||
background-color: rgb(57, 57, 57);
|
||||
border-radius: 5px;
|
||||
padding: 2px 5px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
width: fit-content
|
||||
}
|
||||
|
||||
#timer::after {
|
||||
@ -284,7 +404,8 @@ nav ul li {
|
||||
.checkbtn {
|
||||
display: inline-block;
|
||||
}
|
||||
nav ul {
|
||||
|
||||
/* nav ul {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
@ -302,10 +423,11 @@ nav ul li {
|
||||
#check:checked ~ul {
|
||||
visibility: visible;
|
||||
animation: dropdown 0.5s ease;
|
||||
}
|
||||
} */
|
||||
.checkbtn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#prize-logo, .podium-label {
|
||||
transform: scale(0.9);
|
||||
font-size: 16px !important;
|
||||
@ -333,6 +455,26 @@ nav ul li {
|
||||
}
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
#banner {
|
||||
display: block;
|
||||
top: 1px;
|
||||
max-width: 200px;
|
||||
min-width: 150px;
|
||||
width: auto;
|
||||
margin-left: 300px;
|
||||
}
|
||||
#timer-container {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
#timer {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 3px auto 0;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
#banner {
|
||||
display: none;
|
||||
}
|
||||
@ -359,6 +501,28 @@ nav ul li {
|
||||
#prizes-container {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
#banner {
|
||||
display: block;
|
||||
margin-left: 75px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
#nav-logo {
|
||||
content: url(/img/logo_mini.png);
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
margin: 7px 0 0 5px;
|
||||
}
|
||||
#logo {
|
||||
height: 2300px;
|
||||
width: 230px;
|
||||
}
|
||||
#prizes-container {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
#banner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-height: 550px) {
|
||||
#logo {
|
||||
@ -863,7 +1027,7 @@ section {
|
||||
}
|
||||
|
||||
.slide {
|
||||
min-width: 340px;
|
||||
/* min-width: 340px; */
|
||||
max-width: 600px;
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
@ -2631,4 +2795,4 @@ footer li {
|
||||
/* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and
|
||||
coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you?
|
||||
Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to
|
||||
newcomers. If this sounds like you, then all aboard the Hackathon train! */
|
||||
newcomers. If this sounds like you, then all aboard the Hackathon tra
|
||||
30
index.html
30
index.html
@ -76,27 +76,25 @@
|
||||
<body>
|
||||
<!--Nav-->
|
||||
<nav id="navBar">
|
||||
<a id="nav-logo-a" href="./">
|
||||
<img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/>
|
||||
</a>
|
||||
<div id="banner">
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="#schedule"><span id="event-name">loading...</span></a> in
|
||||
<span id="timer">---</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="nav-links-container">
|
||||
<input type="checkbox" id="check">
|
||||
<label for="check" class="checkbtn">
|
||||
<img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
|
||||
</label>
|
||||
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
|
||||
<ul id="navList">
|
||||
<div class="nav-container">
|
||||
<a id="nav-logo-a" href="./">
|
||||
<img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/>
|
||||
</a>
|
||||
<div id="banner">
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="#schedule"><span id="event-name">loading...</span></a> <div id="timer-container">in
|
||||
<span id="timer">---</span></div>
|
||||
</p>
|
||||
</div>
|
||||
<input class="menu-btn" 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('check')" href="#event">Event</a></li>
|
||||
<li><a class="navlink" onclick="uncheck('check')" href="#workshops">Workshops</a></li>
|
||||
<li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
|
||||
<li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
|
||||
<li><a class="navlink" onclick="uncheck('check')" href="./rules">Rules<svg id="nav-icon" class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></a></li>
|
||||
<li><a class="navlink" onclick="uncheck('check')" href="./rules">Rules<svg id="nav-icon" class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></a></li>
|
||||
</ul>
|
||||
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
|
||||
</div>
|
||||
</nav>
|
||||
<!--Front Page-->
|
||||
|
||||
@ -328,6 +328,7 @@ function save() {
|
||||
}
|
||||
window.onload = function() {
|
||||
load();
|
||||
document.getElementById('#menu-btn').checked = false;
|
||||
};
|
||||
function load() {
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user