使图像成为下拉菜单
Posted
技术标签:
【中文标题】使图像成为下拉菜单【英文标题】：Make Image a DropDown menu 【发布时间】：2018-06-07 14:54:01 【问题描述】：有谁知道我如何将图像用作导航栏，
我想将我的徽标用作按钮，这样当用户单击徽标时，会出现一个下拉菜单，该菜单会填满整个页面。
目前我有一个汉堡标签，并且正在像这样实现下拉菜单
<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;
【问题讨论】：
下拉菜单本质上不会占据整个页面：/ 另外，如果您将 codepen 或 jsfiddle 放在一起会有所帮助 我只希望它填充移动设备上的页面，还是有更好的方法来解决这个问题？我主要只是希望我的徽标成为下拉菜单 我很难理解你所说的下拉菜单是什么意思？！ this 是我认为的下拉菜单。注意它是如何不占据整个屏幕的。如果您希望通过单击徽标来“触发”全屏菜单，最好的办法是使用 javascript 并最初使用display: none 创建一个整页元素，然后在徽标上监听 click 事件这会切换其 display 属性的值
上面的引导代码可以做你想做的事。
是的。我会回来的
【参考方案1】：
既然你说你可以使用 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"
【讨论】：
非常感谢 Anthony，因此只需将 javascript 链接到页面并使用 css 添加徽标和样式！ 是的，在您的 HTML 中，您必须引用或链接 JavaScript 文件。此外，您可以使用 CSS 为您的徽标和菜单设置任何您想要的样式，但要使其具有仅在您单击徽标时才会出现菜单的效果，您必须首先还使用 CSS 隐藏菜单（除非您想要菜单最初显示） 太好了，所以只是为了澄清一下，我在 CSS 中添加了徽标？没错，所以我必须确保在页面首次加载时将其设置为隐藏。 您可以使用 HTML 正常添加您的徽标，并使用 CSS 正常设置它的样式。是的，如果您不希望在页面初始加载时显示菜单，则需要在 CSS 中使用display: none; 隐藏徽标。
非常感谢安东尼我一定要试一试！【参考方案2】：
您的 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>
如果您遇到任何问题，请告诉我们
【讨论】：
感谢您的帮助，我刚刚添加了您给我的更正代码（顺便谢谢您：P），我仍然得到一个带有文本显示（徽标）的汉堡标签，是吗是否可以只在所有屏幕上显示徽标，然后只有当用户单击它时才会显示下拉菜单？ 刚刚添加了我的徽标，但它仍然显示在汉堡选项卡之外，我是否必须删除图标栏的跨度类并将其替换为我想要使用的图像？跨度> 它可以工作（没有你的 CSS）。我刚刚测试过。徽标区域是另一回事。你有两个选择：1）要么只放文本，要么 2）图像。但是您必须创建适合其中的图像。我通常使用名为 IrfanView 的工具来创建此类图像。 我可以让汉堡标签区域更大以容纳更大的徽标吗？还是必须像汉堡标签一样小？ 我也不希望显示菜单的内容，只显示徽标，所以点击时出现的文本是不是完全有可能？以上是关于使图像成为下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章