使用HTML和CSS创建响应式导航栏菜单

翻滚的胖子
2023-06-12 18:13:35
前端技术
HTML CSS JavaScript

随着移动设备的普及，越来越多的网站需要适应不同的屏幕尺寸，因此响应式设计成为了web开发中的一项重要技能。导航栏菜单作为网站的重要组成部分，也需要适应不同的屏幕尺寸。在本教程中，我们将使用HTML和CSS创建一个简单的响应式导航栏菜单。

HTML代码

首先，我们需要编写HTML代码，定义导航栏菜单的结构。以下是一个基本的HTML结构：

<nav class="navbar">
  <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">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

以上代码定义了一个具有基本结构的导航栏菜单，其中包括一个导航栏头部，一个导航栏品牌，一个导航栏菜单按钮和一个导航栏菜单列表。

CSS代码

接下来，我们需要使用CSS样式来美化导航栏菜单。以下是一个基本的CSS样式：

/* 定义导航栏样式 */
.navbar {
  background-color: #333;
  position: relative;
}

/* 定义导航栏头部样式 */
.navbar-header {
  padding: 15px;
  float: left;
}

/* 定义导航栏品牌样式 */
.navbar-brand {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

/* 定义导航栏菜单按钮样式 */
.navbar-toggle {
  background-color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
  margin-right: 15px;
  padding: 9px 10px;
}

/* 定义导航栏菜单列表样式 */
.navbar-collapse {
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  background-color: #333;
}

.navbar-collapse ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.navbar-collapse li {
  display: inline-block;
}

.navbar-collapse a {
  display: block;
  color: #ffffff;
  font-size: 16px;
  padding: 15px;
  text-decoration: none;
}

.navbar-collapse a:hover {
  background-color: #555;
}/* 定义导航栏菜单按钮图标样式 */
.icon-bar {
  background-color: #ffffff;
  display: block;
  height: 3px;
  width: 22px;
  margin: 4px 0;
}

.icon-bar:first-child {
  margin-top: 0;
}

以上CSS样式定义了导航栏菜单的各个部分的样式，包括导航栏，导航栏头部，导航栏品牌，导航栏菜单按钮，导航栏菜单列表，导航栏菜单按钮图标等。

JavaScript代码

最后，我们需要编写一些JavaScript代码，以使导航栏菜单在小屏幕上可以自适应。以下是一个基本的JavaScript代码：

/* 定义导航栏菜单按钮点击事件 */
$(document).ready(function () {
  $(".navbar-toggle").click(function () {
    $(".navbar-collapse").slideToggle("slow");
  });

  $(window).resize(function () {
    if ($(window).width() > 768) {
      $(".navbar-collapse").removeAttr("style");
    }
  });
});

以上JavaScript代码定义了导航栏菜单按钮的点击事件，并在小屏幕上将导航栏菜单列表滑动显示和隐藏。此外，该代码还定义了一个窗口大小调整事件，以确保在大屏幕上导航栏菜单列表可以正常显示。