我想通过 css 和可能的 jQuery 实现这种效果。那就是创建一个隐藏的搜索栏,并在单击标签中的搜索图标时很好地向左滑动。但我做不到。我确实设法取得了一些成就,但这很无聊。我希望过渡看起来像 W3school 和许多其他网站中的过渡。 这是我的代码:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contac</a></li>
</ul>
<div id="search-enclose">
<form>
<div id="label-enclose">
<label></labe>
</div>
<div id="input-enclose">
<input type="text" placeholder="Enter Keyword">
</div>
</form>
</div>
</nav>
CSS:
nav {
position: relative;
}
ul {
position: absolute;
left: 25%;
list-stye: none;
z-index: 10;
}
li{
float: right;
}
#search-enclose {
width: 500px;
}
#label-enclose {
position: absolute;
top: 46px;
left: 30%;
height: 35px;
width: 60px;
line-height: 35px;
z-index: 20;
}
#label-enclose label {
display: block;
height: 35px;
width: 60px;
cursor: pointer;
}
#input-enclose {
position: absolute;
top: 46px;
width: 300px;
height: 35px;
z-index: 5;
overflow: hidden;
}
#input {
display: block;
position: absolute;
width: 270px;
height: 35px;
margin: 0;
border: none;
color: #fff;
font-size: 18px;
backface-visibility: none;
border-radius: 0;
transition: left 0;
}
#input-enclose input:focus {
outline: none;
}
#input-enclose .focus {
display: block;
}
#input-enclose .focus input {
left: 0;
transition: left 0.3s;
}
JavaScript
var searchImage = document.getElementById('img');
var input = document.getElementById('input');
searchImage.addEventListener('click', function() {
if (classie.hasClass(input,'focus')) {
classie.removeClass(input,'focus')
}else {
classie.addClass(input, 'focus')
}
});
就其值(value)而言,这几乎是我在网上找到的代码的副本,我的格式和 CSS 很糟糕,但我知道我想要什么,只要有一个好的方向,我就能实现。只是希望搜索栏显示在导航列表项的顶部,当以一种很好的方式点击时, 我确实认为 CSS 过渡可以实现这一点,但事实并非如此。任何人都可以给我一个指导吗?
最佳答案
这是一个仅使用 CSS 的示例。
触发字段打开的是焦点状态。单击其他任何地方都会关闭搜索字段。
我没有包含搜索按钮,但您可以将其添加到字段旁边,将其隐藏并置于焦点上,显示按钮并隐藏标签。
body {
font-family: sans-serif;
font-size: 16px;
}
#search-enclose {
border: 1px solid #ccc;
overflow: hidden;
}
#label-enclose {
border-left: 1px solid #ccc;
float: right;
}
#label-enclose label {
padding: 1em;
cursor: pointer;
display: inline-block;
}
#input-enclose {
float: right;
font-size: 0;
}
#input-enclose input {
border: none;
border-left: 1px solid #ccc;
padding: 1.1em 0;
font-size: 16px;
width: 0;
margin-right: -1px;
transition: all .3s;
}
#input-enclose input:focus {
width: 15em;
padding-left: 1em;
padding-right: 1em;
outline: none;
}
button {
border: none;
border-left: 1px solid #ccc;
padding: 1.1em 0;
background: #fff;
font-size: 16px;
cursor: pointer;
width: 0;
margin-right: -1px;
overflow: hidden;
transition: all .3s;
}
#input-enclose input:focus + button {
width: 5em;
padding: 1.1em;
border-right: 1px solid #ccc;
margin-right: -3.1em;
}
svg {
width: 1em;
height: 1em;
}
<nav>
<div id="search-enclose">
<form>
<div id="label-enclose">
<label for="fldSearch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="fill: rgb(0, 0, 0);" xml:space="preserve">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" style="fill: rgb(0, 0, 0);"></path>
</svg></label>
</div>
<div id="input-enclose">
<input type="text" placeholder="Enter Keyword" id="fldSearch">
<button type="submit">Search</button>
</div>
</form>
</div>
</nav>
关于javascript - 我如何创建一个在单击标签时向左滑动的搜索栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40626695/