创建导航栏的下拉搜索栏

我希望能帮助您编写我的悬停导航栏上显示的下拉搜索栏。此类元素的示例可以在以下博客中查看 - 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>

在这件事情上的任何输入将不胜感激。该URL到我的博客如下：http://www.blankesque.com

来源

2016-01-24 Iram

你可以用js来达到这个目的。当你点击那个改变你的CSS的图标时，你创建一个事件，使你的搜索表单下拉。 –

<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

这不完全一样，在您的网站，但它的工作，你可以风格，并改变它与您的网站:)工作。

来源

2016-01-24 15:32:10

谢谢你的回答。然而，道歉，我不是非常有知识的HTML和代码语言。我无法使用您提供的代码获得预期的效果。也许我在做一些不正确的事 – Iram

也许你可以给你的网站提供一个链接，或者你可以创建一个jsfiddle，这样我就可以将它应用到那里:)。另外，您是否在头文件中包含了http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js？这是js工作所必需的:) –

我不知道我是否想要添加那段代码。我对HTML没有太多的知识。如果你能给我确切的指示，我会很感激。此外，该网站的URL如下：http://www.blankesque.com – Iram

创建导航栏的下拉搜索栏

回答

相关问题