带导航图标的顶部搜索框

来源:https://www.sucaihuo.com/js/2927.html 2017-09-05 19:47浏览(870) 收藏

一款带导航图标的顶部搜索框代码,点击上面的搜索图标,会向下展开一个带确定按钮的搜索框,点击其他地方,则会收缩至原来的样式。
带导航图标的顶部搜索框
分类:表单代码 > 搜索框 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面元素的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,设置好header标签里的导航按钮和搜索表单,代码如下:

<header>
	<h1>素材火</h1>
	<button id="toggle-menu" class="header-button">菜单</button>
	<button id="toggle-basket" class="header-button">购物车</button></li>
	<button id="toggle-search" class="header-button">搜索</button></li>
	<form id="search-form" action="">
		<fieldset>
			<input name="search-terms" type="search" placeholder="请输入搜索内容" />
		</fieldset>
		<input type="submit" value="确定" />
	</form>
</header>
<div class="main"></div>

页面的底部,需引入jQuery库和必要的JS文件,代码如下:

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
标签: 搜索搜索框
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2