資料結構
網路
關係資料庫管理系統 (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" 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+ 次瀏覽
廣告