一、导航菜单

一、导航菜单

HTML部分

即页面样式，组成很简单，即一个文本输入框<input>和一个搜索图标，这里图标可以自行搜索下载一个，或者像下面一样使用在线图标，全部代码如下：

先在<header></header>内部添加以下代码，使用在线图标：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

然后在网页内需要添加搜索栏的合适位置添加以下代码，一般放在顶部导航栏：

<div class="search">
    <i class="material-icons search-icon search-start">search</i>
    <input type="text" class="search-input" placeholder="Searching..." />
    <i class="material-icons search-icon search-clear">clear</i>
    <div class="search-results"></div>
</div>

上面的clear是一个清除输入框内容的图标，search-results是用于输出匹配到的结果的板块；

CSS部分

然后来看一下CSS样式代码，仅供参考：

.search {
    position: relative;
    height: 30px;
    text-align: right;
    line-height: 30px;
    padding-right: 10px;
}

.search .search-icon {
    float: right;
    height: 100%;
    margin: 0 10px;
    line-height: 30px;
    cursor: pointer;
    user-select: none;
}

.search .search-input {
    float: right;
    width: 30%;
    height: 30px;
    line-height: 30px;
    margin: 0;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
}

.search .search-clear {
    display: none;
}

.search .search-results {
    display: block;
    z-index: 1000;
    position: absolute;
    top: 30px;
    right: 50px;
    width: 50%;
    max-height: 400px;
    overflow: auto;
    text-align: left;
    border-radius: 5px;
    background: #ccc;
    box-shadow: 0 .3rem .5rem #333;
}

.search .search-results .result-item {
    background: aqua;
    color: #000;
    margin: 5px;
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
}