CSS 带搜索导航栏

文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。

以下实例均是响应式的。

可以先看下效果图：

创建一个搜索栏

HTML 代码

</div>

CSS 代码

/* 在顶部导航栏中添加黑色背景颜色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

面就展示几款用纯CSS3制作的搜索框效果，具体如下：

实现代码：

css:

近项目需求，写了一个类似百度搜索框的功能。

把代码整理了一遍，然后分享出来给大家看看，如果有不对的地方请多指教。

实现效果

使用的语言：html，css,JavaScript,jQuery

代码部分

html部分：

<div style="color: #323232; ">
查找：
<input id="input"/>
<button>搜索</button>
<ul id="ul" style="display:none;z-index: 2;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
</div>

js部分：

$(document).ready(function(){
//先监听input的值变化
document.getElementById("input").oninput=function(){
var val = $(this).val()
if(val!=""){
//当input中有值的时候显示ul列表
$("#ul").css("display","block")
var a = -1 //设置一个变量用来控制键盘上下键选中的li标签
//开始监听键盘事件
document.onkeydown = function (e) {
e = e || window.event;
var code = e.keyCode //用来储存 e.keycode
if(code==40){
console.log("下")
//获取ul中的li个数，使选择不会超出
if(a<$("#ul").children("li").length){
a++;
//开始获取到选择中的li标签
$("#ul").children("li").eq(a)
}
}else if(code==38){
console.log("上")
//获取ul中的li个数，使选择不会超出
if(0<a){
a--;//开始获取到选择中的li标签
$("#ul").children("li").eq(a)
}
}else if(code==13){
console.log("回车")
}
}
}else{
//当input中没有值的时候隐藏ul列表
$("#ul").css("display","none")
}
}
//给body添加一个点击事件来隐藏ul，使用户点击页面ul可以隐藏，不用input失去焦点是因为在选择li的时候很容易出bug
$("body").click(function(){
$("#ul").css("display","none")
})
//好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭，不然很容易出BUG
$("#input").blur(function(){
document.onkeydown =null
})
})

全部代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现百度搜索输入框</title>
</head>
<body>
<!--
作者：380012546@qq.com
时间：2018-08-02
描述：实现百度搜索输入框的功能
-->
<div style="color: #323232; ">
查找：
<input id="input"/>
<button>搜索</button>
<ul id="ul" style="display:none;z-index: 2;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
//先监听input的值变化
document.getElementById("input").oninput=function(){
var val = $(this).val()
if(val!=""){
//当input中有值的时候显示ul列表
$("#ul").css("display","block")
var a = -1 //设置一个变量用来控制键盘上下键选中的li标签
//开始监听键盘事件
document.onkeydown = function (e) {
e = e || window.event;
var code = e.keyCode //用来储存 e.keycode
if(code==40){
console.log("下")
//获取ul中的li个数，使选择不会超出
if(a<$("#ul").children("li").length){
a++;
//开始获取到选择中的li标签
$("#ul").children("li").eq(a)
}
}else if(code==38){
console.log("上")
//获取ul中的li个数，使选择不会超出
if(0<a){
a--;//开始获取到选择中的li标签
$("#ul").children("li").eq(a)
}
}else if(code==13){
console.log("回车")
}
}
}else{
//当input中没有值的时候隐藏ul列表
$("#ul").css("display","none")
}
}
//给body添加一个点击事件来隐藏ul，使用户点击页面ul可以隐藏，不用input失去焦点是因为在选择li的时候很容易出bug
$("body").click(function(){
$("#ul").css("display","none")
})
//好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭，不然很容易出BUG
$("#input").blur(function(){
document.onkeydown =null
})
})
</script>
</html>

在线咨询

上一篇：手把手教你前端的各种文件上传攻略和大文件断点续传
下一篇：常用html5移动端显示隐藏展开菜单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 带搜索导航栏

创建一个搜索栏

HTML 代码

CSS 代码

您的项目需求