侧边栏导航不显示
Sidebar navigation not showing up
我正在使用 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";
}
从导航标签的样式属性中删除 display:none,它将显示。
这是在 jsbin 上删除的 display:none:http://jsbin.com/nubewuragu/edit?html,css,js,output
我正在使用 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";
}
从导航标签的样式属性中删除 display:none,它将显示。
这是在 jsbin 上删除的 display:none:http://jsbin.com/nubewuragu/edit?html,css,js,output