如何使侧面导航浮动在全角滑块上
[英]how do I make my side nav float over my full width slider
问题描述
我试图让我的侧面导航浮动在网页顶部的全角滑块顶部，当我在网页上放置一个滑块时，我的侧面导航的导航按钮变成不可单击的尝试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 个解决方案
解决方案1
1 已采纳 2018-08-05 23:41:04
使用CSS使用.sidenav定位您的Navigation Div，并将Height和width替换为
高度：100vh; 宽度：100vw;
这将使您的导航DIV使用“全屏”。 要获得更多帮助，请提供JavaScript代码，以便我们可以看到您正在尝试使用JS click Events做什么。
谢谢
如何在我的图像 slider 上添加文本并使每个图像都不同？
[英]How do I add text over my image slider and make it different for each image?
如何在狂欢商务的index.html.erb中制作全宽滑块
[英]How do I make a full width slider in index.html.erb of spree commerce
当我向上滚动并在向上滚动或当我将鼠标悬停在上面时，如何使导航条变得透明？
[英]How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.