下拉菜單媒體屏幕不關閉懸停

[英]Dropdown menu media screen not closing on hover


Actually when we open site on mobile screen or below 1024(as set) the mobile menu appears.

實際上,當我們在移動屏幕上打開站點或在1024(設置)以下時,移動菜單就會出現。

  1. So in mobile menu when we click on dropdown menu to show the option it works fine but to close the dropdown nothing can be done.
  2. 所以在移動菜單中,當我們點擊下拉菜單來顯示這個選項時,它工作得很好,但是要關閉下拉菜單什么都做不了。

enter image description here

But to close the "Dropdown" only no option is there except to close the whole menu. but when we see on other site if we see the dropdown it closes on clicking around somewhere on the site or hover on anything but here nothing can be done.

但是要關閉“下拉菜單”,除了關閉整個菜單之外別無選擇。但是當我們在其他網站上看到下拉菜單時它會在點擊網站上的某個地方或鼠標懸停在任何東西上但這里什么都做不了。

/* Menu mobile - tablet - smartphone */

/*菜單移動-平板-智能手機*/。

#class_menu{height:auto}
#show-menu{display:block;z-index:3;height:60px}
#show-menu a,#close-menu a{cursor:pointer;font-size:25px;color:#fff !important;font-weight:normal !important;padding:0;height:60px;line-height:60px;width:60px;text-align:center;position:absolute;z-index:2}
#mobile-menu-show{display:none;}
#close-menu{display:none;}
.navi li{display:block;width:100%;max-width:100%;padding:0 !important;margin:0 !important;text-align:center;list-style:none !important;}
.navi li.diffr{display:none;}
.navi li.first:before{content:"";text-decoration:inherit;height:60px;display:block}
.navi li a{background:#a91717;padding:0!important;margin:0 auto;list-style:none !important;height:45px;line-height:45px;color:#fff!important;border-top:1px solid #bb1919!important;}
.navi li ul li a{border-color:#bb1919!important;border-bottom:none!important}
.navi li ul li a:hover{border-color:#bb1919!important;}
.navi li a:hover{background:#bb1919}
.navi ul ul li a{text-align:center}
}

HTML code for the above css:

以上css的HTML代碼:

<div class='class_menu' id='class_menu'>
<div class='show-menu' id='show-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-bars'/></a></div>
<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></a></div>
<nav class='navi menu-mobile' id='mobile-menu-show' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li style="background-color:#981414;" class='first'><a href='/' itemprop='url' rel='tag nofollow' title='Homepage'><span style="margin:0 10px;" itemprop='name'><i class='fa fa-home'/></span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 1'><span itemprop='name'></span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 2'><span itemprop='name'></span></a></li>
<li class='diffr'>|</li>
<li class='dropdown-menu' tabindex='0'><a href="#"><span>Refer and Earn</span> <i aria-hidden='true' class='fa fa-angle-down'/></a>
<ul class='dropdown-menu-content'>
<li><a href='/' itemprop='url' title='Dropdown 1'><span itemprop='name'>Recharge Tricks</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 2'><span itemprop='name'>Refer and Earn</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 3'><span itemprop='name'>ting ling designs and for</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 4'><span itemprop='name'>Dropdown 4</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 5'><span itemprop='name'>Dropdown 5</span></a></li>
</ul>
</li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 4'><span itemprop='name'>Shopping Deals</span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 5'><span itemprop='name'>Coupons</span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Tech News</span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Tips a Tricks</span></a></li>
</ul></nav>
<div class='container_search'>
    <form action='/search/max-results=7' class='searchbox'>
        <input class='searchbox-input' name='search' onkeyup='buttonUp();' placeholder='Type to Search' type='search'/>
      <input class='searchbox-submit' type='submit' value='GO'/>
        <span class='searchbox-icon'><i aria-hidden='true' class='fa fa-search'/></span>
    </form>
</div>
  </div>

For demo of the menu which is not working please check: http://risenmagz.blogspot.in

如果要演示菜單不工作,請查看http://risenmagz.blogspot.in

Thanks so much :)

非常感謝:)

1 个解决方案

#1


2  

Why don't you just use the hover selector here? This would allow users on smartphones to interact as wanted because the "hover" event is triggered on user tap. It would also be easier for computer screens.

為什么不用鼠標懸停選擇器呢?這將允許智能手機上的用戶按需要進行交互,因為“懸停”事件是在用戶點擊時觸發的。對電腦屏幕來說也更容易。

/* Used for template only */
li {
 list-style: none; 
 background-color: red;
 color: white;
}
a {
  text-decoration: none;
  color: inherit;
}
/* Use this */
li ul{
  display: none;
  background-color: grey;
}
li ul li{
  background-color: grey;
}

li:hover ul{
  display: block;
}
<li class='dropdown-menu' tabindex='0'><span>Refer and Earn</span> <i aria-hidden='true' class='fa fa-angle-down'/>
  <ul class='dropdown-menu-content'>
    <li><a href='/' itemprop='url' title='Dropdown 1'><span itemprop='name'>Recharge Tricks</span></a></li>
    <li><a href='/' itemprop='url' title='Dropdown 2'><span itemprop='name'>Refer and Earn</span></a></li>
    <li><a href='/' itemprop='url' title='Dropdown 3'><span itemprop='name'>ting ling designs and for</span></a></li>
    <li><a href='/' itemprop='url' title='Dropdown 4'><span itemprop='name'>Dropdown 4</span></a></li>
    <li><a href='/' itemprop='url' title='Dropdown 5'><span itemprop='name'>Dropdown 5</span></a></li>
  </ul>
</li>
<p>
  Hover the above text to show sub-menus, go back to this text to hide them again.
</p>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/12/20/72efdb2f12f06b882021dcafa95bce09.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com