使图像成为下拉菜单答案

【问题标题】：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 属性的值
上面的引导代码可以做你想做的事。
是的。我会回来的

标签： javascript html css navigation navbar

【解决方案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 的工具来创建此类图像。
我可以让汉堡标签区域更大以容纳更大的徽标吗？还是必须像汉堡标签一样小？
我也不希望显示菜单的内容，只显示徽标，所以点击时出现的文本是不是完全有可能？