我只有一个用于移动网站的基本导航栏，但是单击时它什么也没做。我想在您单击导航图标的位置放开导航。
我研究了。寻找解决方案，但似乎无济于事。
HTML
<span class="header-nav">
<header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
<div class="top">
<a href="#" class="visible-xs visible-sm hamburger-menu-btn" ng-click="toggleMobileNav(scroll); $event.preventDefault(); $event.stopPropagation()"></a>
<section id="siteMobileNav" class="visible-xxs visible-xs visible-sm blur-on-submit mobile-nav">
<ul class="main-links">
<li><a href="index" class="home-link" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Home">Home</a></li>
<li><a href="games" class="games-link" class="{active: section === "games"}" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Games">Games</a></li>
<li><a href="videos" class="videos-link" class="{active: section === "videos"}" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Videos" style="">Videos</a></li>
<li><a href="newswire" class="newswire-link" class="{active: section === "newswire"}" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Newswire">Newswire</a></li>
<li><a href="//socialclub.galaxy-games.co.uk" class="socialclub-link" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Social Club">Social Club</a></li>
<li><a href="downloads" ui-sref="downloads.index" class="downloads-link" class="{active: section === "downloads"}" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Downloads">Downloads</a></li>
<li><a href="//www.Galaxywarehouse.com" class="warehouse-link" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Warehouse">Warehouse</a></li>
<li><a href="//support.galaxy-games.co.uk" class="support-link" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Support">Support</a></li>
</ul>
<ul class="etc-links">
<li class="etc">Et cetera</li>
<li><a href="https://socialclub.galaxy-games.co.uk/settings/email" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Subscribe">Subscribe</a></li>
<li><a href="/careers" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Careers">Careers</a></li>
<li><a href="mailto:mouthoff@galaxy-games.co.uk" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Mouthoff">Mouthoff</a></li>
<li><a href="mailto:PR@galaxy-games.co.uk" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Press">Press</a></li>
<li><a href="/corpinfo" ui-sref="corpinfo" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Corporate Info">Corporate</a></li>
<li><a href="/privacy" ui-sref="privacy" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Privacy">Privacy</a></li>
<li><a href="/cookies" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Privacy">Cookies</a></li>
<li><a href="/legal" ui-sref="legal" data-gtm-category="Mobile Nav" data-gtm-action="Link Click" data-gtm-label="Legal">Legal</a></li>
</ul>
<div class="language">
<div click="mobileLang = !mobileLang" class="{active: mobileLang === true}" id="language-current">
<span class="en_us">English</span>
</div>
<div class="{active: mobileLang === true}" class="language-selector">
<ul>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=en_us" target="_self" data-language="en">English</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=de_de" target="_self" data-language="de">Deutsch</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=fr_fr" target="_self" data-language="fr">Français</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=it_it" target="_self" data-language="it">Italiano</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=ja_jp" target="_self" data-language="ja" class="bold">日本語</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=ru_ru" target="_self" data-language="ru">РУССКИЙ</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=es_es" target="_self" data-language="es">ESPAÑOL (ESPAÑA)</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=es_mx" target="_self" data-language="es-mx">ESPAÑOL (MÉXICO)</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=pt_br" target="_self" data-language="pt">PORTUGUÊS</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=ko_kr" target="_self" data-language="ko">한국어</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=zh_hans" target="_self" data-language="zh-hans" class="bold">中文（简体）</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=zh_tw" target="_self" data-language="zh" class="bold">中文（繁體）</a></li>
<li><a href="/language-selector/selector/change?currentLocaleBase=%2F&newLocale=pl_pl" target="_self" data-language="pl">POLSKI</a></li>
</ul>
</div>
</div>
<ul class="social">
<li><a href="http://www.facebook.com/Galaxygames" class="facebook" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Social Click" data-gtm-label="Facebook"></a></li>
<li><a href="http://twitter.com/GalaxyGames" class="twitter" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Social Click" data-gtm-label="Twitter"></a></li>
<li><a href="http://youtube.com/Galaxygames" class="youtube" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Social Click" data-gtm-label="YouTube"></a></li>
<li><a href="http://instagram.com/Galaxygames" class="instagram" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Social Click" data-gtm-label="Instagram"></a></li>
<li><a href="http://twitch.tv/Galaxygames" class="twitch" target="_blank" data-gtm-category="Mobile Nav" data-gtm-action="Social Click" data-gtm-label="Twitch"></a></li>
</ul>
</section>
CSS
header#headerRoot>.top a.hamburger-menu-btn{
background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0MCA0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cG9seWdvbiBwb2ludHM9IjMyLDIyIDQsMjIgOCwxOCAzNiwxOCAJIi8+Cgk8cG9seWdvbiBwb2ludHM9IjMyLDE1IDQsMTUgOCwxMSAzNiwxMSAJIi8+Cgk8cG9seWdvbiBwb2ludHM9IjMyLDI5IDQsMjkgOCwyNSAzNiwyNSAJIi8+CjwvZz4KPC9zdmc+Cg==");
background-repeat:no-repeat;
vertical-align:middle;
position:absolute;
top:50%;
left:15px;
transform:translateY(-50%);
width:40px;
height:40px;
}
header#headerRoot a {
text-decoration: none!important;
}
@media (max-width: 767px){
.visible-xs {
display: block!important;
}
}
.mobile-nav-shown #siteMobileNav {
z-index: 10;
position: relative;
min-height: 100vh;
transform: matrix(1,0,0,1,0,0);
}
#siteMobileNav {
position: fixed;
box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
padding: 5px 0;
left: 0;
width: 270px;
background: #fff;
color: #fff;
min-height: 100%;
transform: matrix(1,0,0,1,-270,0);
}
@media screen and (max-width:991px){
header#headerRoot>.top
{
border-bottom:1px solid #000;
height:70px
}
header#headerRoot>.top nav
{
margin:0
}
}
header#headerRoot>.top a.logo.logo-side{
width:36px;
position:absolute;
left:15px;
padding-top:16px;
z-index:100;
transform:matrix(1,0,0,1,0,-175);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
transform:matrix(1,0,0,1,0,-8)
}
@media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-side
{
display:none;
}
}
header#headerRoot>.top a.logo.logo-main{
z-index:20;
left:0;
right:0;
width:650px;
height:75px;
margin:20px auto;
position:absolute;
transform:matrix(1,0,0,1,0,0);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
transform:matrix(.5,0,0,.5,0,-100)
}
@media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-main
{
margin:0 auto;
height:100%;
padding:10px;
transform:matrix(1,0,0,1,0,0) !important
}
}
header#headerRoot>.top a.logo.white{
background-position:50% !important
}
header#headerRoot>.bottom{
z-index:20;
position:absolute;
width:100%;
top:100%;
margin-top:-1px;
transform:translateY(-1px)
}
header#headerRoot nav{
z-index:20;
position:relative;
max-width:1920px;
margin:99px auto 0;
padding:0 15px;
transition:margin-top .3s cubic-bezier(.19,1,.22,1);
font-size:1em;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
@media screen and (max-width:991px){
header#headerRoot nav
{
font-size:.9em
}
}
.header-collapsed header#headerRoot nav{
margin-top:0
}
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:inherit;
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
JavaScript
function myFunction() {
var x = document.getElementById("main-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
移动导航图标 https://imgur.com/wYB5LIQ
任何帮助表示感谢，并提前致谢。
JSFiddle针对此问题：https://jsfiddle.net/xth2j3bw/