Question

有谁知道如何将图像用作导航栏，

我想将我的徽标用作按钮，以便当用户点击徽标时，会出现一个填充整个页面的下拉菜单。

目前我有一个汉堡标签，我正在实施下拉菜单

          <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;
   }

Answer 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" 

}

Answer 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>

如果您遇到任何麻烦，请告诉我们

使图像成为DropDown菜单

2 个答案: