some more progress on nav, soon complete
This commit is contained in:
@@ -1,13 +1,15 @@
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 20vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(226, 226, 226);
|
||||
|
||||
}
|
||||
|
||||
nav .logo {
|
||||
.nav-placeholder {
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.nav-menu .logo {
|
||||
display: none;
|
||||
height: 90%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -18,71 +20,220 @@ nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper .nav-link-dropdown {
|
||||
transform: scaleY( 0 );
|
||||
.nav-link-dropdown a {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
position: fixed;
|
||||
left: -100vw;
|
||||
top: 20vh;
|
||||
padding-top: 2.5vh;
|
||||
padding-bottom: 2.5vh;
|
||||
padding-left: 2.5vw;
|
||||
padding-right: 2.5vw;
|
||||
height: 75vh;
|
||||
width: 95vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
background-color: rgb(226, 226, 226);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.nav-top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 20vh;
|
||||
background-color: rgb(226, 226, 226);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-top-bar .logo {
|
||||
display: unset;
|
||||
height: 90%;
|
||||
border-radius: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.nav-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-link-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.nav-link-dropdown {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
/* Nav-Toggle button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/
|
||||
.nav-toggle {
|
||||
margin-left: auto;
|
||||
margin-right: 20px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-size: 5vh;
|
||||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 25px;
|
||||
z-index: 1;
|
||||
transition: 0.8s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#line1 {
|
||||
transform-origin: 0% 0%;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
#line2 {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#line3 {
|
||||
transform-origin: 0% 100%;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-toggle.active #line1 {
|
||||
transform: rotate( 45deg ) scaleX( 0.95 );
|
||||
}
|
||||
|
||||
.nav-toggle.active #line2 {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.nav-toggle.active #line3 {
|
||||
transform: rotate( -45deg ) scaleX( 0.95 );
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.nav-menu .logo {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.nav-top-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
padding: 0;
|
||||
height: 20vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-link-dropdown {
|
||||
transform: scaleY( 0 );
|
||||
align-items: unset;
|
||||
justify-content: unset;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
min-width: 175px;
|
||||
width: max-content;
|
||||
transform-origin: top;
|
||||
transition: transform 0.5s;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper {
|
||||
.nav-link-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 10%;
|
||||
min-width: 50px;
|
||||
z-index: 20;
|
||||
}
|
||||
margin-left: 3%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper .nav-link-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.nav-link-header {
|
||||
flex-direction: column;
|
||||
transition: all 0.5s;
|
||||
min-width: 100px;
|
||||
padding: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper:hover .nav-link-header {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper:hover .nav-link-dropdown {
|
||||
transform: scaleY( 1 );
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper .nav-link-header::before {
|
||||
.nav-link-header::before, .nav-link-header::after {
|
||||
opacity: 0;
|
||||
border: white 15px solid;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: calc( 100% - 15px );
|
||||
bottom: -15px;
|
||||
border-bottom-right-radius: 30px;
|
||||
content: " ";
|
||||
z-index: -1;
|
||||
}
|
||||
transition: opacity 0.4s;
|
||||
bottom: -15px;
|
||||
}
|
||||
|
||||
nav .nav-link-wrapper:hover .nav-link-header::before {
|
||||
.nav-link-header::before {
|
||||
border-left-color: transparent;
|
||||
border-bottom-right-radius: 30px;
|
||||
right: calc( 100% - 15px );
|
||||
}
|
||||
|
||||
.nav-link-header::after {
|
||||
border-right-color: transparent;
|
||||
border-bottom-left-radius: 30px;
|
||||
left: calc( 100% - 15px );
|
||||
}
|
||||
|
||||
.nav-link-dropdown a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav-link-wrapper:hover .nav-link-header {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.nav-link-wrapper:hover .nav-link-dropdown {
|
||||
transform: scaleY( 1 );
|
||||
}
|
||||
|
||||
.nav-link-wrapper:hover .nav-link-header::before, .nav-link-wrapper:hover .nav-link-header::after {
|
||||
transition-delay: 0.1s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +1,88 @@
|
||||
<div class="nav-link-wrapper">
|
||||
<div class="nav-link-header">
|
||||
<span class="material-symbols-outlined">lightbulb</span>
|
||||
<a href="/projects">Projects</a>
|
||||
<div class="nav-placeholder"></div>
|
||||
|
||||
<div class="nav-top-bar">
|
||||
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
|
||||
<div class="nav-toggle" onclick="openMenu( 'toggle' )">
|
||||
<span class="line" id="line1"></span>
|
||||
<span class="line" id="line2"></span>
|
||||
<span class="line" id="line3"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-menu">
|
||||
<div class="nav-link-wrapper">
|
||||
<a class="nav-link-header" href="/projects">
|
||||
<span class="material-symbols-outlined nav-icon">lightbulb</span>
|
||||
<div>Projects</div>
|
||||
</a>
|
||||
<div class="nav-link-dropdown">
|
||||
<a href="/projects">View all</a>
|
||||
<a href="/projects/storagemanager">StorageManager</a>
|
||||
<a href="/projects/qrscanner">QR & Barcode Insight</a>
|
||||
<a href="/projects/libreevent">libreǝvent</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-link-wrapper">
|
||||
<div class="nav-link-header">
|
||||
<span class="material-symbols-outlined">build</span>
|
||||
<a href="/services">Services</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-link-wrapper">
|
||||
<a class="nav-link-header" href="/services">
|
||||
<span class="material-symbols-outlined nav-icon">build</span>
|
||||
<div>Services</div>
|
||||
</a>
|
||||
<div class="nav-link-dropdown">
|
||||
<a href="https://store.janishutz.com">Store</a>
|
||||
<a href="https://id.janishutz.com">Account</a>
|
||||
<a href="https://development.janishutz.com">Custom Websites</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
|
||||
|
||||
<div class="nav-link-wrapper">
|
||||
<div class="nav-link-header">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
<a href="/about">About</a>
|
||||
</div>
|
||||
|
||||
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo">
|
||||
|
||||
<div class="nav-link-wrapper">
|
||||
<a class="nav-link-header" href="/about">
|
||||
<span class="material-symbols-outlined nav-icon">info</span>
|
||||
<div>About</div>
|
||||
</a>
|
||||
<div class="nav-link-dropdown">
|
||||
<a href="/about">About janishutz.com</a>
|
||||
<a href="/about/aboutme">About Janis Hutz</a>
|
||||
<a href="/legal">Legal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-link-wrapper">
|
||||
<div class="nav-link-header">
|
||||
<span class="material-symbols-outlined">support_agent</span>
|
||||
<a href="/projects">Support</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-link-wrapper">
|
||||
<a class="nav-link-header" href="/projects">
|
||||
<span class="material-symbols-outlined nav-icon">support_agent</span>
|
||||
<div>Support</div>
|
||||
</a>
|
||||
<div class="nav-link-dropdown">
|
||||
<a href="https://support.janishutz.com">Support Hub</a>
|
||||
<a href="https://support.janishutz.com/knowledgebase.php">Knowledgebase</a>
|
||||
<a href="/support/old">Old websites</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const toggle = document.getElementsByClassName( 'nav-toggle' )[ 0 ];
|
||||
const menu = document.getElementsByClassName( 'nav-menu' )[ 0 ];
|
||||
const bar = document.getElementsByClassName( 'nav-top-bar' )[ 0 ];
|
||||
let isAllowedToScroll = true;
|
||||
|
||||
function openMenu( action ) {
|
||||
if ( action === 'toggle' ) {
|
||||
if ( menu.classList.contains( 'active' ) ) {
|
||||
openMenu( 'close' );
|
||||
} else {
|
||||
openMenu( 'open' );
|
||||
}
|
||||
} else if ( action === 'close' ) {
|
||||
isAllowedToScroll = true;
|
||||
menu.classList.remove( 'active' );
|
||||
toggle.classList.remove( 'active' );
|
||||
} else if ( action === 'open' ) {
|
||||
isAllowedToScroll = false;
|
||||
toggle.classList.add( 'active' );
|
||||
menu.classList.add( 'active' );
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user