79 lines
3.6 KiB
HTML
79 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>nav</title>
|
|
<link rel="stylesheet" href="/css/navstyle.css">
|
|
<meta name="robots" content="noindex">
|
|
</head>
|
|
<body>
|
|
<div id="nav-menu">
|
|
<div class="nav-container">
|
|
<img class="logo" src="https://static.janishutz.com/logo.jpg" alt="logo">
|
|
<div class="nav-list">
|
|
<a class="navitem inactive" id="home" href="/">Home</a>
|
|
<a class="navitem inactive" id="info" href="/info">Details</a>
|
|
<a class="navitem inactive" id="examples" href="/examples">Examples</a>
|
|
<a class="navitem inactive" id="contact" href="/contact">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="listtoggle active" onclick="toggleMenu();">
|
|
<span class="line" id="line1"></span>
|
|
<span class="line" id="line2"></span>
|
|
<span class="line" id="line3"></span>
|
|
</a>
|
|
<script>
|
|
let offset = 0;
|
|
let menuOpen = false;
|
|
const offsetList = { 'home': 0, 'info': -200, 'examples': -400, 'contact': -600 };
|
|
$( document ).ready( function () {
|
|
if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
|
|
$( '#nav-menu' ).hide( 700 );
|
|
$( '.listtoggle' ).removeClass( 'active' );
|
|
} else {
|
|
$( '#nav-menu' ).css( 'display', 'none' );
|
|
$( '.listtoggle' ).removeClass( 'active' );
|
|
}
|
|
if ( location.pathname === '/' ) {
|
|
$( '#home' ).removeClass( 'inactive' );
|
|
$( '#home' ).addClass( 'locActive' );
|
|
} else {
|
|
$( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
|
|
$( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).addClass( 'locActive' );
|
|
}
|
|
sessionStorage.setItem( 'menuOpen', 'false' );
|
|
|
|
let loc = document.getElementsByClassName( 'locActive' )[ 0 ].id;
|
|
|
|
offset += offsetList[ loc ];
|
|
|
|
$( '.inactive' ).mouseenter( function () {
|
|
let obj = $( this ).attr( 'id' );
|
|
if ( obj === 'home' ) {
|
|
$( '#nav-menu' ).css( 'background-position', `${0 + offset}px` );
|
|
} else if ( obj == 'info' ) {
|
|
$( '#nav-menu' ).css( 'background-position', `${200 + offset}px` );
|
|
} else if ( obj == 'examples' ) {
|
|
$( '#nav-menu' ).css( 'background-position', `${400 + offset}px` );
|
|
} else if ( obj == 'contact' ) {
|
|
$( '#nav-menu' ).css( 'background-position', `${600 + offset}px` );
|
|
}
|
|
} )
|
|
$( '.inactive' ).mouseleave ( function () {
|
|
$( '#nav-menu' ).css( 'background-position', '0px' );
|
|
} )
|
|
} );
|
|
|
|
function toggleMenu () {
|
|
menuOpen = !menuOpen;
|
|
$( '#nav-menu' ).toggle( 600 );
|
|
$( 'body' ).toggleClass( 'menuActive' );
|
|
$( '.listtoggle' ).toggleClass( 'active' );
|
|
sessionStorage.setItem( 'menuOpen', String( menuOpen ) );
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |