我使用的是網上的大型菜單爲我的網站，整個代碼是here的Javascript按鈕展開現場菜單上的電話
<a href="javascript:void(0);" class="ic menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<a href="javascript:void(0);" class="ic close"></a>
在移動它像打開菜單的應用程序按鈕一個按鈕。 問題是，它在桌面上工作，但它不能在我的智能手機上打開。
這是解決問題的方法嗎？謝謝！
這裏使用CSS開發人員用來打開菜單：hover和懸停不會在手機出現，所以你需要更換：懸停的CSS有：活躍電話，見codepen
Note: I have checked this in landscape mode of my phone
/* Body Styles */
body {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
background-color: #fff;
}
header.dark blockquote { color:#fff; }
header.light blockquote { color:#000; }
blockquote {
max-width: 1000px;
margin:0 auto;
font-size: 16px;
border-left: 0px;
padding: 20px ;
}
blockquote h2 { padding-right: 40px; margin: 0px; }
header.dark blockquote a {color: orange; text-decoration: underline;}
header.light blockquote a {text-decoration: underline;}
header { min-height: 450px; }
header.dark { background-color: #444; }
header.light { background-color: #fff; }
/* Navigation Styles */
nav { position: relative; }
header.dark nav { background-color:rgba(255,255,255,0.5); }
header.light nav { background-color:rgba(0,0,0,0.5); }
ul.main-nav {
list-style-type: none;
padding: 0px;
font-size: 0px;
max-width: 1000px;
margin: 0 auto;
}
ul.main-nav > li {
display: inline-block;
padding: 0;
}
ul.main-nav > li > a {
display: block;
padding: 20px 30px;
position: relative;
color: #fff;
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
}
ul.main-nav > li:hover { background-color: #f9f9f9; }
ul.main-nav > li:hover > a { color: #333; font-weight: 400; }
ul.main-nav > li ul.sub-menu-lists {
margin: 0px;
padding: 0px;
list-style-type : none;
display:block;
}
ul.main-nav > li ul.sub-menu-lists > li {
padding: 2px 0;
}
ul.main-nav > li ul.sub-menu-lists > li > a {
font-size: 14px;
}
.ic {
position: fixed;
cursor: pointer;
display: inline-block;
right: 25px;
width: 32px;
height: 24px;
text-align: center;
top:0px;
outline: none;
}
.ic.close {
opacity: 0;
font-size: 0px;
font-weight: 300;
color: #fff;
top:8px;
height:40px;
display: block;
outline: none;
}
/* Menu Icons for Devices*/
.ic.menu { top:25px; z-index : 20; }
.ic.menu .line {
height: 4px;
width: 100%;
display: block;
margin-bottom: 6px;
}
.ic.menu .line-last-child { margin-bottom: 0px; }
.sub-menu-head { margin: 10px 0; }
.banners-area { margin-top: 20px; padding-top: 15px; }
@media only screen and (max-width:768px) {
.sub-menu-head { color:orange; }
.ic.menu { display: block; }
header.dark .ic.menu .line { background-color: #fff; }
header.light .ic.menu .line { background-color: #000; }
.ic.menu .line {
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
}
.ic.menu:focus .line { background-color: #fff !important; }
.ic.menu:focus .line:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ic.menu:focus .line:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: -10px;
}
.ic.menu:focus .line:nth-child(3) {
transform: translateY(15px);
opacity: 0;
}
.ic.menu:focus{ outline: none; }
.ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21; outline: none; }
/*
.ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21; }
.ic.close:focus { opacity: 0; }
*/
.ic.menu:focus { opacity: 1; }
nav { background-color: transparent; }
/* Main Menu for Handheld Devices */
ul.main-nav {
z-index:2;
padding: 50px 0;
position: fixed;
right: 0px;
top: 0px;
width: 0px;
background-color:rgba(0,0,0,1);
height: 100%;
overflow: auto;
/*CSS animation applied : Slide from Right*/
-webkit-transition-property: background, width;
-moz-transition-property: background, width;
-o-transition-property: background, width;
transition-property: background, width;
\t -webkit-transition-duration: 0.6s;
\t -moz-transition-duration: 0.6s;
\t -o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1); }
ul.main-nav > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
\t -webkit-transition-duration: 0.4s;
\t -moz-transition-duration: 0.4s;
\t -o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
.ic.menu:focus ~ .main-nav > * {opacity: 1;}
ul.main-nav > li > a:after {display: none;}
ul.main-nav > li:first-child { border-radius: 0px; }
ul.main-nav > li {
display: block;
border-bottom: 1px solid #444;
}
ul.main-nav > li > a { font-weight: 600; }
ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px; }
.sub-menu-head { font-size: 16px;}
ul.main-nav > li:hover { background-color: transparent; }
ul.main-nav > li:hover > a {color: #fff; text-decoration: none; font-weight: 600;}
.ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
border-left: 0px solid #ccc;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
position: relative;
visibility: visible;
opacity: 1.0;
}
.sub-menu-block { padding: 0 30px; }
.banners-area { padding-bottom: 0px; }
.banners-area div { margin-bottom: 15px; }
.banners-area { border-top: 1px solid #444; }
}
@media only screen and (min-width:769px) {
.ic.menu { display: none; }
/* Main Menu for Desktop Devices */
ul.main-nav { display: block; position: relative; }
.sub-menu-block { padding: 15px; }
/* Sub Menu */
ul.main-nav > li > div.sub-menu-block {
visibility: hidden;
background-color: #f9f9f9;
position: absolute;
margin-top: 0px;
width: 100%;
color: #333;
left: 0;
box-sizing: border-box;
z-index : 3;
font-size: 16px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
opacity: 0;
/*CSS animation applied for sub menu : Slide from Top */
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
ul.main-nav > li:hover > div.sub-menu-block, ul.main-nav > li:active > div.sub-menu-block{
background-color: #f9f9f9;
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
ul.main-nav > li > div.sub-menu-block > * {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
\t -webkit-transition-duration: 0.4s;
\t -moz-transition-duration: 0.4s;
\t -o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
ul.main-nav > li:hover > div.sub-menu-block > *,ul.main-nav > li:active > div.sub-menu-block > * {
opacity: 1;
}
.sub-menu-head { font-size: 20px;}
/* List Separator: Outer Border */
header.dark ul.main-nav > li > a { border-right: 1px solid #bbb; }
header.light ul.main-nav > li > a { border-right: 1px solid #666; }
/* List Separator: Inner Border */
ul.main-nav > li > a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right:0px;
top: 0px;
z-index : 2;
}
header.dark ul.main-nav > li > a:after { background-color: #777; }
header.light ul.main-nav > li > a:after { background-color: #999; }
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle; }
ul.main-nav > li > a.mega-menu > span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav > li:hover > a.mega-menu span:after,ul.main-nav > li:active > a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
.banners-area { border-top: 1px solid #ccc; }
}<!-- Available in two variations: "light" and "dark" | Change <header> class to see impact. -->
<header class="dark">
<nav role="navigation">
<a href="javascript:void(0);" class="ic menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<a href="javascript:void(0);" class="ic close"></a>
<ul class="main-nav">
<li class="top-level-link">
<a><span>Home</span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>Products</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Clothing</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>New Born</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Handbags</h2>
<ul class="sub-menu-lists">
<li><a>Wallets</a></li>
<li><a>Athletic bag</a></li>
<li><a>Backpack</a></li>
<li><a>Bucket Bag</a></li>
<li><a>View All</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Shoes</h2>
<ul class="sub-menu-lists">
<li><a>Mens</a></li>
<li><a>Womens</a></li>
<li><a>Kids</a></li>
<li><a>View All</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Services<span></a>
</li>
<li class="top-level-link">
<a class="mega-menu"><span>About</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Company</h2>
<ul class="sub-menu-lists">
<li><a>About</a></li>
<li><a>Mission</a></li>
<li><a>Community</a></li>
<li><a>Team</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Media</h2>
<ul class="sub-menu-lists">
<li><a>News</a></li>
<li><a>Events</a></li>
<li><a>Blog</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4 col-sm-4">
<h2 class="sub-menu-head">Careers</h2>
<ul class="sub-menu-lists">
<li><a>New Opportunities</a></li>
<li><a>Life @ Company</a></li>
<li><a>Why Join Us?</a></li>
</ul>
</div>
</div>
<div class="row banners-area">
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
<div class="col-md-6 col-lg-6 col-sm-6">
<img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;">
</div>
</div>
</div>
</li>
<li class="top-level-link">
<a><span>Contact</span></a>
</li>
</ul>
</nav>
<blockquote>
<h2>Responsive Mega Menu - CSS3</h2>
<br>
<strong>Cross Browser Support:</strong> <br>
Tested on Chrome (48.0.2564.109 m), Firefox, IE 11, Chrome Browser for Android 5.1.1 (Xperia Z2), Windows Phone 8.0 for Lumia 720
<br><br>
<strong>Expected Support for Desktop:</strong><br>
IE9+, Chrome, Firefox, Opera, Safari for Mac, <a href="http://caniuse.com/#search=transform" target="_blank">See All Browsers</a>
<br><br>
<strong>Expected Support for Handheld:</strong><br>
Chrome Browser for Android, Android Browser, Safari for iOS, Windows Phone 8.1, <a href="http://caniuse.com/#search=transform" target="_blank">See All Browsers</a>
<br>
<hr>
Available in two variations: "light" and "dark" | Change <header> class to see impact.
</blockquote>
</header>
哦，我很抱歉誤導...所以菜單按鈕工作正常。當你縮小窗口（也就是當你在移動時），菜單在左側，就像一個應用程序菜單。 問題是打開手機左側菜單的按鈕無法使用。菜單根本不是apear .. –
男人，他講的是導航的移動版本:) –
@ValentinBorisov是的.. –
你的JavaScript是什麼的onclick代碼？你想如何打開菜單？ –
我沒有onclick代碼。 對於onclick，我試着用onclick =「return false;」。 但我不知道如果void/onclick代碼是問題或 html代碼。我主要是在這個初學者.. –
這是純粹的CSS解決方案，使用：焦點CSS樣式來改變其視圖。這裏的JavaScript代碼不會幫助你。你能告訴我們什麼設備和瀏覽器版本這不起作用嗎？ –