1. 首页
  2. 问答
  3. HTML导航上述主要的div

HTML导航上述主要的div

2016-12-30 27 views
1

于是，我从W3学校sidenav和它就像我希望它。但是我无法获得菜单的图标来浏览我的网页上的其他内容。它只是上面。我也做了绝对的定位，但没有成功。如果我这样做，导航栏显示错误。HTML导航上述主要的div

任何建议都会有帮助。 我已经包含了一个代码片段。

所以我想sidenav图标，在图片的顶部。

function w3_open() { 
 
    document.getElementById("mySidenav").style.display = "block"; 
 
} 
 
function w3_close() { 
 
    document.getElementById("mySidenav").style.display = "none"; 
 
} 
 

 
function myAccFunc() { 
 
    var x = document.getElementById("demoAcc"); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
     x.className += " w3-show"; 
 
    } else { 
 
     x.className = x.className.replace(" w3-show", ""); 
 
     x.previousElementSibling.className = 
 
     x.previousElementSibling.className.replace(" w3-green", ""); 
 
    } 
 
}
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 

 
BODY { 
 
    font-family: FuturaLight; 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 

 
.margin { 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #fff; 
 
    position: fixed !important; 
 
    z-index: 1; 
 
    overflow: auto; 
 
    position: relative; 
 
    -webkit-animation: animateleft 0.4s; 
 
    animation: animateleft 0.4s; 
 
    color: #fff !important; 
 
    background-color: #616161 !important; 
 
} 
 

 
.sidenav a{ 
 
    display: block; 
 
} 
 

 
.accordion { 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 

 
.opennav:hover, .closenav:hover { 
 
    cursor: pointer; 
 
    opacity: 0.8; 
 
    font-size:24px!important 
 
} 
 

 
.opennav, .closenav { 
 
    color: inherit; 
 
    font-size:24px!important; 
 
    z-index:999; 
 
}
<BODY> 
 
    <nav class="sidenav" style="display:none" id="mySidenav"> 
 
    <a href="javascript:void(0)" onclick="w3_close()" 
 
     class="closenav">Sluiten &times;</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <div class="accordion"> 
 
     <a onclick="myAccFunc()" href="#"> 
 
      Accordion <i class="fa fa-caret-down"></i> 
 
     </a> 
 
     <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    <a href="#">Link 5</a> 
 
</nav> 
 

 
<span class="opennav" onclick="w3_open()">&#9776;</span> 
 
    
 
    <img src="http://static.nationalgeographic.nl/uploads/media/image/photo-ark-alle-dieren-verzameld-foto-van-de-dag.jpg" style="width:100%">

来源

2016-12-30 Jari Flederick

+1

只需添加.opennav {位置：绝对的;颜色：#FFF}和你做。 –

回答

1

可以使用.opennav元件上的CSS属性float: left和position: absolute实现漂浮在图像的前面，而不是作为它上面的效果..

EDIT 然后以固定展示在sidenav了图标，简单地改变sidenav的z-index到998和图标997的z索引，使得图标出现在侧NAV

function w3_open() { 
 
    document.getElementById("mySidenav").style.display = "block"; 
 
} 
 

 
function w3_close() { 
 
    document.getElementById("mySidenav").style.display = "none"; 
 
} 
 

 
function myAccFunc() { 
 
    var x = document.getElementById("demoAcc"); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    x.className += " w3-show"; 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    x.previousElementSibling.className = 
 
     x.previousElementSibling.className.replace(" w3-green", ""); 
 
    } 
 
}
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 
BODY { 
 
    font-family: FuturaLight; 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 
.margin { 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
} 
 
.sidenav { 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #fff; 
 
    position: fixed !important; 
 
    z-index: 998; 
 
    overflow: auto; 
 
    position: relative; 
 
    -webkit-animation: animateleft 0.4s; 
 
    animation: animateleft 0.4s; 
 
    color: #fff !important; 
 
    background-color: #616161 !important; 
 
} 
 
.sidenav a { 
 
    display: block; 
 
} 
 
.accordion { 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 
.opennav:hover, 
 
.closenav:hover { 
 
    cursor: pointer; 
 
    opacity: 0.8; 
 
    font-size: 24px!important 
 
} 
 
.opennav { 
 
    color: white; 
 
    font-size: 24px!important; 
 
    z-index: 995; 
 
    float: left; 
 
    position: absolute; 
 
} 
 
.closenav { 
 
    color: white; 
 
    font-size: 24px!important; 
 
    z-index: 999; 
 

 
}
<BODY> 
 
    <nav class="sidenav" style="display:none" id="mySidenav"> 
 
    <a href="javascript:void(0)" onclick="w3_close()" class="closenav">Sluiten &times;</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <div class="accordion"> 
 
     <a onclick="myAccFunc()" href="#"> 
 
      Accordion <i class="fa fa-caret-down"></i> 
 
     </a> 
 
     <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    <a href="#">Link 5</a> 
 
    </nav> 
 

 
    <span class="opennav" onclick="w3_open()">&#9776;</span> 
 

 
    <img src="http://static.nationalgeographic.nl/uploads/media/image/photo-ark-alle-dieren-verzameld-foto-van-de-dag.jpg" style="width:100%">

来源

2016-12-30 09:45:40 mike510a

+0

确实，这工作。谢谢大家！ –

2

只需添加position: absolute;和它的行为就像你想要的。

改变img标签的造型现在看起来不错。

function w3_open() { 
 
    document.getElementById("mySidenav").style.display = "block"; 
 
} 
 
function w3_close() { 
 
    document.getElementById("mySidenav").style.display = "none"; 
 
} 
 

 
function myAccFunc() { 
 
    var x = document.getElementById("demoAcc"); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
     x.className += " w3-show"; 
 
    } else { 
 
     x.className = x.className.replace(" w3-show", ""); 
 
     x.previousElementSibling.className = 
 
     x.previousElementSibling.className.replace(" w3-green", ""); 
 
    } 
 
}
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 

 
BODY { 
 
    font-family: FuturaLight; 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 

 
.margin { 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: #fff; 
 
    position: fixed !important; 
 
    z-index: 1; 
 
    overflow: auto; 
 
    position: relative; 
 
    -webkit-animation: animateleft 0.4s; 
 
    animation: animateleft 0.4s; 
 
    color: #fff !important; 
 
    background-color: #616161 !important; 
 
} 
 

 
.sidenav a{ 
 
    display: block; 
 
} 
 

 
.accordion { 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 

 
.opennav:hover, .closenav:hover { 
 
    cursor: pointer; 
 
    opacity: 0.8; 
 
    font-size:24px!important 
 
} 
 

 
.opennav, .closenav { 
 
    color: inherit; 
 
    font-size:24px!important; 
 
    z-index:999; 
 
    color: #ffffff; 
 
} 
 

 
img { 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: -99999; 
 
}
<BODY> 
 
    <nav class="sidenav" style="display:none" id="mySidenav"> 
 
    <a href="javascript:void(0)" onclick="w3_close()" 
 
     class="closenav">Sluiten &times;</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <div class="accordion"> 
 
     <a onclick="myAccFunc()" href="#"> 
 
      Accordion <i class="fa fa-caret-down"></i> 
 
     </a> 
 
     <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    <a href="#">Link 5</a> 
 
</nav> 
 

 
<span class="opennav" onclick="w3_open()">&#9776;</span> 
 
    
 
    <img src="http://static.nationalgeographic.nl/uploads/media/image/photo-ark-alle-dieren-verzameld-foto-van-de-dag.jpg" style="width:100%">

来源

2016-12-30 09:41:06 aavrug

+0

确实乍看起来确实如此。我尝试过，但是当你打开菜单时，你看不到正确的东西。 –

+0

@JariFlederick新变化呢？ – aavrug

+0

@JariFlederick你也可以用''''z-index'''来玩游戏。 – aavrug

0

添加位置下：在.opennav，.closenav类的造型绝对的。

来源

2016-12-30 09:52:26

相关问题

 相关问题