菜单汉堡动画切换整页菜单

Question

基本上我需要一个菜单​​汉堡,可以打开和关闭整页菜单,但我无法让编码一起工作.

所以我创建了菜单汉堡动画切换和单页菜单分别工作正常,现在我不知道如何将它们放在一起,我已经尝试了很长时间但似乎无法使其工作,任何人都可以帮忙吗？

以下是代码的链接:

1.菜单汉堡FIDDLE

CSS:

body {
    padding: 0px;
}

.border {
    position: fixed;
    background: #f9f8f3;
}

.top, .bottom {
    left: 0;
    right: 0;
    height: 50px;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

.right, .left {
    top: 0;
    bottom: 0;
    width: 50px;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

/* End of -->> Body border */


/* Nav */

.c-hamburger {
  display: block;
  position: fixed;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}


.c-hamburger span {
  display: block;
  position: absolute;
  top: 25px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #262626;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #262626;
  content: "";
}

.c-hamburger span::before {
  top: -7px;
}

.c-hamburger span::after {
  bottom: -7px;
}


.c-hamburger--htx {
  background-color: #f9f8f3;
}

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #fafd37;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
  transition-delay: 0s, 0.3s;
}

2.整页菜单FIDDLE

CSS:

ul, li{
    list-style: none;
}

#yellowMenu {
    background: #fafd37;
    font-size: 2em;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding-top: 16%;
}


#yellowMenu a {
    color: black;
    text-decoration: none;
    width: 100%;
    height: 2em;
    display: block;
    line-height: 2.1;
    font-family: 'FF_Super_Grotesk';
    font-weight: normal;
    font-style: normal;
    transition: background-color 2s ease;
}

#yellowMenu a:hover {
    color: #e0e0d4;
    background: rgba(182,182,157,0.7);

}

Answer 1

如果我没理解你的意思，你想点击汉堡来隐藏和显示菜单。

如果是这样，只需将菜单添加到您的汉堡小提琴中，隐藏它并display:none添加这个简单的 jquery：

$(document).ready(function () {
            $('.c-hamburger').click(function () {
                $('#yellowMenu').toggle(); 
            });

        });

JSFIDDLE