Я использую навигационную панель w3 для школ, и я пытаюсь получить боковую навигацию, которая открывается из одного div. ехр: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stacked=h (только правый один, хотя)Навигация боковой панели не отображается
Позже я хотел бы сделать это нав сидеть на дне и открываются вверх. Тем не менее к проблеме. Я не могу заставить эту боковую панель показать выше уже существующей страницы. Страница состоит из случайно выбранного флеш-файла. Я чувствую, что один из уже существующих атрибутов позиции влияет на этот или, возможно, один из стилей, которые я не смог найти.
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";
}
Ссылка не работает. –