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,
}
}
]
});
});
お礼
ありがとうございました。バッチリでした。そういえば、この位置に二つの引数を書く構文をある本で見たことがあり、「何でここにこんあのがあるんだ？jquery特有の書き方か？」なんて思っていたヤツでした^^ ちなみに「ind」は書いておくだけで今回は使いませんね。 従来は、長々と個々の場合毎に書いて動作させていたスクリプトがオブジェクト（連想配列）で簡潔に書けてよかったし、別の構想でも応用できそうなので、よいステップになりました。 ありがとうございました。