如何解决如何使用自定义搜索输入制作导航栏
因此,我正在尝试为朋友建立一个网站。他给我发送了导航栏的图像,并在导航栏的末尾附加了搜索输入。有人可以提供一些有关如何编写此代码的帮助。我将张贴他发送给我的图片。
我尝试使用:: after psuedo元素-但无法弄清楚。
解决方法
我们真的不知道您需要什么帮助,因为您没有给我们太多信息。但是我将使用以下代码来实现这一点。
<nav id="navbar" style="display: flex; flex-direction: row;">
<image src="logo.jpg"></image>
<a href="/a/">a</a> |
<a href="/b/">b</a> |
<a href="/c/">c</a> |
<a href="/d/">d</a>
<div id="Search">
<image src="magnifying-glass.jpg"></image>
<input value="Search">
</div>
</nav>
如果您不熟悉Flex,请使用以下网站:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
上面的代码将为您提供:
当然,您将需要大量CSS和实际图像。
,尝试这个例子
$("#searchBtn").click(function(e){
e.preventDefault();
$(this).addClass("active");
$(this).siblings("input").toggleClass("show");
});
.searchbar{
display:none;
}
.searchbar.show{
display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial,Helvetica,sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
border: none;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,.topnav input[type=text],.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#">Place</a>
<a href="#">Things</a>
<div class="search-container">
<form>
<button type="submit" class="btn btn-success" id="searchBtn">Search <i class="fa fa-search"></i></button>
<input type="text" placeholder="Search.." name="search" class="searchbar">
</form>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。