0
ユーザーがハンバーガーメニューをクリックすると、メニューコンテンツがポップアウトする問題が発生しています。 Angularは私のアプリの基盤であり、これを動作させるには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>
スタイルタグが頭の内側にあるようにしてください。 – Sandro
@Sandro - 良いキャッチ、私はこれを修正しましたが、私のコードでは、頭の中にあります。問題は依然として存在する。さらに、ユーザーがハンバーガーメニューをクリックすると、メニューをポップアップするのではなくリンクとして機能します。 – Mark