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,
}
}
]
});
});
お礼
回答ありがとうございます。 まだ勉強不足でイベントリスナというものを知らないので全ては理解できませんが それは自分で調べるとして 未熟な僕でもだいたいは分かるくらい丁寧に回答して頂いてることは分かりましたし 原因を教えていただけたので何倍も調べやすくなりました。 ありがとうございました。