一、导航菜单
HTML部分
即页面样式，组成很简单，即一个文本输入框和一个搜索图标，这里图标可以自行搜索下载一个，或者像下面一样使用在线图标，全部代码如下：
先在内部添加以下代码，使用在线图标：
[/span>link href=""
rel="stylesheet"
然后在网页内需要添加搜索栏的合适位置添加以下代码，一般放在顶部导航栏：
[/span>div class="search"
[/span>i class="material-icons search-icon search-start"
[/span>input type="text" class="search-input" placeholder="Searching..." />
[/span>i class="material-icons search-icon search-clear"
[/span>div class="search-results"
上面的clear是一个清除输入框内容的图标，search-results是用于输出匹配到的结果的板块；
CSS部分
然后来看一下CSS样式代码，仅供参考：
.search {
position: relative;
Height＜/span>: 30px;
text-align: right;
line-Height＜/span>: 30px;
padding-right: 10px;
}
.search .search-icon {
float: right;
Height＜/span>: 100%;
margin: 0 10px;
line-Height＜/span>: 30px;
cursor: pointer;
user-select: none;
}//代码效果参考：http://www.ezhiqi.com/zx/art_4632.html
.search .search-input {
float: right;
Width＜/span>: 30%;
Height＜/span>: 30px;
line-Height＜/span>: 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＜/span>: 50%;
max-Height＜/span>: 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;
}//代码效果参考：http://www.ezhiqi.com/bx/art_2831.html
HTML部分CSS部分
BNDong IT技术类博客
EOF
本文作者： 夏日有风 本文链接： 关于博主： 评论和私信会在第一时间回复。或者直接私信我。 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！ 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。
点到为止
