將「漢堡包」與導航菜單結合起來

-1

任何人都可以整合這兩個？

當我點擊漢堡包時，我想讓我的菜單淡入來顯示。

當再次點擊時，我希望我的菜單淡出。

我的兩段代碼在下面（順便說一句，我在編碼方面不太流利）。

謝謝。

漢堡

<style> 

.buttons-container { 
    margin: 100px auto; 
    text-align: center; 
} 

button { 
    display: inline-block; 
    margin: 0 0.5em; 
    border: none; 
    background: none; 
} 
button span { 
    display: block; 
} 

.grid-button { 
    padding: 1rem; 
    cursor: pointer; 
    user-select: none; 
} 

.grid-button .grid { 
    width: 0.5rem; 
    height: 0.5rem; 
    background: #ecf0f1; 
    color: #ecf0f1; 
    /* Not in use when the colors are specified below */ 
    transition: 0.3s; 
} 

.grid-button.close .grid { 
    -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8); 
    transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8); 
} 

.grid-button.rearrange .grid { 
    box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem; 
} 

.grid-button.rearrange.close .grid { 
    box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 1rem; 
} 

.grid-button.collapse .grid { 
    box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem; 
} 

.grid-button.collapse.close .grid { 
    box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent; 
} 

/* ====================== lines button ==================================================*/ 
.lines-button { 
    padding: 1rem 0.5rem; 
    transition: .3s; 
    cursor: pointer; 
    user-select: none; 
    border-radius: 0.285715rem; 
    /* */ 
} 
.lines-button:hover { 
    opacity: 1; 
} 
.lines-button:active { 
    transition: 0; 
} 

.lines { 
    display: inline-block; 
    width: 2rem; 
    height: 0.285715rem; 
    background: #FF0000; 
    border-radius: 0.142855rem; 
    transition: 0.3s; 
    position: relative; 
} 
.lines:before, .lines:after { 
    display: inline-block; 
    width: 2rem; 
    height: 0.285715rem; 
    background: #FF0000; 
    border-radius: 0.142855rem; 
    transition: 0.3s; 
    position: absolute; 
    left: 0; 
    content: ''; 
    -webkit-transform-origin: 0.142855rem center; 
    transform-origin: 0.142855rem center; 
} 
.lines:before { 
    top: 0.5rem; 
} 
.lines:after { 
    top: -0.5rem; 
} 

.lines-button:hover .lines:before { 
    top: 0.57143rem; 
} 
.lines-button:hover .lines:after { 
    top: -.57143rem; 
} 

.lines-button.close { 
    -webkit-transform: scale3d(0.8, 0.8, 0.8); 
    transform: scale3d(0.8, 0.8, 0.8); 
} 

.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after { 
    top: 0; 
    width: 1.11111rem; 
} 

.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after { 
    -webkit-transform: none; 
    transform: none; 
    top: 0; 
    width: 2rem; 
} 

</style> 



<!doctype html> 
<html class="no-js" lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <meta name="description" content=""> 

    <meta name="viewport" content="width=device-width"> 

    <link rel="stylesheet" href="css/style.css"> 

    <script src="js/libs/modernizr-2.5.3.min.js"></script> 
</head> 
<body> 

    <div class="buttons-container"> 

     <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus"> 
      <span class="lines"></span> 
     </button> 

    </div> 
    </section> 
    <footer> 

    </footer> 
    <script> 
    var anchor = document.querySelectorAll('button'); 

    [].forEach.call(anchor, function(anchor){ 
     var open = false; 
     anchor.onclick = function(event){ 
     event.preventDefault(); 
     if(!open){ 
      this.classList.add('close'); 
      open = true; 
     } 
     else{ 
      this.classList.remove('close'); 
      open = false; 
     } 
     } 
    }); 
    </script> 

</body> 
</html>

菜單

<nav id="vertical-nav"> 
<ul> 

<li class="fadeIn-1"><a href="#">Home</a></li> 

<li class="fadeIn-2"><a href="#">1</a></li> 

<li class="fadeIn-3"><a href="#">2</a></li> 

<li class="fadeIn-4"><a href="#">3</a></li> 

<li class="fadeIn-5"><a href="#">4</a></li> 

<li class="fadeIn-6"><a href="#">5</a></li> 

</ul> 
</nav> 

<style type="text/css"> 
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0} 

#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden} 

#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #} 

#vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */ 

#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent} 

#vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX} 

#vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000} 

-webkit-transition: {0.3s all;-moz-transition: 0.3s all;transition: 0.3s all} 

.fadeIn-1 { 
-webkit-animation:fadeIn ease-in 2s; 
-moz-animation:fadeIn ease-in 2s; 
-o-animation:fadeIn ease-in 2s; 
animation:fadeIn ease-in 2s; 
} 
.fadeIn-2 { 
-webkit-animation:fadeIn ease-in 2s; 
-moz-animation:fadeIn ease-in 2s; 
-o-animation:fadeIn ease-in 2s; 
animation:fadeIn ease-in 2s; 
} 
.fadeIn-3{ 
-webkit-animation:fadeIn ease-in 2s; 
-moz-animation:fadeIn ease-in 2s; 
-o-animation:fadeIn ease-in 2s; 
animation:fadeIn ease-in 2s; 
} 
.fadeIn-4{ 
-webkit-animation:fadeIn ease-in 2s; 
-moz-animation:fadeIn ease-in 2s; 
-o-animation:fadeIn ease-in 2s; 
animation:fadeIn ease-in 2s; 
} 
.fadeIn-5{ 
-webkit-animation:fadeIn ease-in 2s; 
-moz-animation:fadeIn ease-in 2s; 
-o-animation:fadeIn ease-in 2s; 
animation:fadeIn ease-in 2s; 
} 
.fadeIn-6{ 
-webkit-animation:fadeIn ease-in 2s; 
-moz-animation:fadeIn ease-in 2s; 
-o-animation:fadeIn ease-in 2s; 
animation:fadeIn ease-in 2s; 
} 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

</style>

來源

2015-10-16 user5336878

你可以請創建一個工作小提琴嗎？ –

這裏你去：https://jsfiddle.net/my3qsbbv/ – user5336878

你有沒有正確創建那個小提琴，或者你只是複製和粘貼你的代碼？ –

Here分享這個代碼是你想要的東西的工作示例的小提琴。

我重新創建了您的概念，因爲您的代碼太長，無法簡單閱讀。你想要的是一個按鈕，當點擊一個菜單會淡入。我建議你玩弄代碼並用你自己的代碼進行修改。

這是我寫的代碼。

HTML

<button id="shower" name="buttonOne">Show</button> 

<div id="menu"> 
    <ul>   
     <li><a href="">Home</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="">Portfolio</a></li>   
    </u>  
</div>

CSS

li { 
    list-style-type:none; 
} 

a { 
    text-decoration:none; 
} 

ul { 
    padding:0; 
} 

#menu { 
    display:none; 
    animation:fadeIn 1s; 
} 

#buttonss { 
    height:50px; 
    width:50px; 
    background-color:red; 
} 

@keyframes fadeIn { 
    0% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
    } 
}

jQuery的

$(document).ready(function() { 
    $('#shower').click(function() { 
     if($("#menu").css('display') == 'block') { 
      $('#menu').css('display', 'none'); 
     } else { 
      $('#menu').css('display', 'block');   
     }  
    }); 
});

我希望這有助於，我敢肯定，這不會太麻煩重建自己的風格在我的概念之內，祝你好運。

來源

2015-10-16 10:47:03

謝謝薩米爾。這有很大幫助。我正在努力整合現在。 – user5336878

我希望這是正確的答案：D祝你好運我的朋友:) –

明白了。非常感謝薩米爾：http://jsfiddle.net/LCfiddle/n0qqvvr8/2/ – user5336878

Stack Overflow是不是在這裏做你的作業或家庭作業給你。不要問。
堆棧溢出不是一個代碼寫入服務。請勿要求我們爲您編寫代碼。
堆棧溢出不是一個調試服務。請不要要求我們在程序中找到簡單的錯誤和錯誤。您應該能夠使用調試器或類似工具自己找到它們。
堆棧溢出可以幫助解決棘手的問題，但只有在您將其縮小到最小代碼之後，然後發佈完整問題。參見SSCCE。

如果你已經嘗試過，請通過fiddle或通過codepen

來源

2015-10-16 07:18:49 Simplicity

基本代碼已經在這裏。我只是不知道如何整合它。網絡上寫了很多關於如何創建漢堡包的信息，以及關於如何爲菜單編寫代碼的大量信息。我沒有發現如何整合這兩者。因此，伸出援手的原因。 – user5336878

我一定誤會了，我讀到你想讓StackOverflow（SO）爲你實現一個漢堡包菜單，並且你給了你當前的代碼，這對我來說似乎違反了我的文章中的第二點。 – Simplicity

將「漢堡包」與導航菜單結合起來

回答

相關問題