将“汉堡包”与导航菜单集成在一起

时间：2015-10-16 07:04:32

标签： javascript html css

我有一个工作的汉堡包。我有一个工作菜单。

任何人都可以整合这两个吗？

当我点击汉堡包时，我希望我的菜单显示为淡入淡出。

再次点击时，我希望我的菜单淡出。

我的两段代码在下面（顺便说一下，我的编码不是很流利）。

感谢。

汉堡包

<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>

2 个答案:

答案 0 :(得分：1)

  • Stack Overflow不在这里为您完成作业或作业。不要问。
  • Stack Overflow不是代码编写服务。请不要让我们为您编写代码。
  • Stack Overflow不是调试服务。请不要让我们在您的程序中找到简单的错误和错误。您应该能够使用调试器或类似工具自己找到它们。
  • Stack Overflow可以解决棘手的问题，但只有在您将其缩小到最小代码之后，才会发布完整的问题。见SSCCE。

如果您之前尝试过，请通过fiddle或codepen

分享此代码

答案 1 :(得分：0)

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');         
        }       
    });
});

我希望这有所帮助，我确信在我的概念中重新创建自己的造型会非常麻烦，祝你好运。

相关问题
最新问题