Question

我想创建一个下拉搜索栏;一个类似于此博客http://www.theprivatelifeofagirl.com上显示的搜索栏 - 它出现在导航栏的右侧。基本上我希望在现有图标旁边显示“搜索图标”，然后读者可以点击该搜索图标并使搜索栏显示在导航栏下方。

我试图将一个类似的搜索栏编码在一起，但我遇到了一些重大困难。其中一个问题是我无法使图标图像可见。我把它编码在html中然而它不再出现在博客上。另一个问题是搜索栏不会出现“点击”而是自动出现 - 即刷新页面时。

我博客的网址如下：http://www.blankesque.com

我在下面列出了css编码：

.show-search {
position: absolute;
top: 55px;
right: 95px;
display: block;
z-index: 10000;
}

.show-search #searchform input#s {
width: 150px;
background: #f5f5f5;
border: 1px solid #f0f0f0;
text-decoration: none;
font-family: karla, arial;
font-weight: normal;
font-size: 10.9px;
color: #494949;
text-transform: uppercase;
letter-spacing: 0.09em;
padding: 7px;
}
.show-search #searchform input#s:focus {
border: 1px solid #cccccc;
}
#top-search {
position:absolute;
right:0;
top:0;
width:80px;
text-align:center;
margin-left:0px;
}
#top-search a {
height:50px;
font-size:14px;
line-height:50px;
color:#343434;
border-left: 1px solid #f0f0f0;
display:block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.search input#s {
border: 1px solid #e5e5e5;
background: #fff url(http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/829C0943-C2A2-4052-BFF5-49E6606F44B6_zps3r9lpyvb.gif) no-repeat 96% 13px;
padding: 0;
font-size:11px;
color:#999;
letter-spacing:1px;
}
#searchform #s:focus { outline:none; }

HTML编码如下：

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

Javacript编码如下：

<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>

非常感谢此事的任何意见。

Answer 1

在你的HTML中

你需要添加一个图像标签

<div id='top-search'>
<a href='#'>

//Need to an img here
<img src="url to image">

<i class='search'/>
</a>
</div>

至于您的搜索自动显示您可以将显示更改为无。

.show-search {
position: absolute;
top: 55px;
right: 95px;
display: none;
z-index: 10000;
}

自定义搜索栏

1 个答案: