将“汉堡包”与导航菜单结合起来

-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

将“汉堡包”与导航菜单结合起来

回答

相关问题