HTML 设计带有动态搜索框的导航栏

导航栏是一个水平栏位于网页顶部，其中包含链接、下拉菜单和搜索框，链接到网页中适当的部分/页面。这可以帮助用户轻松地浏览网站。导航栏可以以多种方式实现，但传统的实现方式是水平和垂直栏。

在本文中，我们将使用简单的HTML和CSS设计带有动态搜索栏的导航栏。

创建带有动态搜索框的导航栏

以下是实现的步骤：

创建一个带有类名为“nav-bar”的<div>元素以设计导航栏。
在“nav-bar”div内部，创建另一个带有类名为“menu”的<div>元素以添加菜单项。
在“menu”div内部，创建一个无序列表<ul>，并在其中为导航栏上的每个菜单项添加<li>。
在“menu”后创建另一个带有类名为“search-box”的<div>，以添加搜索框。
在“search-box”div内部添加<input>元素，以表示搜索输入字段。
然后，添加一个<button>元素以表示搜索按钮。
使用CSS过渡效果在聚焦搜索输入字段时创建动画效果。

示例

以下示例演示了使用HTML和CSS设计带有动画搜索栏的导航栏：

<!DOCTYPE html>
<html>
<head>
   <title>Navigation bar with animated search box</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-12N37f5QGtxзVEgiss14W3ExzMWZxybE1SJSESQP9S+oqd12jhcu+A56EbclzFSJ" crossorigin="anonymous">

   <style>
      * {
         margin: 0;
         padding: 0;
         font-family: Arial, Helvetica, sans-serif;
      }
      .nav-bar {
         background-color: lightblue;
         height: 60px;
      }
      .menu {
         float: left;
      }
      .menu ul {
         display: flex;
      }
      .menu ul li {
         display: inline-block;
      }
      .menu ul li a {
         padding: 22px;
         line-height: 60px;
         text-decoration: none;
         color: white;
         transition: 0.5s;
      }
      .menu ul li a:hover {
         background: seagreen;
      }
      .search-box {
         float: right;
         display: flex;
         margin: 10px 25px;
         transition: width 0.5s;
      }
      .tbox {
         padding: 10px;
         width: 0;
         transition: width 0.5s;
      }
      .tbox:focus {
         width: 250px;
      }
      .btn {
         width: 50px;
         background-color: seagreen;
      }
   </style>
</head>
<body>
   <div class="nav-bar">
      <div class="menu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Coding ground</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Whiteboard</a></li>
            <li><a href="#">Tools</a></li>
         </ul>
      </div>
      <div class="search-box">
         <input type="text" class="tbox" placeholder="Type to search..." />
         <button class="btn"><i class="fas fa-search"></i></button>
      </div>
   </div>
</body>
</html>

在执行上面的程序之后，点击搜索输入文本框，以查看动画效果 –