單擊或懸停彈出菜單問題

我在使用戶單擊或懸停漢堡菜單時彈出菜單內容時出現問題。角是我的應用程序的基礎，我有一些在視圖中的JavaScript和CSS來讓這個工作，但沒有得到期望的結果。顯示這個角落我的截圖是在這裏：單擊或懸停彈出菜單問題

我的代碼都在這裏：

<!doctype html> 
<html ng-app="mbapp"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Cloud + Enterprise // Moneyball Tools</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 

    <!-- build:css({.tmp/serve,src}) styles/vendor.css --> 
    <!-- bower:css --> 
    <!-- run `gulp inject` to automatically populate bower styles dependencies --> 
    <!-- endbower --> 
    <!-- endbuild --> 

    <!-- build:css({.tmp/serve,src}) styles/app.css --> 
    <!-- inject:css --> 
    <!-- css files will be automatically insert here --> 
    <!-- endinject --> 
    <!-- endbuild --> 
    <base href="/"> 
    <link href="app/styles/mbapp.css" rel="stylesheet" /> 
<style type="text/css"> 
    li > .sideCont > a { 
     text-decoration: none; 
    } 
    li > .sideCont > li a: hover { 
     text-decoration: none; 
     color: inherit; 
    }  

    .menu_items_toggle { 
     opacity: 1 !important; 
     top: 100% !important; 
    } 

    #menu { 
     position: relative; 
    } 
    #menu_items { 
     position: absolute; 
     top: 0%; 
     opacity: 0; 
     transition: all 0.5s; 
    } 
    .menu_items_toggle { 
     opacity: 1 !important; 
     top: 100% !important; 
    } 
</style> 
    </head> 
    <body style="background-color: #f5faff;"> 
    <div class="container-fluid" style="font-family: Segoe UI; padding: 0;"> 
     <div id="menu" style="background-color: #002F33; min-height:50px;"> 
      <span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="assets/images/icon_hamburger.png"></span> 
      <div id="menu_items"> 
       <a href="https://www.moneyball.ms/">Moneyball Website</a> 
       <br> 
       <a href="https://www.tools.moneyball.ms/">Moneyball Tool</a> 
       <br> 
       <a href="https://msit.microsoftstream.com/channel/8a4a7740-855b-4c52-912c-c97fb714a0a6">Moneyball Stream Channel</a> 
       <br> 
      </div> 
      <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>> 
     </div> 
     <div class="col-md-2 tabNav"> 
      <ul class="tabTitle"> 
       <p>Project tools</p> 
       <li class="tabCont"><a href="#/home">Welcome</a></li> 
       <li class="tabCont"><a href="#">Experiments</a></li> 
       <li class="tabCont"><a href="#">Interview Notes</a></li> 
      </ul> 
      <ul class="tabTitle"> 
       <p>Hypothesis worksheets</p> 
       <li class="tabCont"><a href="/#/steps">Problem phase</a></li> 
       <li class="tabCont"><a href="/#/solutionHyp">Solution phase</a></li> 
       <li class="tabCont"><a href="#">Service phase</a></li> 
       <li class="tabCont"><a href="#">Growth phase</a></li>     
      </ul>    
     </div> 
     <div ui-view> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     //make a refernce to the container that holds all your links 
     var menu_item_container = document.getElementById("menu_items") 

     //This function will show/hide menu options if image is clicked on 
     function clicker() { 
      menu_item_container.classList.toggle('menu_items_toggle'); 
      console.log(menu_item_container.classList.contains('menu_items_toggle')) 
     } 
     console.log(document.getElementById("span_img_container")); 
     document.getElementById("menu_img").addEventListener('click', clicker) 
    </script> 

    <!-- build:js(src) scripts/vendor.js --> 
    <!-- bower:js --> 
    <!-- run `gulp inject` to automatically populate bower script dependencies --> 
    <!-- endbower --> 
    <!-- endbuild --> 

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js --> 
    <!-- inject:js --> 
    <!-- js files will be automatically insert here --> 
    <!-- endinject --> 

    <!-- inject:partials --> 
    <!-- angular templates will be automatically converted in js and inserted here --> 
    <!-- endinject --> 
    <!-- endbuild --> 

    </body> 
</html>

來源

2016-11-29 Mark

很確定風格標籤應該在頭部內。 – Sandro

@Sandro - 很好的捕獲，我在這裏解決了這個問題，但是在我的代碼中，它在頭上。問題依然存在。最重要的是，當用戶點擊漢堡包菜單時，它會作爲鏈接而不是彈出菜單。 – Mark

的問題是，你的菜單位於你的「漢堡包菜單」的頂部。發生這種情況是因爲唯一不可點擊的元素是那些設置爲display: none;或pointer-events: none;的元素。

可以解決這個問題如下：

#menu_items.menu_items_toggle { 
    opacity: 1; 
    top: 100%; 
    display: inline-block; 
}

通知我如何添加了id（#menu_items）的選擇，這樣的CSS選擇器特殊性是不添加!important更高。

對於你的menu_items風格，你必須添加display: none;。

#menu_items { 
    position: absolute; 
    top: 0%; 
    opacity: 0; 
    transition: all 0.5s; 
    display: none; 
}

來源

2016-11-29 22:06:43 Sandro

如果我用類tabNav註釋掉div，這有助於工作。似乎它不會顯示關於那個div，即使我搞亂了z-index。思考？ – Mark

它似乎在這裏工作：http://codepen.io/Spreadyy/pen/dOZomY也許你需要設置一個背景顏色？ – Sandro

單擊或懸停彈出菜單問題

回答

相關問題