Question

我想帮助编码我的悬停导航栏上显示的下拉搜索栏。可以在以下博客中查看此类元素的示例 - http://www.theprivatelifeofagirl.com/ - 位于导航栏的右上角。

我的搜索栏已在我自己的导航栏中编码，但我希望只有小的“搜索图标”可见，并且读者可以点击图标并搜索栏下拉，然后读者可以输入他们正在搜索的内容。我在下面的搜索栏中包含了相关的html和css编码：

<style>
#search {
   text-align: left;
   margin-right: -7%;
   width: 100%;
   float: right;
   max-width: 210px;
   border: 0;
 }
 #searchform {
   height: 20px;
 }
 #search #s {
   background: #f5f5f5 url(http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/829C0943-C2A2-4052-BFF5-49E6606F44B6_zps3r9lpyvb.gif)98% 50% no-repeat;
   color: #494949;
   background-size: 15px;
   font-size: 10.5px!important;
   font-family: karla, arial;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: normal;
   letter-spacing: 0.09em;
   border: 0;
   width: 60%;
   padding: 0;
   margin: 0;
   outline: none;
   position: relative;
   top: 18px;
   padding-left: 6px;
 }
.searchborder {
border-left: 1px solid #f0f0f0;
position: absolute;
margin: 0;
right: 10px;
bottom: 0px;
height: 50px;
}
</style>

<div class='searchborder'>
<div id='search' title='Type and hit enter'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;)    {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/>
 </form>
</div>
<br/>
<br/>
   </div>

非常感谢此事的任何意见。我博客的网址如下：http://www.blankesque.com

Answer 1

<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#top-search a').on('click', function(e) {
    e.preventDefault();
    $('.show-search').slideToggle('fast');
});
});
//]]></script>

<div id='top-search'>
<a href='#'><i class='fa fa-search'></i></a>
</div>
<div class='show-search'>
<form action='/search' id='searchform' method='get' role='search'>
<div>
<input id='s' name='q' placeholder='Search and hit enter...' type='text'/>
</div>
</form>

这在您展示的网站中使用。

编辑：

JSFiddle

它与您的网站上的不完全相同，但它正在运作，您可以设计并更改它以与您的网站一起使用:)。

为NavBar创建下拉搜索栏

1 个答案: