为可扩展的搜索栏编写代码,其中的导航链接会变成一个框,可以通过以下步骤实现:
<select>
元素来创建一个下拉菜单,其中的选项即为导航链接。<div class="search-bar">
<input type="text" id="search-input" placeholder="输入关键词">
<button id="search-btn">搜索</button>
<select id="nav-links">
<option value="link1">导航链接1</option>
<option value="link2">导航链接2</option>
<option value="link3">导航链接3</option>
</select>
</div>
.search-bar {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 40px;
border: 1px solid #ccc;
border-radius: 20px;
padding: 5px;
}
#search-input {
flex: 1;
border: none;
outline: none;
}
#search-btn {
border: none;
outline: none;
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border-radius: 20px;
cursor: pointer;
}
#nav-links {
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
document.getElementById("search-btn").addEventListener("click", function() {
var keyword = document.getElementById("search-input").value;
var selectedLink = document.getElementById("nav-links").value;
// 执行搜索操作,根据关键词和导航链接进行搜索
// ...
});
以上是一个简单的可扩展搜索栏的代码示例,通过 HTML、CSS 和 JavaScript 的结合,实现了搜索栏的基本功能,并将导航链接变成了一个下拉菜单。根据实际需求,可以进一步完善代码,添加搜索功能的具体实现、样式调整、搜索结果展示等功能。
领取专属 10元无门槛券
手把手带您无忧上云