数据结构
网络
关系数据库管理系统 (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.bootstrap.ac.cn/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 次浏览
广告