創建導航欄的下拉搜索欄

我希望能幫助您編寫我的懸停導航欄上顯示的下拉搜索欄。此類元素的示例可以在以下博客中查看 - 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

創建導航欄的下拉搜索欄

回答

相關問題