Menu burger animation toggle full page menu

Question

Basically I need a menu burger that toggles on and off a full page menu but I can't get the coding to work together.

So I created both the Menu burger animation toggle and the Full page menu separately which work fine, now I dont know how to put them together, I have tried for ages but can't seem to make it work, can anyone help please?

Here are the links to the codes:

1. Menu Burger 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. Full Page Menu 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

If I undesrtood you right you want to click on burger to hide and show the menu.

If that's it is, just add the menu to your burguer fiddle, hide it with display:none and add this simple jquery:

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

        });

JSFIDDLE