jＱueryで作ったドロワーメニューに画像が被る
トップページにjＱueryを使ってドロワーメニューとカルーセルとアコーディオンメニューを作成しました。
それぞれは作動するのですが、ドロワーを一番上に表示させたいのにカルーセルとアコーディオンメニューが上に被ってしまいます。
jQueryは初心者です。よろしくお願いします。
【html】
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/slick.min.js"></script>
</head>
<body>
<div id="wrapper">
<header id="header">
<div class="navDrawrBtn"><span></span></div>
<nav class="navDrawr" role="tablist">
<ul>
<li> <a>A</a>
<ul class="sub" role="tabpanel">
<li><a>a</a></li>
<li><a>b</a></li>
<li><a>c</a></li>
</ul>
</li>
<li> <a>B</a>
<ul class="sub" role="tabpanel">
<li><a>a</a></li>
<li><a>b</a></li>
<li><a>c</a></li>
</ul>
</li>
</ul>
</nav></header>
<div class="contents">
<section class="carousel">
<div class="gimmicCarousel">
<ul class="slider">
<li><a href="#"><img src="images/carousel_1.jpg"></a></li>
<li><a href="#"><img src="images/carousel_2.jpg"></a></li>
<li><a href="#"><img src="images/carousel_3.jpg"></a></li>
</ul></div></section>
<div class="accordion">
<ul>
<li> <a class="toggle">C</a>
<ul>
<li><a href="#">ca</a></li>
<li><a href="#">cb</a></li>
<li><a href="#">cc</a></li>
</ul>
</li>
<li> <a class="toggle">D</a>
<ul>
<li><a href="#">da</a></li>
<li><a href="#">db</a></li>
<li><a href="#">dc</a></li>
</ul>
</li>
<script>// ACCORDION
$(function() {
function accordion() {
$(this).toggleClass("active").next().slideToggle(300);
}
$(".accordion .toggle").click(accordion);
});</script>
<script src="js/script.js"></script>
</body>
</html>
【jcript.js】
$(function () {
var $nav = $('.navDrawr');
var $navBtn = $('.navDrawrBtn');
var $speed = 300;
var $navW = 270;
//サブメニューを非表示に
$nav.find('.sub').hide();
//hover時の挙動
$nav.find('li').hover(function(){
// PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定
if ($('.navDrawrBtn span').css('display') !== 'block'){
//li要素にhoverした時に.subがあれば実行する
if( $(this).find('.sub').length && !$nav.hasClass('open') ){
$(this).find('.sub').slideDown();
}
}jj
},function(){
// PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定
if ($('.navDrawrBtn span').css('display') !== 'block'){
if(!$nav.hasClass('open')) {
$(this).find('.sub').stop(true).slideUp();
}
}
});
//ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更)
$('body').on('click','.navDrawrBtn span',function(){
drawerFunc();
});
$('body').on('click','.overlay',function(){
drawerFunc();
});
function drawerFunc(){
if( $('body').hasClass('menuOpen') ){
$('body').removeClass('menuOpen');
$nav.animate({right:-1*$navW},$speed,'swing');
$('.overlay').fadeOut($speed);
}else{
$('body').addClass('menuOpen');
if(!$('.overlay').length){
$('#wrapper').prepend('<div class="overlay"></div>');
}
$nav.animate({right:0},$speed,'swing');
$('.overlay').fadeIn($speed);
}
}
});
//カルーセルの設定
$(function () {
$('.gimmicCarousel .slider').slick({
accessibility: true,
dots: true,
autoplay: true,
autoplaySpeed:3000,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
お礼
あれから色々と試行錯誤してみましたが、 解決にはいたりませんでした。 また色々とやってみようと思います。 ありがとうございました。
補足
ご回答頂き、ありがとうございます。 ご回答頂いた方法を試してみたのですが、 うまくいきませんでした。 メニューボタンでの開閉しか出来ず、 領域外やメニューの項目をクリックしても、 閉じませんでした。 html や CSSの部分で何かおかしいところがあるのでしょうか？