204 lines
5.0 KiB
HTML
204 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>自适应导航栏</title>
|
|
<style>
|
|
/* 基础样式 */
|
|
.nav {
|
|
background-color: #154d9b;
|
|
}
|
|
.nav-box {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
height: 62px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
position: relative; /* 确保下拉菜单定位正确 */
|
|
}
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.navbar li + li {
|
|
margin-left: 10px;
|
|
}
|
|
.navbar li a {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.navbar li .zhsk {
|
|
content: url(nav_zhsk.png);
|
|
width: 73px;
|
|
height: 21px;
|
|
}
|
|
.navbar li .ggw {
|
|
content: url(nav_gaige.png);
|
|
width: 50px;
|
|
height: 21px;
|
|
}
|
|
.navbar li .cxgc {
|
|
content: url(nav_cxgc.png);
|
|
width: 73px;
|
|
height: 21px;
|
|
}
|
|
.search {
|
|
position: relative;
|
|
}
|
|
.search .icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
background: url(navrarr.jpg) no-repeat center;
|
|
}
|
|
.search-container {
|
|
z-index: 99;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
position: absolute;
|
|
background: #ccc;
|
|
padding: 12px 13px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
|
|
right: -30px;
|
|
top: 40px;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
}
|
|
.search:hover .search-container {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.search-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 35px;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 10px solid #ccc;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.search-input {
|
|
width: 240px;
|
|
height: 36px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
padding: 0 10px;
|
|
outline: none;
|
|
}
|
|
.search-input::placeholder {
|
|
color: #aaa;
|
|
}
|
|
.search-button {
|
|
flex: none;
|
|
padding: 0 10px;
|
|
height: 36px;
|
|
border: none;
|
|
background: white;
|
|
color: black;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
margin-left: 5px;
|
|
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.search-button:hover {
|
|
background: #eee;
|
|
}
|
|
|
|
/* 移动端样式 */
|
|
@media screen and (max-width: 768px) {
|
|
.navbar {
|
|
display: none; /* 默认隐藏导航栏 */
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 62px;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #154d9b;
|
|
padding: 10px 0;
|
|
}
|
|
.navbar.active {
|
|
display: flex; /* 展开时显示导航栏 */
|
|
}
|
|
.navbar li {
|
|
margin: 0;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
}
|
|
.navbar li + li {
|
|
margin-left: 0;
|
|
}
|
|
.menu-toggle {
|
|
display: block !important; /* 显示菜单切换按钮 */
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
}
|
|
.search {
|
|
display: none; /* 隐藏搜索框 */
|
|
}
|
|
}
|
|
|
|
/* 隐藏菜单切换按钮（默认隐藏） */
|
|
.menu-toggle {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="nav">
|
|
<div class="nav-box centerWidth">
|
|
<ul class="navbar">
|
|
<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>
|
|
<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>
|
|
<li><a href="#">专家学者</a></li>
|
|
<li><a href="#">专题聚焦</a></li>
|
|
<li><a href="#">文献资源</a></li>
|
|
<li><a href="#" class="zhsk">智慧社科</a></li>
|
|
<li><a href="#" class="ggw">改革网</a></li>
|
|
<li><a href="#" class="cxgc">创新工程</a></li>
|
|
</ul>
|
|
<div class="search pcshow">
|
|
<div class="icon"></div>
|
|
<div class="search-container">
|
|
<input type="text" class="search-input" placeholder="请输入关键词">
|
|
<button class="search-button">搜 索</button>
|
|
</div>
|
|
</div>
|
|
<!-- 移动端菜单切换按钮 -->
|
|
<div class="menu-toggle" id="menuToggle">☰</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript 实现菜单切换
|
|
const menuToggle = document.getElementById('menuToggle');
|
|
const navbar = document.querySelector('.navbar');
|
|
|
|
menuToggle.addEventListener('click', () => {
|
|
navbar.classList.toggle('active');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |