设计带有动画搜索框的导航栏
htmlweb developmentfront end technology更新于 2024/11/16 7:08:17
导航栏 HTML 是网页顶部的水平栏，其中包含链接、下拉菜单和搜索框，可链接到网页中的相应部分/页面。这可以帮助用户轻松浏览网站。导航栏可以通过多种方式实现，但传统的实现方式是水平和垂直栏。
在本文中，我们将使用简单的 HTML 和 CSS 设计一个带有动画搜索框的导航栏。
创建带有动画搜索框的导航栏
方法如下:
创建一个带有"nav-bar"类的 <div> 元素来设计导航栏。
在"nav-bar"div 内部，创建另一个 <div>元素，类名为"menu"，用于添加菜单项。
在"menu"div 内，创建一个无序列表 <ul>，并在其中为导航栏上的每个菜单项添加 <li>。
在"menu"后创建另一个 <div>，类名为"search-box"，用于添加搜索框。
在"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>
执行上述程序后，点击搜索输入文本字段即可查看动画效果 −
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
