其实实现起来也很简单,用几行js,再加上一些css代码即可。
1、HTML结构
代码如下 | 复制代码 |
2、js代码
代码如下 | 复制代码 |
3、CSS
代码如下 | 复制代码 |
.search-inner{ height: 100%; float: right; } .toggle-search { line-height:48px; cursor: pointer; font-size:24px; display: block; position: absolute; right: -51px; top: -5px; color:#9e9e9e; width:48px; height:48px; background:#fff; border:1px solid #e7e7e7; border-radius:30px; text-align:center; } .toggle-search:hover{ color:#fff; background:#5396E2; } .search-expand { display: none; position: absolute; top: 6px; right: 0px; } .search-expand input { border: 2px solid #e2e2e2; border-radius: 0; } |
嗯,现在说一下怎么使用?
首先加载jquery.js, 然后把上面的js代码放到footer.php中的
之前即可。另外js代码中的选择符一定要与Html结构保持一致。
还有就是CSS,要弹出的搜索框开始的时候是要隐藏的,即使用display:none;点击之后,再弹出,使用就是js。