トップページがカルーセルで2つの画像がスライドしているのですが、
レスポンシブでスマホビューにした時に
ハンバーガーメニューをクリックすると上から降りてくるメニューが
カルーセルの内容を下に押しやってしまい、
しかもメニュー内容も右にズレたり、ロゴ位置も少しズレてしまうのですが、
なぜでしょうか?
Web初心者でわかりません。
どなたかお力を貸してください!(>_<)
###発生している問題・エラーメッセージ
■クリック前
■クリック後
###該当のソースコード
HTML
</style> <section class="regular slider"> <div id="fullscreen"> <img src="images/LC_Top-cat.jpg"> </div> <div id="fullscreen"> <img src="images/LC_Top-walk.jpg"> </div> </section> <!-- /#Slick Top END --> <!-- /#global menu for smart start --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(function(){ var rwdMenu = $('#menuList'), switchPoint = 768, slideSpeed = 500;* { box-sizing: border-box; } .slick-slide { margin: 0px; } .slick-slide img { width: 100%; height: 100%; overflow-y:hidden; } .slick-prev:before, .slick-next:before { color: black; }
<a href="javascript:void(0);" id="switchBtn"> <span></span><span></span><span></span></a></div></div>'); $('#rwdMenuWrap').append(menuSouce);var menuSouce = rwdMenu.html(); $(window).load(function(){ function menuSet(){ if(window.innerWidth <= switchPoint){ if(!($('#rwdMenuWrap').length)){ $('body').prepend('<div id="rwdMenuWrap"><div id="switchBtnArea">
var menuList = $('#rwdMenuWrap > ul'); $('#switchBtn').on('click', function(){ menuList.slideToggle(slideSpeed); $(this).toggleClass('btnClose'); }); } } else { $('#rwdMenuWrap').remove(); } } $(window).on('resize', function(){ menuSet(); }); menuSet(); });
});
</script>
MEDIAQUERIES[SP]LAYOUT
`
@media only screen and (max-width: 768px) {
#menuList {
display: none;
}
#rwdMenuWrap #switchBtnArea { width: 100%; height: 100px; background:white; position:fixed; z-index:100; } #rwdMenuWrap #switchBtnArea #switchBtn { top: 10px; left: 20px; width: 40px; height: 40px; display: block; background: white; position: absolute; } #rwdMenuWrap #switchBtnArea #switchBtn span { left: 0px; width: 75%; height: 2px; display: block; position: absolute; background-color: #b69178;; transition: all 0.2s linear; } #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {top:10px;transform: rotate(0);} #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {top:20px;transform: scale(1);} #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {bottom:8px;transform: rotate(0);} #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {top:20px;transform: rotate(-45deg);} #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {transform: scale(0);} #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {bottom:18px;transform: rotate(45deg);} #rwdMenuWrap ul { width: 100%; height:100%; display: none; } #rwdMenuWrap ul li a { position: fixed; top:103px; font-size: 16px; padding:13px; font-weight: 100; font-family:'Ubuntu', sans-serif; text-align: center; display: block; background:rgba(255,255,255,0.90); position:relative; line-height: none; z-index:250; float:none; } #rwdMenuWrap ul li a:after { content: ''; font-weight: bold; line-height: 1.2em; display: block; position:fixed; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
`
###試したこと
カルーセル部分にもz-indexを入れて下に置けばいいのかな?
と思ったのですが、それでもダメでした。
###補足情報(言語/FW/ツール等のバージョンなど)
カルーセルはslickを使ってます。
どうかご教授のほどよろしくお願いします!
回答1件
あなたの回答
tips
プレビュー