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の上記より上の部分です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="ja"> <head> <title>aaa株式会社</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"/> <meta name="description" content="" /> <meta name="keywords" content=""/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 19.0.5.0 for Windows"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/style1.css" type="text/css" media="screen"/> <script src="js/cufon-yui.js" type="text/javascript"></script> <script type="text/javascript"> </script> <style type="text/css"> あと、外部スタイルシート（css/style1.css)が以下のようになっています。 *{ margin:0; padding:0; } body{ background:#000; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:13px; color: #fff; text-transform:capitalize; overflow-x:hidden; } .oe_overlay{ background:#000; opacity:0; position:fixed; top:0px; left:0px; width:100%; height:100%; } ul.oe_menu{ list-style:none; position:relative; margin:10px 0px 0px 40px; width:784px; float:left; clear:both; } ul.oe_menu > li{ width:112px; height:101px; padding-bottom:2px; float:left; position:relative; } ul.oe_menu > li > a{ display:block; background-color:#101010; color:#ddd; text-decoration:none; font-weight:bold; line-height:1.0em; font-size:12px; width:90px; height:80px; padding:10px; margin:1px; text-shadow:0px 0px 1px #000; opacity:0.8; } ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a{ background:#fff; color:#101010; opacity:1.0; } .oe_wrapper ul.hovered > li > a{ background:#fff; text-shadow:0px 0px 1px #FFF; } ul.oe_menu div{ position:absolute; top:103px; left:1px; background:#fff; width:610px; height:180px; padding:30px; display:none; } ul.oe_menu div ul li a{ text-decoration:none; color:#222; padding:2px 2px 2px 4px; margin:2px; display:block; font-size:12px; } ul.oe_menu div ul.oe_full{ width:100%; } ul.oe_menu div ul li a:hover{ background:#000; color:#fff; } ul.oe_menu li ul{ list-style:none; float:left; width: 150px; margin-right:10px; } li.oe_heading{ color:#000; font-size:16px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid #000; }