将图像作为下拉菜单

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

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

目前，我有一个汉堡选项卡，正在实现下拉菜单，例如So

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

，因为您说使用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" 
}

您的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>

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

相关内容

最新更新

热门标签：