我正在使用W3 Schools侧边栏导航,并且一直在尝试从一个div打开一个侧边导航。
经验值:
http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stacked=h
(虽然只有正确的一个)
稍后,我想将该导航器坐在底部并向上打开。对于眼前的问题。我无法使此侧边栏显示在现有页面上方。该页面由随机选择的Flash文件组成。我感觉已经存在的一种位置属性正在影响这种一种或一种我无法找到的样式。
的HTML
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;right:0;" id="rightMenu">
<a href="javascript:void(0)" onclick="closeRightMenu()"
class="w3-closenav w3-large">Close ×</a>
<a href="#"><i class="fa fa-home w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-search w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-envelope w3-xxlarge"></i></a>
<a href="#"><i class="fa fa-globe w3-xxlarge"></i></a>
</nav>
<object id="flash-container">
<embed id="flash-content" src="" type="application/x-shockwave-flash" />
</object>
的CSS
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
background-color: #2e1565;
}
#popup-container {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#flash-container {
z-index: 0;
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
}
#flash-content {
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
overflow: hidden;
z-index: 1;
background-color: #2e1565;
}
#flash_name {
color: #5c5ce0;
z-index: 20;
position: absolute;
padding-left: 50%;
}
#rightMenu {
position: relative;
z-index: 3;
}
JS
function openRightMenu() {
document.getElementById("rightMenu").style.display = "block";
}
function closeRightMenu() {
document.getElementById("rightMenu").style.display = "none";
}
最佳答案
从nav标签的style属性中删除display:none,它将显示出来。
这是与显示:jsbin上没有删除:http://jsbin.com/nubewuragu/edit?html,css,js,output