我制作了两个导航条：顶部是静态的，侧面是悬停效果的。我希望它在悬停时调整大小(我已经完成了(，但当它的宽度增加时，主要内容保持不变。我如何连接它，以便主要内容也会移动一点？
链接：JS FIDDLE
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="#home" class="active">Home</a>
</div>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#search">Register <span><i class="fa fa-user-plus" aria-hidden="true"></i></span></a>
<a href="#about">Log In <span><i class="fa fa-user" aria-hidden="true"></i></span></a>
</div>
</div>
<nav class="navbar">
<ul class="navbar-nav">
<li class="menu"><a href="#" class="nav-link"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a></li>
<li class="logo"><a href="#" class="nav-link"><span class="link-text">Library</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">Home</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">About</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">Contact</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">More</span></a></li>
</ul>
</nav>
<main>
感谢
我只在css中添加了一条规则来实现它。
.navbar:hover+main {
margin-left: 10rem;
}
因此，当鼠标悬停.navbar时，获取带有标记main的下一个子项，并将margin-left作为与侧边栏宽度相同的量。你可以添加一个transition使其看起来平滑
:root {
font-size: 16px;
}
body {
color: black;
margin: 0px;
padding: 0px;
}
main {
margin-left: 5rem;
margin-right: 5rem;
padding: 3rem;
}
.navbar {
width: 6rem;
height: 100%;
position: fixed;
background-color: transparent;
transition: width 200ms ease;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-link {
display: flex;
align-items: center;
height: 2rem;
filter: grayscale(100%) opacity(0.7);
text-decoration: none;
font-size: 1.2rem;
text-align: center;
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background-color: lightblue;
}
.link-text {
display: none;
margin-left: 1rem;
}
.navbar:hover {
width: 10rem;
background-color: #333;
transition: all 0.3s ease-in-out;
}
.navbar:hover+main {
margin-left: 10rem;
}
.navbar:hover .link-text {
display: block;
align-items: center;
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 2rem;
margin-top: 2rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
#menu {
margin-left: 10px;
text-align: center;
color: black;
font-size: 2rem;
}
#menu:hover {
margin-left: 10px;
text-align: center;
color: gold;
font-size: 2rem;
}
/* Add a black background color to the top navigation */
.topnav {
position: absolute;
/*position: relative;*/
background-color: #333;
overflow: hidden;
padding-left: 3rem;
width: 100%
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1rem;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
.topnav a,
.topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
i {
font-size: 1rem;
padding-right: 5px;
}
a span {
position: relative;
}<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="#home" class="active">Home</a>
</div>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#search">Register <span><i class="fa fa-user-plus" aria-hidden="true"></i></span></a>
<a href="#about">Log In <span><i class="fa fa-user" aria-hidden="true"></i></span></a>
</div>
</div>
<nav class="navbar">
<ul class="navbar-nav">
<li class="menu"><a href="#" class="nav-link"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a></li>
<li class="logo"><a href="#" class="nav-link"><span class="link-text">Library</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">Home</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">About</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">Contact</span></a></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="link-text">More</span></a></li>
</ul>
</nav>
<main>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>如果你不想让你的主要内容变得更小，而是完全向右移动，你可以添加margin-right: -10rem;，但很难做出响应。