65 lines
2.7 KiB
HTML
65 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<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="https://static.janishutz.com/Logo.png" alt="Logo"></a>
|
|
<div class="toggle-wrapper">
|
|
<a class="listtoggle" onclick="togglelist()">☰</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-wrapper">
|
|
<div class="nav-menu">
|
|
<div class="nav-list">
|
|
<a class="navitem" href="/order.html" id="order">Order</a>
|
|
<a class="navitem" href="/examples.html" id="examples">Examples</a>
|
|
<a class="navitem" href="/contact.html" id="contact">Contact me</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$( document ).ready(function () {
|
|
$( '.navitem' ).mouseenter( function () {
|
|
if ( window.location.pathname.slice( 1, window.location.pathname.length - 5 ) == this.id ) {} else {
|
|
$( this ).stop();
|
|
$( this ).animate( { 'color':'rgba(184, 214, 240, 1)' }, 200);
|
|
};
|
|
} );
|
|
$( '.navitem' ).mouseleave( function () {
|
|
if ( window.location.pathname.slice( 1, window.location.pathname.length - 5 ) == this.id ) {} else {
|
|
$( this ).stop();
|
|
$( this ).animate( { 'color':'black' }, 200 );
|
|
};
|
|
});
|
|
setTimeout( highlightTab, 300 );
|
|
});
|
|
|
|
function highlightTab () {
|
|
$( `#${ window.location.pathname.slice( 1, window.location.pathname.length - 5 ) }`).css( 'color', 'rgba(184, 214, 240, 1)' );
|
|
}
|
|
|
|
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);
|
|
</script>
|
|
</body>
|
|
</html>
|