使圖像成為下拉菜單
[英]Make Image a DropDown menu
問題描述
有誰知道我如何將圖像用作導航欄，
我想將我的徽標用作按鈕，以便當用戶單擊徽標時，會出現一個填充整個頁面的下拉菜單。
目前我有一個漢堡標簽，正在實現下拉菜單
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active"><a href="Health.html">Health</a></li>
<li><a href="Insurance.html">Insurance</a></li>
<li><a href="Track.html">Track</a></li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}
2 個解決方案
解決方案1
1 2017-12-26 22:32:13
既然您說過，就可以使用JavaScript。
將以下代碼添加到您的HTML文檔中：
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
使用CSS，可以根據需要設置菜單樣式，還可以添加：
display: none;
您的JavaScript可能類似於以下內容：
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}
解決方案2
0 2017-12-26 22:17:54
您的html有一些小錯誤。 應該是這樣的
<nav class="navbar navbar-inverse">
<div class="container-field">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active"><a href="Health.html">Health</a></li>
<li><a href="Insurance.html">Insurance</a></li>
<li><a href="Track.html">Track</a></li>
</ul>
</div>
</div>
</nav>
如果您遇到任何麻煩，請告訴我們
解決方案3
-3 2021-12-18 17:33:29
你們中有人願意接受委托工作嗎？ 我正在尋找可以做到這一點的人。 我想要一個圖形作為我的菜單下拉顯示，但我沒有真正的編碼經驗。
如何根據每個下拉菜單顯示圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.