資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在響應式導航選單中新增搜尋框？
要新增搜尋框，請在網頁上使用input type text。將搜尋框設定在導航選單內。讓我們首先設定如何建立一個響應式導航選單並放置搜尋框。
設定導航選單及其中的搜尋框
首先，使用<nav>建立一個導航選單。連結使用<a>元素設定。為搜尋框設定input type="text"。這將搜尋框新增到導航選單中：
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> Home
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-user"></i> Login
</a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> Contact Us
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> More Info
</a>
<input type="text" placeholder="Search Here.." />
</nav>
放置導航連結
菜單鏈接經過樣式設定並居中放置。使用值為**none**的**text-decoration**屬性刪除下劃線：
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
設定搜尋框樣式
使用值為**right**的**float**屬性將搜尋框放置在右側。
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
使導航選單響應式
媒體查詢構成導航選單的響應式特性。當您需要為不同的裝置（如平板電腦、手機、桌上型電腦等）設定樣式時，可以使用媒體查詢。當螢幕尺寸小於830px時，連結的**display**屬性將設定為**block**：
@media screen and (max-width: 830px) {
.links {
display: block;
}
示例
以下是將搜尋框新增到響應式導航選單中的程式碼：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 830px) {
.links {
display: block;
}
input[type="text"] {
display: block;
width: 100%;
margin: 0px;
border-bottom: 2px solid rgb(178, 137, 253);
text-align: center;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> Home
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-user"></i> Login
</a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> Contact Us
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> More Info
</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
更新於：2023年11月15日
260 次瀏覽
廣告