如何让侧边导航浮动在全宽滑块上？
如何让侧边导航浮动在全宽滑块上？
提问于 2018-08-06 07:10:16
我试图让我的侧面导航浮动在我的网页顶部的全宽滑块的顶部，当我在网页上放置一个滑块时，我侧面导航的导航按钮变得不可点击尝试z-index方法它似乎不起作用，任何建议都会非常感谢提前。
<header>
<!-- sidebar starts-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn hvr-grow-rotate" onclick="closeNav()">×</a>
<h3 class="nav-title">test</h3>
<li><a href="index.html"><span class="fa fa-home nav-icon"> Home</span></a></li>
<li><a href="#"><span class="fas fa-store nav-icon"> About</span></a></li>
<li><a href="#"><span class="fas fa-cut nav-icon"> Services</span></a></li>
<li><a href="#"><span class="far fa-images nav-icon"> Gallery</span></a></li>
<li><a href="#"><span class="fas fa-comments nav-icon"> Reviews</span></a></li>
<li><a href="#"><span class="fas fa-map-marked-alt nav-icon"> Location</span></a></li>
<li><a href="#"><span class="fas fa-envelope nav-icon"> Contact Us</span></a></li>
<h5 class="nav-title-Socials">Our Socials</h5>
<ul class="icons">
<li class="facebook-icon hvr-bounce-in"><a href="#"><i class="fab fa-facebook color-facebook"></i></a></li>
</ul>
</div>
<div id="main" class="text-right">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
</header>
<body>
<div class="">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/cccccc/ffffff">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
<div class="carousel-caption">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
</ul>
</div><!-- End Carousel -->
</div>
/* Nav CSS */
.sidenav {
z-index : 99999;
height: 100%;
width: 0;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
opacity: 0.9;
letter-spacing: 1.5px;
background: #a2a9b4;
position: absolute;
clear: both;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
color: white;
}
.sidenav .closebtn {
position: absolute;
top: 5px;
right: 15px;
font-size: 36px;
margin-left: 50px;
color: #fff;
background-color: rgba(66, 66, 66, 0.5);
padding: 0px 14px;
border-radius: 5px;
}
#main {
transition: margin-right 0.5s;
padding: 16px;
float: right;
}
#main span {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 0px 10px;
border-radius: 5px;
}
.nav-title{
font-family: 'fiolex_girls';
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
transition: 0.3s;
color: white;
}
/* = slider
----------------------------------------------- */
#myCarousel .nav a small {
display:block;
z-index: -98;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight = "0";
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-06 07:41:05
使用.sidenav将导航部分作为目标，并将高度和宽度替换为
高度:100vh；宽度:100vw；
这将允许您的导航DIV使用整个屏幕。要获得更多帮助，请给出JavaScript代码，这样我们就可以知道您试图使用JS单击事件来做什么。
谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51698911
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号