105 lines
5.5 KiB
HTML
105 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=7">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>nav</title>
|
|
<link rel="stylesheet" href="/css/nav/toggle.css">
|
|
<link rel="stylesheet" href="/css/nav/menu.css">
|
|
<link rel="stylesheet" href="/css/nav/logo.css">
|
|
</head>
|
|
<body>
|
|
<div class="nav-container">
|
|
<div class="logo-container">
|
|
<a href="/"><img src="https://static.janishutz.com/logo.jpg" alt="Website logo" id="logo"></a>
|
|
</div>
|
|
<div class="nav-toggle-container">
|
|
<div class="nav-toggle-positioner" onclick="menu()">
|
|
<div class="nav-toggle">
|
|
<span class="line" id="line1"></span>
|
|
<span class="line" id="line2"></span>
|
|
<span class="line" id="line3"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="menu">
|
|
<div class="menu-container">
|
|
<h2 style="text-align: center;">Menu</h2>
|
|
<div class="menu-main">
|
|
<div class="bottom-note-wrapper">
|
|
<div class="bottom-note">
|
|
<p>Welcome to janishutz.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-category" onclick="dropdown( 'projects-page' )" id="projects-page-parent">
|
|
<h3>Projects</h3>
|
|
<div class="category-list" id="projects-page">
|
|
<a href="/projects" class="category-item">Browse all</a>
|
|
<a href="/projects/storagemanager" class="category-item">StorageManager</a>
|
|
<a href="/projects/libreevent" class="category-item">libreǝvent</a>
|
|
<a href="/projects/qrscanner" class="category-item">QR & Barcode Insight</a>
|
|
<a href="/projects/store" class="category-item">Store</a>
|
|
</div>
|
|
</div>
|
|
<div class="menu-category" onclick="dropdown( 'about' )" id="about-parent">
|
|
<h3>About</h3>
|
|
<div class="category-list" id="about">
|
|
<a href="/legal" class="category-item">The legal stuff</a>
|
|
<a href="/legal/privacy" class="category-item">Privacy Policy</a>
|
|
<a href="/legal/tos" class="category-item">Terms of Service</a>
|
|
<a href="/about" class="category-item">About janishutz.com</a>
|
|
<a href="/about/aboutme" class="category-item">About me</a>
|
|
<a href="https://blog.janishutz.com" class="category-item">Blog</a>
|
|
</div>
|
|
</div>
|
|
<div class="menu-category" onclick="dropdown( 'services' )" id="services-parent">
|
|
<h3>Services</h3>
|
|
<div class="category-list" id="services">
|
|
<a href="/services" class="category-item">Overview</a>
|
|
<a href="https://development.janishutz.com" class="category-item">Custom Websites</a>
|
|
<a href="https://store.janishutz.com" class="category-item">Store</a>
|
|
<a href="https://id.janishutz.com" class="category-item">Account</a>
|
|
</div>
|
|
</div>
|
|
<div class="menu-category" onclick="dropdown( 'support' )" id="support-parent">
|
|
<h3>Support</h3>
|
|
<div class="category-list" id="support">
|
|
<a href="https://support.janishutz.com" class="category-item">Support hub</a>
|
|
<a href="https://v1.janishutz.com" class="category-item">Old version</a>
|
|
<a href="https://janishutz.github.io" class="category-item">Original version</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let activated = false;
|
|
function dropdown ( id ) {
|
|
$( '.category-list' ).removeClass( 'category-list-active' );
|
|
$( '.menu-category' ).removeClass( 'menu-category-active' );
|
|
if ( activated ) {
|
|
activated = false;
|
|
} else {
|
|
$( '#' + id + '-parent' ).addClass( 'menu-category-active' );
|
|
$( '#' + id ).addClass( 'category-list-active' );
|
|
activated = true;
|
|
}
|
|
}
|
|
|
|
function menu () {
|
|
$( '#menu' ).toggleClass( 'open' );
|
|
$( '.nav-toggle' ).toggleClass( 'active' );
|
|
$( 'body' ).toggleClass( 'menuOpen' );
|
|
$( '.menu-container' ).fadeToggle( 100 );
|
|
setTimeout( () => {
|
|
$( '.menu-container' ).toggleClass( 'shown' );
|
|
$( '.bottom-note-wrapper' ).fadeToggle( 500 );
|
|
}, 400 );
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |