html响应式手机导航栏菜单

可以使用HTML、CSS和JavaScript来创建响应式的手机导航栏菜单。以下是一个基本的例子：

HTML代码：

<nav class="navbar">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Logo</a>
    <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>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CSS代码：

/*导航栏样式*/
.navbar {
  background-color: #333;
  overflow: hidden;
}

/*导航栏标题样式*/
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*导航栏标题样式-鼠标悬停*/
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/*导航栏按钮样式*/
.navbar .navbar-toggle {
  border: none;
  background-color: #333;
  cursor: pointer;
}

/*导航栏按钮图标样式*/
.navbar .navbar-toggle .icon-bar {
  background-color: #fff;
  width: 25px;
  height: 3px;
  margin: 5px 0;
}

/*导航栏菜单样式*/
.navbar-collapse {
  display: none;
}

/*响应式导航栏-小屏幕*/
@media screen and (max-width: 767px) {
  .navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .navbar .navbar-toggle {
    display: block;
  }
  
  .navbar-collapse {
    display: none;
  }
  
  .navbar-collapse.collapse {
    display: block;
  }
  
  .navbar-nav {
    float: none;
    margin: 7.5px -15px;
  }
  
  .navbar-nav > li {
    float: none;
  }
  
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

JavaScript代码：

/*响应式导航栏按钮点击事件*/
$('.navbar-toggle').click(function() {
  $('.navbar-collapse').toggleClass('collapse');
});

以上代码可以创建一个基本的响应式手机导航栏菜单。在小屏幕设备上，导航栏标题会垂直排列，而导航栏按钮会显示在左上角。点击按钮会显示或隐藏菜单项。