数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学设计一个带有动画搜索框的导航栏
导航栏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>
执行上述程序后，单击搜索输入文本字段以查看动画效果：
更新于：2023年8月4日
1K+ 次浏览
广告