0
私は、あなたがデスクトップのためにホバーし、携帯電話とタブレットのために肖像画だけを折りたたむときにドロップダウンメニューを表示するナビゲーションバーを持っています。しかし、タブレット環境では、メニューはデスクトップ上と同じように機能します。ドロップダウンリンクは、リンクをタップすると親リンクにリンクするだけなので、アクセスできません。タブレットのバージョンがモバイルのように機能するようにするにはどうしたらよいですか？デスクトップ版のように見えますか？または、すべてのデバイスのクリック時にドロップダウンリンクを表示する方が良いでしょうか？タブレット向けのブートストラップナビゲーションドロップダウンリンクソリューション？
<header id="masthead" class="site-header" role="banner">
<div class="container-fluid">
<div id="main-nav" class="row">
<div class="header-wrap">
<div class="site-branding">
<p class="site-title"><a href="#" rel="home">SITE NAME</a></p>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul id="primary-menu" class="menu">
<li class="menu-item menu-item-has-children dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Parent Link<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
.nav-menu {
display: none;
position: relative;
top: 70px;
@media (min-width: 768px) and (max-width: 992px) {
top: 0;
}
}
.dropdown-menu {
display: none;
position: static;
width: 100%;
li {
width: 100%;
}
min-width: 180px;
}
.dropdown-menu > .active a {
background-color: #fff;
color: #000 !important;
}
.main-navigation.toggled {
.nav-menu {
width: 100%;
display: block;
background-color: #363636;
li {width: 100%; display: block;background-color: #363636; text-transform: uppercase; border-top: .5px solid #434343;}
li > a {
padding: 8px;
pointer-events: none; // prevent it's immediate A child to follow HREF
cursor: default;
}
a {color: #fff;}
.dropdown-menu {
position:static;
top: 80px;
display: none;
background: none;
box-shadow: none;
padding: 0;
a {
color: #fff;
pointer-events: auto;
cursor: pointer;
}
li {
background-color: #000;
a {
width: 100%;
&:hover {
color: #000;
}
}
}
}
}
}
@media (min-width: 992px) {
.main-navigation {
.nav-menu {
top: 0;
}
.dropdown-menu {
visibility: hidden;
display: block;
opacity: 0;
border-radius: 0;
top: 3.15em;
background-color: $site-dark-gray;
// transform: translateY(-20px);
transform: translateY(20px);
transition: all .3s ease;
left: -1.5em !important;
overflow: hidden;
padding: 0;
border: 0;
li:first-child {display: none !important;}
li {
margin: 0 !important;
transition: all .3s ease;
a {
padding-top: 8px;
padding-bottom: 8px;
}
&:hover a {
color: #000 !important;
background-color: #fff;
}
}
.active > a {
background-color: #fff;
color: #000 !important;
}
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.dropdown:after {
content: "";
display: block;
height: 2em;
position: absolute;
top: 1em;
width: 100%;
}
}
}