応答側のナビゲーションメニュー

simple menu header when not opened 応答側のナビゲーションメニュー

$(document).ready(function() { 
 

 
    function toggleSidebar() { 
 
    $(".button").toggleClass("active"); 
 
    $("main").toggleClass("move-to-left"); 
 
    $(".sidebar-item").toggleClass("active"); 
 
    } 
 

 
    $(".button").on("click tap", function() { 
 
    toggleSidebar(); 
 
    }); 
 

 
    $(document).keyup(function(e) { 
 
    if (e.keyCode === 27) { 
 
     toggleSidebar(); 
 
    } 
 
    }); 
 

 
});

@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic); 
 
body, 
 
html { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'Arimo', sans-serif; 
 
} 
 

 
main { 
 
    z-index: 2; 
 
    position: relative; 
 
    height: 100%; 
 
    background-color: #2D3142; 
 
    -webkit-transition: transform .7s ease-in-out; 
 
    -moz-transition: transform .7s ease-in-out; 
 
    -ms-transition: transform .7s ease-in-out; 
 
    -o-transition: transform .7s ease-in-out; 
 
    transition: transform .7s ease-in-out; 
 
} 
 

 
.sidebar { 
 
    height: 100%; 
 
    width: 400px; 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 1; 
 
    right: 0; 
 
    background-color: #EF8354; 
 
} 
 

 
.bar { 
 
    display: block; 
 
    height: 5px; 
 
    width: 50px; 
 
    background-color: #EF8354; 
 
    margin: 10px auto; 
 
} 
 

 
.button { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    width: auto; 
 
    margin: 0 auto; 
 
    -webkit-transition: all .7s ease; 
 
    -moz-transition: all .7s ease; 
 
    -ms-transition: all .7s ease; 
 
    -o-transition: all .7s ease; 
 
    transition: all .7s ease; 
 
} 
 

 
.nav-right { 
 
    position: fixed; 
 
    right: 40px; 
 
    top: 20px; 
 
} 
 

 
.nav-right.visible-xs { 
 
    z-index: 3; 
 
} 
 

 
.hidden-xs { 
 
    display: none; 
 
} 
 

 
.middle { 
 
    margin: 0 auto; 
 
} 
 

 
.bar { 
 
    -webkit-transition: all .7s ease; 
 
    -moz-transition: all .7s ease; 
 
    -ms-transition: all .7s ease; 
 
    -o-transition: all .7s ease; 
 
    transition: all .7s ease; 
 
} 
 

 
.nav-right.visible-xs .active .bar { 
 
    background-color: #FFF; 
 
    -webkit-transition: all .7s ease; 
 
    -moz-transition: all .7s ease; 
 
    -ms-transition: all .7s ease; 
 
    -o-transition: all .7s ease; 
 
    transition: all .7s ease; 
 
} 
 

 
.button.active .top { 
 
    -webkit-transform: translateY(15px) rotateZ(45deg); 
 
    -moz-transform: translateY(15px) rotateZ(45deg); 
 
    -ms-transform: translateY(15px) rotateZ(45deg); 
 
    -o-transform: translateY(15px) rotateZ(45deg); 
 
    transform: translateY(15px) rotateZ(45deg); 
 
} 
 

 
.button.active .bottom { 
 
    -webkit-transform: translateY(-15px) rotateZ(-45deg); 
 
    -moz-transform: translateY(-15px) rotateZ(-45deg); 
 
    -ms-transform: translateY(-15px) rotateZ(-45deg); 
 
    -o-transform: translateY(-15px) rotateZ(-45deg); 
 
    transform: translateY(-15px) rotateZ(-45deg); 
 
} 
 

 
.button.active .middle { 
 
    width: 0; 
 
} 
 

 
.move-to-left { 
 
    -webkit-transform: translateX(-400px); 
 
    -moz-transform: translateX(-400px); 
 
    -ms-transform: translateX(-400px); 
 
    -o-transform: translateX(-400px); 
 
    transform: translateX(-400px); 
 
} 
 

 
nav { 
 
    padding-top: 30px; 
 
} 
 

 
.sidebar-list { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    margin-top: 150px; 
 
    text-align: center; 
 
} 
 

 
.sidebar-item { 
 
    margin: 30px 0; 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-20px); 
 
    -moz-transform: translateY(-20px); 
 
    -ms-transform: translateY(-20px); 
 
    -o-transform: translateY(-20px); 
 
    transform: translateY(-20px); 
 
} 
 

 
.sidebar-item:first-child { 
 
    -webkit-transition: all .7s .2s ease-in-out; 
 
    -moz-transition: all .7s .2s ease-in-out; 
 
    -ms-transition: all .7s .2s ease-in-out; 
 
    -o-transition: all .7s .2s ease-in-out; 
 
    transition: all .7s .2s ease-in-out; 
 
} 
 

 
.sidebar-item:nth-child(2) { 
 
    -webkit-transition: all .7s .4s ease-in-out; 
 
    -moz-transition: all .7s .4s ease-in-out; 
 
    -ms-transition: all .7s .4s ease-in-out; 
 
    -o-transition: all .7s .4s ease-in-out; 
 
    transition: all .7s .4s ease-in-out; 
 
} 
 

 
.sidebar-item:nth-child(3) { 
 
    -webkit-transition: all .7s .6s ease-in-out; 
 
    -moz-transition: all .7s .6s ease-in-out; 
 
    -ms-transition: all .7s .6s ease-in-out; 
 
    -o-transition: all .7s .6s ease-in-out; 
 
    transition: all .7s .6s ease-in-out; 
 
} 
 

 
.sidebar-item:last-child { 
 
    -webkit-transition: all .7s .8s ease-in-out; 
 
    -moz-transition: all .7s .8s ease-in-out; 
 
    -ms-transition: all .7s .8s ease-in-out; 
 
    -o-transition: all .7s .8s ease-in-out; 
 
    transition: all .7s .6s ease-in-out; 
 
} 
 

 
.sidebar-item.active { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0px); 
 
    -moz-transform: translateY(0px); 
 
    -ms-transform: translateY(0px); 
 
    -o-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
.sidebar-anchor { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    font-size: 1.8em; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    padding-bottom: 7px; 
 
} 
 

 
.sidebar-anchor:before { 
 
    content: ""; 
 
    width: 0; 
 
    height: 2px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #FFF; 
 
    -webkit-transition: all .7s ease-in-out; 
 
    -moz-transition: all .7s ease-in-out; 
 
    -ms-transition: all .7s ease-in-out; 
 
    -o-transition: all .7s ease-in-out; 
 
    transition: all .7s ease-in-out; 
 
} 
 

 
.sidebar-anchor:hover:before { 
 
    width: 100%; 
 
} 
 

 
.ua { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 60px; 
 
} 
 

 
.fa { 
 
    font-size: 1.4em; 
 
    color: #EF8354; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
.ua:hover .fa { 
 
    color: #FFF; 
 
    -webkit-transform: scale(1.3); 
 
    -moz-transform: scale(1.3); 
 
    -ms-transform: scale(1.3); 
 
    -o-transform: scale(1.3); 
 
    transform: scale(1.3); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
@media (min-width: 480px) { 
 
    .nav-list { 
 
    display: block; 
 
    } 
 
} 
 

 
@media (min-width: 768px) { 
 
    .nav-right { 
 
    position: absolute; 
 
    } 
 
    .hidden-xs { 
 
    display: block; 
 
    } 
 
    .visible-xs { 
 
    display: none; 
 
    } 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="nav-right visible-xs"> 
 
    <div class="button" id="btn"> 
 
    <div class="bar top"></div> 
 
    <div class="bar middle"></div> 
 
    <div class="bar bottom"></div> 
 
    </div> 
 
</div> 
 
<!-- nav-right --> 
 
<main> 
 

 

 
    <nav> 
 
    <img src="http://safindia.org/assets/img/logohome.png" class="img-responsive"> 
 
    <div class="nav-right hidden-xs"> 
 
     <div class="button" id="btn"> 
 
     <div class="bar top"></div> 
 
     <div class="bar middle"></div> 
 
     <div class="bar bottom"></div> 
 
     </div> 
 
    </div> 
 
    <!-- nav-right --> 
 
    </nav> 
 

 
    <a href="https://codepen.io/tonkec/" class="ua" target="_blank"> 
 
    <i class="fa fa-user"></i> 
 
    </a> 
 
</main> 
 

 
<div class="sidebar"> 
 
    <ul class="sidebar-list"> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">Home</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">About Us</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">What We Do</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">Get Involved</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">Contact Us</a></li> 
 
    </ul> 
 
    <hr> 
 
</div>

ハロー上記のコードは、私のために正常に動作bar.itサイド・ナビゲーションのためですが、私は上のクリックしたときに、私が直面しています問題がありますハンバーガーのアイコンを引いたり、メインセクションを左側にスライドさせたりします。私はバックグラウンドコンテンツやメインコンテンツをスライドさせたくありません。左側にスライドします&私の閉じるボタンはメニューボディセクションの右側に表示されます。それはメニューバーの外側または外側に表示されます。まあ、私はマックしたいeページのスクロールでメニューが縮小またはサイズ変更されます。 menu design

出典

2017-07-12 rahul khandelwal

このように、閉じるボタンでハンバーガーをクリックするとメニューリストが表示されますか？同じIDを持つ2つの異なるボタンがあります。 –

はい私は画像に表示したいと思っています。「メニューデザイン」をクリックすると画像を確認できます。実際に何を望みますか？ –

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<!-- nav-right --> 
 
<main> 
 

 

 
    <nav> 
 
    <img src="http://safindia.org/assets/img/logohome.png" class="img-responsive"> 
 
    <div class="nav-right hidden-xs"> 
 
     <div class="button" id="btn"> 
 
     <div class="bar top"></div> 
 
     <div class="bar middle"></div> 
 
     <div class="bar bottom"></div> 
 
     </div> 
 
    </div> 
 
    <!-- nav-right --> 
 
    </nav> 
 

 
    <a href="https://codepen.io/tonkec/" class="ua" target="_blank"> 
 
    <i class="fa fa-user"></i> 
 
    </a> 
 
</main> 
 

 
<div class="sidebar"> 
 

 
<span class="glyphicon glyphicon-remove pull-right" id="close-button" style="color: white;font-size: 30px;"></span> 
 

 
    <ul class="sidebar-list"> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">Home</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">About Us</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">What We Do</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">Get Involved</a></li> 
 
    <li class="sidebar-item"><a href="#" class="sidebar-anchor">Contact Us</a></li> 
 
    </ul> 
 
    <hr> 
 
</div> 
 
<style> 
 
@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic); 
 
body, 
 
html { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'Arimo', sans-serif; 
 
} 
 

 
main { 
 
    z-index: 2; 
 
    position: relative; 
 
    height: 100%; 
 
    background-color: #2D3142; 
 
    -webkit-transition: transform .7s ease-in-out; 
 
    -moz-transition: transform .7s ease-in-out; 
 
    -ms-transition: transform .7s ease-in-out; 
 
    -o-transition: transform .7s ease-in-out; 
 
    transition: transform .7s ease-in-out; 
 
} 
 

 
.sidebar { 
 
    height: 100%; 
 
    width: 400px; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    background-color: #EF8354; 
 
    display:none; 
 
     z-index: 3; 
 
} 
 

 
.bar { 
 
    display: block; 
 
    height: 5px; 
 
    width: 50px; 
 
    background-color: #EF8354; 
 
    margin: 10px auto; 
 
} 
 

 
.button { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    width: auto; 
 
    margin: 0 auto; 
 
    -webkit-transition: all .7s ease; 
 
    -moz-transition: all .7s ease; 
 
    -ms-transition: all .7s ease; 
 
    -o-transition: all .7s ease; 
 
    transition: all .7s ease; 
 
} 
 

 
.nav-right { 
 
    position: fixed; 
 
    right: 40px; 
 
    top: 20px; 
 
} 
 

 
#btn-close { 
 
    z-index: 3; 
 
} 
 

 
.hidden-xs { 
 
    display: none; 
 
} 
 

 
.middle { 
 
    margin: 0 auto; 
 
} 
 

 
.bar { 
 
    -webkit-transition: all .7s ease; 
 
    -moz-transition: all .7s ease; 
 
    -ms-transition: all .7s ease; 
 
    -o-transition: all .7s ease; 
 
    transition: all .7s ease; 
 
} 
 

 
#btn-close .active .bar { 
 
    background-color: #FFF; 
 
    -webkit-transition: all .7s ease; 
 
    -moz-transition: all .7s ease; 
 
    -ms-transition: all .7s ease; 
 
    -o-transition: all .7s ease; 
 
    transition: all .7s ease; 
 
} 
 

 

 

 
nav { 
 
    padding-top: 30px; 
 
} 
 

 
.sidebar-list { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    position: relative; 
 
    margin-top: 150px; 
 
    text-align: center; 
 
} 
 

 
.sidebar-item { 
 
    margin: 30px 0; 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-20px); 
 
    -moz-transform: translateY(-20px); 
 
    -ms-transform: translateY(-20px); 
 
    -o-transform: translateY(-20px); 
 
    transform: translateY(-20px); 
 
} 
 

 
.sidebar-item:first-child { 
 
    -webkit-transition: all .7s .2s ease-in-out; 
 
    -moz-transition: all .7s .2s ease-in-out; 
 
    -ms-transition: all .7s .2s ease-in-out; 
 
    -o-transition: all .7s .2s ease-in-out; 
 
    transition: all .7s .2s ease-in-out; 
 
} 
 

 
.sidebar-item:nth-child(2) { 
 
    -webkit-transition: all .7s .4s ease-in-out; 
 
    -moz-transition: all .7s .4s ease-in-out; 
 
    -ms-transition: all .7s .4s ease-in-out; 
 
    -o-transition: all .7s .4s ease-in-out; 
 
    transition: all .7s .4s ease-in-out; 
 
} 
 

 
.sidebar-item:nth-child(3) { 
 
    -webkit-transition: all .7s .6s ease-in-out; 
 
    -moz-transition: all .7s .6s ease-in-out; 
 
    -ms-transition: all .7s .6s ease-in-out; 
 
    -o-transition: all .7s .6s ease-in-out; 
 
    transition: all .7s .6s ease-in-out; 
 
} 
 

 
.sidebar-item:last-child { 
 
    -webkit-transition: all .7s .8s ease-in-out; 
 
    -moz-transition: all .7s .8s ease-in-out; 
 
    -ms-transition: all .7s .8s ease-in-out; 
 
    -o-transition: all .7s .8s ease-in-out; 
 
    transition: all .7s .6s ease-in-out; 
 
} 
 

 
.sidebar-item { 
 
    opacity: 3; 
 
    -webkit-transform: translateY(0px); 
 
    -moz-transform: translateY(0px); 
 
    -ms-transform: translateY(0px); 
 
    -o-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
.sidebar-anchor { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
    font-size: 1.8em; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    padding-bottom: 7px; 
 
} 
 

 
.sidebar-anchor:before { 
 
    content: ""; 
 
    width: 0; 
 
    height: 2px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #FFF; 
 
    -webkit-transition: all .7s ease-in-out; 
 
    -moz-transition: all .7s ease-in-out; 
 
    -ms-transition: all .7s ease-in-out; 
 
    -o-transition: all .7s ease-in-out; 
 
    transition: all .7s ease-in-out; 
 
} 
 

 
.sidebar-anchor:hover:before { 
 
    width: 100%; 
 
} 
 

 
.ua { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 60px; 
 
} 
 

 
.fa { 
 
    font-size: 1.4em; 
 
    color: #EF8354; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
.ua:hover .fa { 
 
    color: #FFF; 
 
    -webkit-transform: scale(1.3); 
 
    -moz-transform: scale(1.3); 
 
    -ms-transform: scale(1.3); 
 
    -o-transform: scale(1.3); 
 
    transform: scale(1.3); 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
@media (min-width: 480px) { 
 
    .nav-list { 
 
    display: block; 
 
    } 
 
} 
 

 
@media (min-width: 768px) { 
 
    .nav-right { 
 
    position: absolute; 
 
    } 
 
    .hidden-xs { 
 
    display: block; 
 
    } 
 
    #btn-close{ 
 
    display: none; 
 
    } 
 
} 
 
</style> 
 
<script> 
 

 
$(document).ready(function() { 
 

 

 
    $("#btn").on("click", function() { 
 
    $(this).hide(); 
 
    $(".sidebar").css('display','block'); 
 
\t 
 
    }); 
 
$("#close-button").on("click", function() { 
 

 
\t $('#btn').show(); 
 
\t $(".sidebar").css('display','none'); 
 
    }); 
 
    $(document).keyup(function(e) { 
 
    if (e.keyCode === 27) { 
 
     
 
    } 
 
    }); 
 

 
}); 
 
</script>

これは、あなたが求めて何ですか？私はbutton.Hopeの代わりに近いglyphiconを追加して、あなたの問題を解決します。

出典

2017-07-12 12:40:10

同じではないはずですが閉じるボタンはメニューの横に表示されます画像に表示されるように表示され、メインのコンテンツは左にプルされます。プルまたはスライドしないでください。 –

上記のコードを実行しましたか？メインコンテンツは左側に引っ張られず一定です。画像が見えず、制限されています。 –

何も表示されていない私はすべての画面サイズのこのメニューを作業したいと思っています。フルスクリーン –

応答側のナビゲーションメニュー

答えて

関連する問題