progress on website (new nav menu)

This commit is contained in:
2023-03-24 21:03:26 +01:00
parent 69e95fe967
commit 2814b0ca18
8 changed files with 157 additions and 152 deletions

77
website/dist/nav.html vendored
View File

@@ -8,59 +8,42 @@
<link rel="stylesheet" href="/css/navstyle.css">
</head>
<body>
<div class="nav-container">
<div class="mobile-wrapper">
<a class="logo-container" href="/"><img class="logo" src="/assets/logo.png" alt="impress-logo"></a>
<div class="toggle-wrapper">
<a class="listtoggle" onclick="toggleList()">&#9776</a>
</div>
</div>
<div class="nav-wrapper">
<div class="nav-menu">
<div class="nav-list">
<a class="navitem" id="docs" href="/docs">Documentation</a>
<a class="navitem" id="download" href="/download">Download</a>
<a class="navitem" id="about" href="/about">About</a>
<a class="navitem" id="gh" href="https://github.com/simplePCBuilding/myevent">GitHub</a>
</div>
<div class="nav-wrapper">
<div class="nav-container">
<img class="logo" src="/assets/logo.png" alt="logo">
<div class="nav-list">
<a class="navitem inactive" id="home" href="/">Home</a>
<a class="navitem inactive" id="docs" href="/docs">Documentation</a>
<a class="navitem inactive" id="download" href="/download">Download</a>
<a class="navitem inactive" id="about" href="/about">About</a>
<a class="navitem inactive" id="gh" href="https://github.com/simplePCBuilding/myevent">GitHub</a>
</div>
</div>
</div>
<a class="logo-container-small" href="/"><img class="logo-small" src="/assets/logo.png" alt="logo"></a>
<a class="listtoggle" onclick="toggleMenu();">&#9776</a>
<script>
let menuOpen = false;
$( document ).ready( function () {
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) != '' ) {
$( '#' + window.location.pathname.slice( 1, window.location.pathname.length - 1 ) ).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200 );
};
$('.navitem' ).mouseenter( function () {
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) == this.id ) {} else {
$( this ).stop();
$( this ).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200 );
};
});
$( '.navitem' ).mouseleave( function () {
if ( window.location.pathname.slice( 1, window.location.pathname.length - 1 ) == this.id ) {} else {
$( this ).stop();
$( this ).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 600 );
};
} );
if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
$( '.nav-wrapper' ).hide( 700 );
} else {
$( '.nav-wrapper' ).css( 'display', 'none' );
}
if ( location.pathname === '/' ) {
$( '#home' ).removeClass( 'inactive' );
} else {
$( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
}
sessionStorage.setItem( 'menuOpen', 'false' );
} );
let previous = 1;
function toggleList() {
$( '.nav-menu' ).slideToggle( 300 );
$( '.listtoggle' ).toggleClass( 'active' );
}
window.addEventListener( 'resize', function( event ) {
if ( $( window ).width() > 999 ) {
$( '.nav-menu' ).slideDown();
previous = 1;
} else if ( $( window ).width() < 999 && previous == 1 ) {
$( '.nav-menu' ).slideUp();
$( '.listtoggle' ).removeClass( 'active' );
previous = 0;
};
}, true);
function toggleMenu () {
menuOpen = !menuOpen;
$( '.nav-wrapper' ).toggle( 600 );
$( '.logo-small' ).toggle( 600 );
$( 'body' ).toggleClass( 'menuActive' );
sessionStorage.setItem( 'menuOpen', String( menuOpen ) );
};
</script>
</body>
</html>