Having some issues with my navigation menu that uses JS and CSS to create a slide-in style. It was working fine before, but now it's not working properly. Can't figure out if it's due to the webgl on the page or another reason.
Visit: www.explorecanterbury.co.uk
CSS
.photo-menu {
position: fixed;
top: 0;
left: 0;
width: 370px;
height: 100%;
max-height: 700px;
overflow-x: hidden;
display:none;
background: #ddd;
text-align: left;
box-shadow: 1px 4px 4px #999;
}
.nav-toggle-2 {
width: 24px;
height: 24px;
display: block;
}
.nav-toggle-3 {
width: 24px;
height: 24px;
display: block;
}
.information-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
display:none;
background: #ddd;
text-align: left;
box-shadow: 1px 4px 4px #999;
}
.LocIcon {
background-image:url(/images/select.png);
width:24px;
height:24px;
display: block;
}
.photosIcon {
background-image:url(/images/photos.png);
width:24px;
height:24px;
display: block;
}
.infoIcon {
background-image:url(/images/information.png);
width:24px;
height:24px;
display: block;
}
.searchIcon {
background-image:url(/images/search.png);
width:24px;
height:24px;
display: block;
}
JS
$(document).ready(function() {
$(function() {
$('.nav-toggle-3').on('click', function() {
$(".information-menu").animate({width:'toggle'},200);
});
$('.nav-toggle-2').on('click', function() {
$(".photo-menu").animate({width:'toggle'},200);
});
});
});
HTML
<nav class="navbar navbar-default" style="z-index:6;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/> Museums and Galleries</a></li>
<li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/> Landmarks</a></li>
<li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/> Shopping</a></li>
<li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/> Churches</a></li>
<li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/> Tours and Guides</a></li>
</ul>
<li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
<li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
<li><span class="searchIcon hidden-xs"></span></li>
</ul>
<form class="navbar-form hidden-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>