オーバーレイテキストは表示されず、オーバーレイナビの起動と終了は機能しません。

Question

現在、私はヘッダー、サブヘッダ、CSSベースのメニュー、そしてデフォルトで非表示にするオーバーレイ表示のテキストを持っています。

私のコードでは、ヘッダ、サブヘッダ、CSSベースのメニュー、次にthisのようにオーバーレイを起動する「開く」ボタンが生成されると予想していました。

This Fiddleは再現可能な例を与える。

他のHTMLやCSSの一部がオーバーレイを破っていると思われますが、正確にはわかりません。

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
</div> 

<!-- Use any element to open the sidenav --> 
<span onclick="openNav()">open</span> 

キーはJavaScript：

/* Set the width of the side navigation to 250px */ 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

/* Set the width of the side navigation to 0 */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
} 

とCSS：

/* The Overlay (background) */ 
.overlay { 
    /* Height & width depends on how you want to reveal the overlay (see JS below) */ 
    height: 100%; 
    width: 0; 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    left: 0; 
    top: 0; 
    background-color: rgb(0,0,0); /* Black fallback color */ 
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ 
    overflow-x: hidden; /* Disable horizontal scroll */ 
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ 
} 

/* Position the content inside the overlay */ 
.overlay-content { 
    position: relative; 
    top: 25%; /* 25% from the top */ 
    width: 100%; /* 100% width */ 
    text-align: center; /* Centered text/links */ 
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ 
} 

/* The navigation links inside the overlay */ 
.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; /* Display block instead of inline */ 
    transition: 0.3s; /* Transition effects on hover (color) */ 
} 

/* When you mouse over the navigation links, change their color */ 
.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

/* Position the close button (top right corner) */ 
.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ 
@media screen and (max-height: 450px) { 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
     font-size: 40px; 
     top: 15px; 
     right: 35px; 
    } 
} 

Answer 1

さて、あなただけ0PXためにあなたのdivの幅を設定

これは重要なHTMLです。これはあなたのdivを隠すことはありません。

/* Set the width of the side navigation to 250px */ 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

/* Set the width of the side navigation to 0 */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
} 

あなたは

function closeNav() { 
    document.getElementById("mySidenav").style.visibility = "hidden"; 
} 

それが非表示になります

次の操作を行います。

あなたがここにCSSの可視性プロパティの詳細を読むことができます： http://www.w3schools.com/jsref/prop_style_visibility.asp