悬停导航栏时移动主要内容
Moving main content when hovering navbar
我制作了 2 个导航栏：顶部是静态的，侧面是悬停效果。我希望它在悬停时调整大小（我已经完成了）但是当它的宽度上升时主要内容保持不变。我如何连接它，以便主要内容也移动一点？
Link: 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;，但很难让它响应。
我制作了 2 个导航栏：顶部是静态的，侧面是悬停效果。我希望它在悬停时调整大小（我已经完成了）但是当它的宽度上升时主要内容保持不变。我如何连接它，以便主要内容也移动一点？
Link: 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;，但很难让它响应。