ナビゲーションバーのアニメーション

私の問題は、ナビゲーションバーをポップアップさせるためのボタンとしてチェックボックスがあることです。このボタンを押すとページが淡色表示に変わり、ナビゲーションバーがポップアップし、フコーカスがメニューに表示されます。とにかく。私はそれをプレイのボタン（ナビゲーションバーのボタン）を押すと、ウェブサイトの特定のポイントに移動します。あなたがウェブサイトのポイントにいるとき、メニューは消えません。だからどこでもクリックすることはできません。私はそれがあなたがメニュー上の何かをクリックするようにしたい、メニューが消えて、あなたがリードされている場所に連れて行く。ナビゲーションバーのアニメーション

ここにHTMLの記念品があります。

<!DOCTYPE html> 
<html> 
<head> 
<link rel=stylesheet href="css.css" type="text/css" /> 
<link rel="icon" href="favicon.ico" type="image/icon"/> 
<title>Das Krankenhaus</title> 
</head> 

<body> 
<!-- start header --> 
<header id="head"> 
    <div class="something"> 
     <nav id="menu"> 
     <input type="checkbox" id="toggle-nav"/> 
     <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label> 
     <div class="box"> 
      <ul> 
      <li><a href="#play"><i class="icon-home"></i> Play</a></li> 
      <li><a href="#"><i class="icon-file-alt"></i> about</a></li> 
      <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li> 
      <li><a href="#"><i class="icon-envelope"></i> contacts</a></li> 
      </ul> 
     </div> 

     </nav> 
    </div> 



    </header> 
<!-- end header --> 


    </div> 
</section> 
<!-- end content --> 

<div class="jumbotron text-center"> 
    <div class="container"> 

    <h1>Das Krankenhuas</h1> 
    <p style="color:#888;">A game you will never escape</p> 

    </div> 
</div> 
<div class="container"> 

</div> 



<div id="h1"> 
<center> 
<h3> About The Game </h3> 

</div> 





    <div id="text"> 
<center> 
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div> 

<div id="h1"> 
<center> 
<h3> Update log</h3> 

</div> 

    <div id="text"> 
<center> 
<p> Update 1: Where it all started. 
<br> <br> 
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun. 
<br> <br> 

Update 3: fix search guard and some bugs. Interrgatoin room. </p> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div> 







<a id="play"></a> 
    <div class="row"> 
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div> 
    </div> 
</div> 
    <footer class="jumbotron text-center"> 
    <div class="container"> 
    <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p> 
    </div> 
    </footer> 


</body> 

</html>

ここにはCSSがあります。

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css); 
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 

body { 
    font-family: 'Lato', sans-serif; 
    background: #353535; 
    color: #FFF; 
} 
#text { 
color: #888; 


} 

.jumbotron h1 { 
    color: #353535; 
} 
/* under play */ 
footer { 
    margin-bottom: 0 !important; 
    margin-top: 80px; 
} 
footer p { 
    margin: 0; 
    padding: 0; 
} 
span.icon { 
    margin: 0 5px; 
    color: #D64541; 
} 
h2 { 
    color: #BDC3C7; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 
.mrng-60-top { 
    margin-top: 60px; 
} 

a.animated-button:link, a.animated-button:visited { 
    position: relative; 
    display: block; 
    margin: 30px auto 0; 
    padding: 14px 15px; 
    color: #fff; 
    font-size:14px; 
    font-weight: bold; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    overflow: hidden; 
    letter-spacing: .08em; 
    border-radius: 0; 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 

} 
a.animated-button.thar-one { 
    color: white; 
    cursor: pointer; 
    display: block; 
    position: relative; 
    width: 100%; 
    margin-left: 170%; 
    border: 2px solid white; 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
    margin-bottom: 0 !important; 
    margin-top: 80px; 


} 
a.animated-button.thar-one:hover { 
    color: white !important; 
    background-color: black; 
    text-shadow: none; 

} 
a.animated-button.thar-one:hover:before { 
    bottom: 0%; 
    top: auto; 
    height: 100%; 
    margin: 0 auto; 
} 
a.animated-button.thar-one:before { 
    display: white; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    height: 0px; 
    width: 100%; 
    z-index: -1; 
    content: ''; 
    color: black !important; 
    background: black; 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 

} 

    @import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:700,300'); 
    @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css'); 

    * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }  /* fast reset */ 

    body { 
    font-family: 'Merriweather Sans', Arial, sans-serif; 
    font-size: 12px; 
    } 

    a { text-decoration: none; } 
    a:hover { text-decoration: underline; } 

    li { list-style: none; } 

    .something { margin: 0px 20% 0px 20%; } 

    #head { margin-top: 20px; } 

    #menu .box { 
    position: fixed; 
    text-align: center; 
    overflow: hidden; 
    z-index: -1; 
    opacity: 0; 
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    background: rgba(0,0,0,0.8); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 

    } 

    #menu ul { 
    position: relative; 
    top: 20%; 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    transform: scale(2); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    } 

    #menu li { 
    display: inline-block; 
    margin: 20px; 
    } 

    #menu li a { 
    border-radius: 3px; 
    padding: 15px; 
    border: 1px solid transparent; 
    text-decoration: none; 
    font-size: 18px; 
    color: #fff; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    } 

    #menu li a:hover { border-color: #fff; } 

    #menu li a i { 
    margin-right: 5px; 
    font-size: 24px; 
    } 
/* Box */ 
    #toggle-nav-label { 
    color: rgba(0,0,0,0.5); 
    background: white; 
    text-align: center; 
    line-height: 30px; 
    font-size: 16px; 
    display: block; 
    cursor: pointer; 
    position: relative; 
    z-index: 500; 
    width: 30px; 
    height: 30px; 
    border-radius: 10px; 
    } 

    #toggle-nav { display: none; } 

    #toggle-nav:checked ~ .box { 
    opacity: 1; 
    z-index: 400; 
    } 

    #toggle-nav:checked ~ .box ul { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    } 

    #toggle-nav:checked ~ #toggle-nav-label { 
    background: #fff; 
    color: rgba(0,0,0,0.8); 
    } 

    #content { margin: 20px 0px 20px 0px; } 

    #content h1 { 
    margin-bottom: 20px; 
    font-size: 30px; 
    } 

    #content p { 
    font-size: 14px; 
    line-height: 150%; 
    margin-bottom: 20px; 
    }

ありがとうございます！

出典

2016-09-01 Simen Musaus

CSSのチェックボックスのチェックされたプロパティに関連付けられたメニューオーバーレイのスタイリングがあります。したがって、チェックボックスをクリックすると、メニューの一部のプロパティ（z-インデックスと不透明度）が変更されて表示されます。それをメニューを表示しないデフォルトの状態に戻すには、そのチェックボックスをオフにしておく必要があります（cssをそのまま使用したい場合）。これを行うには、Javascriptを使用できます。下のスニペットでjQueryを使用して、メニュー内のリンクをクリックするたびにチェックボックスのチェックされたプロパティをfalseに設定し、魔法のようにメニューが表示されなくなりました。乾杯！

（このソリューションにはjQuery 1.6以降が必要であると付け加えておきますが、これは問題がある場合、チェックされたプロパティをさまざまな方法で変更するユーザー@Xianによって書かれています。Setting "checked" for a checkbox with jQuery?）

$(function() { 
 
    $(".box a").on("click",function() { 
 
\t  $("#toggle-nav").prop('checked', false) 
 
    }); 
 
});

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css); 
 

 
body { 
 
    font-family: 'Lato', sans-serif; 
 
    background: #353535; 
 
    color: #FFF; 
 
} 
 
#text { 
 
color: #888; 
 

 

 
} 
 

 
.jumbotron h1 { 
 
    color: #353535; 
 
} 
 
/* under play */ 
 
footer { 
 
    margin-bottom: 0 !important; 
 
    margin-top: 80px; 
 
} 
 
footer p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
span.icon { 
 
    margin: 0 5px; 
 
    color: #D64541; 
 
} 
 
h2 { 
 
    color: #BDC3C7; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
} 
 
.mrng-60-top { 
 
    margin-top: 60px; 
 
} 
 

 
a.animated-button:link, a.animated-button:visited { 
 
    position: relative; 
 
    display: block; 
 
    margin: 30px auto 0; 
 
    padding: 14px 15px; 
 
    color: #fff; 
 
    font-size:14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    overflow: hidden; 
 
    letter-spacing: .08em; 
 
    border-radius: 0; 
 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 

 
} 
 
a.animated-button.thar-one { 
 
    color: white; 
 
    cursor: pointer; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    margin-left: 170%; 
 
    border: 2px solid white; 
 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
 
    margin-bottom: 0 !important; 
 
    margin-top: 80px; 
 

 

 
} 
 
a.animated-button.thar-one:hover { 
 
    color: white !important; 
 
    background-color: black; 
 
    text-shadow: none; 
 

 
} 
 
a.animated-button.thar-one:hover:before { 
 
    bottom: 0%; 
 
    top: auto; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
a.animated-button.thar-one:before { 
 
    display: white; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    height: 0px; 
 
    width: 100%; 
 
    z-index: -1; 
 
    content: ''; 
 
    color: black !important; 
 
    background: black; 
 
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; 
 

 
} 
 

 
    @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css'); 
 

 
    * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }  /* fast reset */ 
 

 
    body { 
 
    font-family: 'Merriweather Sans', Arial, sans-serif; 
 
    font-size: 12px; 
 
    } 
 

 
    a { text-decoration: none; } 
 
    a:hover { text-decoration: underline; } 
 

 
    li { list-style: none; } 
 

 
    .something { margin: 0px 20% 0px 20%; } 
 

 
    #head { margin-top: 20px; } 
 

 
    #menu .box { 
 
    position: fixed; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    z-index: -1; 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    background: rgba(0,0,0,0.8); 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 

 
    } 
 

 
    #menu ul { 
 
    position: relative; 
 
    top: 20%; 
 
    -webkit-transform: scale(2); 
 
    -moz-transform: scale(2); 
 
    -ms-transform: scale(2); 
 
    transform: scale(2); 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
    } 
 

 
    #menu li { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    } 
 

 
    #menu li a { 
 
    border-radius: 3px; 
 
    padding: 15px; 
 
    border: 1px solid transparent; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    } 
 

 
    #menu li a:hover { border-color: #fff; } 
 

 
    #menu li a i { 
 
    margin-right: 5px; 
 
    font-size: 24px; 
 
    } 
 
/* Box */ 
 
    #toggle-nav-label { 
 
    color: rgba(0,0,0,0.5); 
 
    background: white; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    font-size: 16px; 
 
    display: block; 
 
    cursor: pointer; 
 
    position: relative; 
 
    z-index: 500; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 10px; 
 
    } 
 

 
    #toggle-nav { display: none; } 
 

 
    #toggle-nav:checked ~ .box { 
 
    opacity: 1; 
 
    z-index: 400; 
 
    } 
 

 
    #toggle-nav:checked ~ .box ul { 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 

 
    #toggle-nav:checked ~ #toggle-nav-label { 
 
    background: #fff; 
 
    color: rgba(0,0,0,0.8); 
 
    } 
 

 
    #content { margin: 20px 0px 20px 0px; } 
 

 
    #content h1 { 
 
    margin-bottom: 20px; 
 
    font-size: 30px; 
 
    } 
 

 
    #content p { 
 
    font-size: 14px; 
 
    line-height: 150%; 
 
    margin-bottom: 20px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section> 
 
    <div> 
 
<!-- start header --> 
 
<header id="head"> 
 
    <div class="something"> 
 
     <nav id="menu"> 
 
     <input type="checkbox" id="toggle-nav"/> 
 
     <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label> 
 
     <div class="box"> 
 
      <ul> 
 
      <li><a href="#play"><i class="icon-home"></i> Play</a></li> 
 
      <li><a href="#"><i class="icon-file-alt"></i> about</a></li> 
 
      <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li> 
 
      <li><a href="#"><i class="icon-envelope"></i> contacts</a></li> 
 
      </ul> 
 
     </div> 
 

 
     </nav> 
 
    </div> 
 

 

 

 
    </header> 
 
<!-- end header --> 
 

 

 
    </div> 
 
</section> 
 
<!-- end content --> 
 

 
<div class="jumbotron text-center"> 
 
    <div class="container"> 
 

 
    <h1>Das Krankenhuas</h1> 
 
    <p style="color:#888;">A game you will never escape</p> 
 

 
    </div> 
 
</div> 
 
<div class="container"> 
 

 
</div> 
 

 

 

 
<div id="h1"> 
 
<center> 
 
<h3> About The Game </h3> 
 

 
</div> 
 

 

 

 

 

 
    <div id="text"> 
 
<center> 
 
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p> 
 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
</div> 
 

 
<div id="h1"> 
 
<center> 
 
<h3> Update log</h3> 
 

 
</div> 
 

 
    <div id="text"> 
 
<center> 
 
<p> Update 1: Where it all started. 
 
<br> <br> 
 
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun. 
 
<br> <br> 
 

 
Update 3: fix search guard and some bugs. Interrgatoin room. </p> 
 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
</div> 
 

 

 

 

 

 

 

 
<a id="play"></a> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div> 
 
    </div> 
 
</div> 
 
    <footer class="jumbotron text-center"> 
 
    <div class="container"> 
 
    <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p> 
 
    </div> 
 
    </footer>

出典

2016-09-01 19:27:34

PS ..私は、私はこれで遊んでいたとき、彼らはjsfiddleの問題を引き起こしていたとして、スニペットでGoogleフォントの輸入を削除する必要がありました。 –

ありがとうございます！私はあなたが見るこのコーディングのものにちょっと新しいです、どこでjavascriptを置くべきですか？それ自身の文書か？ :) –

まだプロジェクトにjQueryを組み込んでいない場合は、そのためのスクリプトタグを追加するか、ホストされたバージョンを使用するか、ダウンロードしてローカルに保存する必要があります。これをあなたの閉じたbodyタグのすぐ下に追加してください： ''と入力し、上に追加したスクリプトをそのすぐ下に置きます。 –

ナビゲーションバーのアニメーション

答えて

関連する問題