-
搜索栏在我们的网站是必不可少的。尤其是在有限的页面空间中，放置一个重要的搜索栏是一个难题。今天我将介绍如何使用CSS3和jQuery实现一个可扩展的搜索栏。
HTML
下面的HTML代码放在需要放置搜索栏的页面中。搜索栏# search_bar包含一个窗体#以下是我参考网上的形式。搜索输入框#搜索，搜索button.search_btn和搜索按钮icon.search_ico置于形式。
复制代码代码如下所示：
<输入类输入占位符要搜索某物……
类型>文本名称密钥
CSS
我们荣耀的整个搜索栏布局通过CSS，我们使用CSS3的代码。
复制代码代码如下所示：
。search_bar {位置：相对；边距：10px；
宽度：0%；最小宽度：60px；身高：60px；
浮点数：正确；溢出：隐藏；
过渡：0.3s WebKit的宽度；
过渡：宽度0.3s -moz；
过渡：宽度0.3s；
WebKit的背面可见性：隐藏；
背景：# 162934；
}
输入{。
位置：绝对值；顶部：0；右：0；
边界：无；大纲：无；
宽度：98%；高度：60px；线高度：60px；Z指数：10；
字体大小：20px；颜色：# f9f9f9；背景：透明
}
。search_ico，search_btn {。
宽度：60px；身高：60px显示：块；
位置：绝对值；右：0；顶部：0；
填充物：0；保证金：0；线高度：60px；鼠标指针；
}
。search_ico {背景：# e67e22 URL（图标png）没有重复18px 20px；Z指数：90；}
search_open {宽度：100%！重要的；Z指数：1002 }
#显示{位置：绝对；填充：20px }
上述代码的关键是转变：宽度0.3s，可以实现CSS3动画效果。宽度从0变为100%，所以你可以看到CSS3手册的相关介绍。这里没有太多的描述，你可以直接拷贝和修改代码来应用到你的项目中。
jQuery
单击搜索按钮时，搜索bar.search_bar开关style.search_open通过toggleclass（），它实现了搜索栏的收缩和扩展的功能。此外，我们还需要判断输入的情况。当输入满足条件时，我们提交搜索表来实现搜索功能。请参阅代码：
复制代码代码如下所示：
$（函数（）{（））
$（。search_ico）。Click（function（）{）
$（。search_bar ）ToggleClass（'search_open）；
VAR键=美元（#搜索）瓦迩（）；
如果（键，长度> 2）{
$（#搜索）瓦迩（）；
$（以下是我参考网上# ）提交（）；
其他{ }
返回false；
}
}）；
}）；
这种效果可以应用到移动终端项目中，当然可以添加手动滑动效果。
上面的代码比较简单，希望对你有帮助学习jQuery CSS3。更多信息请继续关注我们的网站，有新的内容每天更新。