Looking to replicate a nav menu like this: https://stringworkshop.co.nz/ With pegs changing when the page state = active (and on hover).
The below code is working for hover, but not for the active state (it reverts back to the home page peg - see here: https://dev.stringworkshop.co.nz/).
Any help appreciated - my javascript is not the best!..
<div class="scroll d-none d-lg-block">
<img src=" @asset('images/menu.jpeg') " style="padding-left: 10px;">
<div class="is_active">
<a href="/" class="other" id="scroll_index" data-link="">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="contact-menu">
<span class="menu-content-adjust">Home</span>
</div>
</div>
</a>
</div>
<div class="is_active">
<a href="/luthier" class="other" id="scroll_maker" data-link="luthier">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="luthier-menu">
<span class="menu-content-adjust">Luthier</span>
</div>
</div>
</a>
</div>
<div class="is_active">
<a href="/violin-making" class="other" id="scroll_making" data-link="violin-making">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="making">
<span class="menu-content-adjust">Violin Making</span>
</div>
</div>
</a>
</div>
<div class="is_active">
<a href="/shop" class="other" id="scroll_shop_online" data-link="shop"><font color="red">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="online">
<span class="menu-content-adjust" style="color: red;">SHOP Online</span>
</div>
</div>
</font></a>
</div>
<div class="is_active">
<a href="/repairs-restorations" class="other" id="scroll_repairs" data-link="violin-repairs">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="repair">
<span class="menu-content-adjust">Violin Repairs</span>
</div>
</div>
</a>
</div>
<div class="is_active">
<a href="/endeavour-violins" class="other" id="scroll_endeavour" data-link="endeavour-violins">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="endeavour">
<span class="menu-content-adjust">Endeavour Violins</span>
</div>
</div>
</a>
</div>
<div class="is_active">
<a href="/m-u-d" class="other" id="scroll_mud" data-link="mud">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="mud">
<span class="menu-content-adjust">M.U.D.</span>
</div>
</div>
</a>
</div>
<div class="is_active">
<a href="/faq" class="other" id="scroll_faq" data-link="faq">
<div class="flex-container flex-menu-width">
<div class="flex3 no-padding">
<img src=" @asset('images/unmarked.png') " class="faq">
<span class="menu-content-adjust">F.A.Q.</span>
</div>
</div>
</a>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var imagelink2 = "@asset('images/unmarked.png')";
var imagelink = "@asset('images/marked.png')";
$(document).ready(function(){
var path = window.location.pathname.split("/").pop();
console.log(typeof pagename);
if(typeof pagename != 'undefined'){
path = pagename;
}
menuActive(path);
});
function menuActive(path){
if(path == ''){
$('.is_active a .flex-container .flex3 .contact-menu').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .contact-menu').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .contact-menu').removeAttr('style');
$('.is_active a .flex-container .flex3 .contact-menu').attr( 'src', imagelink2 );
}
if(path == "luthier"){
$('.is_active a .flex-container .flex3 .luthier-menu').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .luthier-menu').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .luthier-menu').removeAttr('style');
$('.is_active a .flex-container .flex3 .luthier-menu').attr( 'src', imagelink2 );
}
if(path == "violin-making"){
$('.is_active a .flex-container .flex3 .making').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .making').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .making').removeAttr('style');
$('.is_active a .flex-container .flex3 .making').attr( 'src', imagelink2 );
}
if(path == "shop"){
$('.is_active a .flex-container .flex3 .online').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .online').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .online').removeAttr('style');
$('.is_active a .flex-container .flex3 .online').attr( 'src', imagelink2 );
}
if(path == "violin-repairs"){
$('.is_active a .flex-container .flex3 .repair').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .repair').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .repair').removeAttr('style');
$('.is_active a .flex-container .flex3 .repair').attr( 'src', imagelink2 );
}
if(path == "endeavour-violins"){
$('.is_active a .flex-container .flex3 .endeavour').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .endeavour').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .endeavour').removeAttr('style');
$('.is_active a .flex-container .flex3 .endeavour').attr( 'src', imagelink2 );
}
if(path == "mud"){
$('.is_active a .flex-container .flex3 .mud').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .mud').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .mud').removeAttr('style');
$('.is_active a .flex-container .flex3 .mud').attr( 'src', imagelink2 );
}
if(path == "faq"){
$('.is_active a .flex-container .flex3 .faq').css({ "margin-top": "10px"});
$('.is_active a .flex-container .flex3 .faq').attr( 'src', imagelink );
}else{
$('.is_active a .flex-container .flex3 .faq').removeAttr('style');
$('.is_active a .flex-container .flex3 .faq').attr( 'src', imagelink2 );
}
}
$(document).ready(function() {
$(".is_active a").hover(function() {
menuActive($(this).data('link'));
}, function() {
var path = window.location.pathname.split("/").pop();
// alert(link);
if(typeof pagename != 'undefined'){
path = pagename;
}
menuActive(path);
});
});
$(document).ready(function(){
$('img').bind('contextmenu', function(e) {
return false;
});
});
$(document).ready(function(){
$(document).keyup(function(e){
if(e.keyCode == 44) return false;
});
});
</script>