【发布时间】:2016-10-29 19:14:00
【问题描述】:
我正在使用 w3 学校侧边栏导航,并且一直在尝试获得从一个 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";
}
【问题讨论】:
-
链接失效了。
标签: javascript jquery html css w3.css