3种带导航的搜索框【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

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

页面的body部分，将三种导航搜索框放入不同的header标签里，代码如下：

<header id="header-1" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-1"></a>
    </div>
    <ul class="menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">企业文化</a></li>
      <li><a href="#">产品研发</a></li>
      <li><a href="#">人才招聘</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="搜索什么你说了算" />
    </form>
  </nav>
</header>

<header id="header-2" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-2"></a>
    </div>
    <ul class="menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">企业文化</a></li>
      <li><a href="#">产品研发</a></li>
      <li><a href="#">人才招聘</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="搜索什么你说了算" />
    </form>
  </nav>
</header>

<header id="header-3" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-3"></a>
    </div>
    <ul class="menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">企业文化</a></li>
      <li><a href="#">产品研发</a></li>
      <li><a href="#">人才招聘</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="搜索什么你说了算" />
    </form>
  </nav>
</header>

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

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>