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,
}
}
]
});
});
お礼
お礼コメントに書くのは間違っているかもしれませんが、回答を元にした現在の経過です。 タブだとindexとeqでタブとコンテンツの位置を合わせてあげれば良かったのですが、こういったグループごとに切り替えたい場合はどうしたら良いのか…。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>分割したリストをページ送りで表示</title> <script> $(function() { var split = 5; var division = 0; var items = $( '#list li' ).length; if( items > split ) { // ページネーション作成 $( '#list' ).before( '<ul id="pagenation">\n</ul>\n<span id="page"></span>\n' ); var prev = '<li id="list-prev">Prev</li>\n'; var next = '<li id="list-next">Next</li>\n'; $( '#pagenation' ).append( prev ); $( '#pagenation' ).append( next ); // 表示内容を関数に function display() { $( '#page' ).html( division + 1 + '/' + Math.ceil( items / split ) ); $( '#list li' ).hide(); $( '#list li:gt(' + division * split + '):lt(' + split + ')' ).stop( true, true ).fadeIn( 'fast' ); } // Prevをクリックしたときの処理 $( '#list-prev' ).click( function() { if( division > 0 ) { division--; display(); } }); // Nextをクリックしたときの処理 $( '#list-next' ).click( function() { if( division < ( items - 1 ) / split - 1 ) { division++; display(); } }); display(); } }); </script> </head> <body> <ul id="list"> <li>item01</li> <li>item02</li> <li>item03</li> <li>item04</li> <li>item05</li> <li>item06</li> <li>item07</li> <li>item08</li> <li>item09</li> <li>item10</li> <li>item11</li> <li>item12</li> <li>item13</li> <li>item14</li> <li>item15</li> </ul> </body> </html>
補足
回答ありがとうございます。 丁度そのページ送りの処理をどうしたら良いのか分からずに質問させて頂きました…。 ページ位置の表示については次の様にする事で解決できそうです。 var item = $('#list li').length; var i = 0; var split = 10; // リストアイテムを分割する数 /* Pagenation */ $( '#list' ).before( '<ul id="nav">\n</ul>\n<span id="page"></span>\n' ); var prev = '<li id="list-prev">Prev</li>\n'; var next = '<li id="list-next">Next</li>\n'; $( '#nav' ).append( prev ); $( '#nav' ).append( next ); $( '#page' ).html( i + 1 + '/' + Math.ceil( item / split ) ); ページ送りの部分をもう少し試行錯誤してみます。