一、导航菜单

⼀、导航菜单
⼀、导航菜单
HTML部分
即页⾯样式，组成很简单，即⼀个⽂本输⼊框<input>和⼀个搜索图标，这⾥图标可以⾃⾏搜索下载⼀个，或者像下⾯⼀样使⽤在线图标，全部代码如下：先在<header></header>内部添加以下代码，使⽤在线图标：
<link href="https:///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;
}。