0
私は自分のモバイルメニューに問題があります。メニューが切り替わったときにZインデックスの問題があるように見えますが、それは下のコンテンツの後ろに表示されます。しかし、私はこれで遊んできました、私は前面にトグルメニューを取得することはできません。モバイルメニューのZ-インデックスの問題？
コード： HTML：
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="/" title="Storey & Co. Solicitors" rel="home"><img class="header-image" src="assets/img/storey-and-co-logo.png" alt="Storey & Co. Solicitors" title="Storey & Co. Solicitors"></a>
</div>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="our-team.html">Our Team</a>
</li>
<li>
<a href="services.html">Services</a>
<ul class="nav-dropdown">
<li>
<a href="divorce.html">Divorce</a>
</li>
<li>
<a href="wills.html">Wills</a>
</li>
<li>
<a href="residential.html">Residential</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li class="nav-highlight">
<a href="https://www.perfectportal.co.uk" target="_blank">Obtain a Quote</a>
</li>
</ul>
</nav>
</div>
</section>
のjQuery
(function($) {
$(function() {
$('nav>ul>li').addEventListener('click',function() {
$(this).children('.nav-dropdown').show();
});
$('nav>ul>li').mouseleave(function() {
$('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);
サス
header
background: $brand-primary
height: $nav-height
clear: both
section.navigation
padding: 0px
clear: both
nav
float: right
ul
list-style: none
margin: 0
padding: 0
li
float: left
position: relative
a
display: block
padding: 0 20px
line-height: $nav-height
background: $brand-primary
color: #fff
text-decoration: none
&:hover
background: $brand-3-dark
color: #fff
&:not(:only-child):after
padding-left: 4px
content: ' ▾'
ul li
min-width: 190px
& a
padding: 15px
line-height: 20px
z-index: 1
.nav-highlight a
background: $brand-3-dark
color: #fff
&:hover
background: $brand-3-primary
.nav-dropdown
position: absolute
display: none
z-index: 1
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15)
.nav-mobile
display: none
position: absolute
top: 0
right: 0
background: $brand-primary
height: $nav-height
width: $nav-height
#nav-toggle
position: relative
z-index: 9
left: 18px
top: 22px
cursor: pointer
padding: 10px 35px 16px 0px
span,
span:before,
span:after
cursor: pointer
border-radius: 1px
height: 5px
width: 35px
background: #fff
position: absolute
display: block
content: ''
transition: all 300ms ease-in-out
span:before
top: -10px
span:after
bottom: -10px
&.active span
background-color: transparent
&:before,
&:after
top: 0
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
@media only screen and (max-width: $breakpoint)
.nav-mobile
display: block
nav
width: 100%
padding: $nav-height 0 15px
ul
display: none
li
float: none
a
padding: 15px
line-height: 20px
ul li a
padding-left: 30px
.nav-dropdown
position: static
@media screen and (min-width: $breakpoint)
.nav-list
display: block !important
.navigation
height: $nav-height
background: $brand-primary
.nav-container
max-width: $content-width
margin: 0 auto
.brand
position: absolute
float: left
padding-top: 10px
vertical-align: middle
text-transform: uppercase
font-size: 1.4em
box-sizing: border-box
a,
a:visited
color: #fff
text-decoration: none
img.header-image
max-width: 200px
@media screen and (max-width: $breakpoint-small)
img.header-image
max-width: 175px
padding-top: 10px
とライブ版はこちら：http://staging-maris-storey.transitiongraphics.co.uk/
ヘルプマギーセリーノの答えはあなたのために働いていない理由、私がテストしていたときに、それが動作するので、私は、よく分からない
nav {
position: relative;
z-index: 9;
}
問題の再現方法を説明します。私は問題を見るためにライブバージョンで何をすべきかわかりません – mikepa88
これは '.navigation'と' header'の静的な高さのために起こると思います。 – Huelfe
ああ、それはモバイルで、私はデスクトップで探していた。申し訳ありません – mikepa88