html - 带搜索框的 CSS 响应式菜单
问题描述
如何在正确的位置显示图标,如下图所示?:
HTML 代码
<header id="logo"></header>
<div class="navbar" id="nav">
<a href="https://klia2.co" class="active">Home</a>
<a href="../facilities/index.htm">Facilities</a>
<a href="../airlines/index.htm">Airlines Offices</a>
<input type="text" placeholder="Search..">
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i>
</a> </div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
CSS 代码
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height:18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover, input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar input[type=text] {
float: right;
padding: 12px;
border: none;
margin-top: 3px;
margin-right: 5px;
}
@media screen and (max-width: 600px) {
.navbar a, .navbar input {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position:relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive input {
float: none;
display: block;
width: 90%;
padding: 12px;
border: 2px solid black;
text-align: left;
}
}
注意:对于搜索框,我需要将其设置为 HTML 表单,并将字体真棒搜索图标作为提交按钮,而不仅仅是普通的 HTML 图标标签。
解决方案
为此,只需使用以下代码更新您的HTML
<header id="logo"></header>
<div class="navbar" id="nav">
<a href="https://klia2.co" class="active">Home</a>
<a href="../facilities/index.htm">Facilities</a>
<a href="../airlines/index.htm">Airlines Offices</a>
<form class="search-box">
<input type="text" placeholder="Search..">
<button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
</form>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
console.log(barIcon)
if (x.className === "navbar") {
x.className += " responsive";
var barIcon = document.getElementsByClassName('fa-bars')[0];
barIcon.classList.add("fa-times");
barIcon.classList.remove("fa-bars");
} else {
var closeIcon = document.getElementsByClassName('fa-times')[0];
closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
x.className = "navbar";
}
}
</script>
和你的CSS与以下
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height:18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover, input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar .search-box {
float: right;
position: relative;
margin-top: 3px;
padding-right: 30px;
display: flex;
}
.navbar .search-box input {
padding: 12px;
border: none;
width: 100%;
height: 100%;
padding: 10px;
}
.navbar .search-box button {
color: #999;
border: navajowhite;
padding: 10px;
}
@media screen and (max-width: 600px) {
.navbar a, .navbar .search-box, .navbar .search-icon {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position:relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .search-box {
float: none;
display: flex;
width: 90%;
padding: 4%;
border: 2px solid black;
}
.navbar.responsive .search-icon{
display: flex;
}
}
享受!
推荐阅读
- vue.js - 如何复制 Vuex 商店并将其导入新商店
- android - 使用动态模块时的双重Activity定义
- sql - 如果 join 返回 null 则加入默认行
- python - Anaconda“权限被拒绝:Untitled.ipynb”错误
- javascript - 侧边栏导航选项
- javascript - $scope.varaiable 不能在 jquery 函数中访问
- xml - 如何从 Powershell 中的 Get-GPOReport 解析 XML?
- sql-server - 加入最大值和空值
- bash - 如果条件的 Bash 脚本
- algorithm - 用任意放置的磁盘解决河内塔?