CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Clarke Cribb
Clarke Cribb

Reputation: 269

menu wont show or work

My menu on my page will not work, it is not at all visible. I set it up on a codepen which works fine but now when I have tried to implement it, it failed to work. Where is it? Still new to coding but would appreciate help.

HTML:

<body>
<nav class="menu-opener">
  <div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
  <ul class="menu-inner">
    <a href="#" class="menu-link">
      <li>home.</li>
    </a>
    <a href="#" class="menu-link">
      <li>portfolio.</li>
    </a>
    <a href="#" class="menu-link">
      <li>about.</li>
    </a>
    <a href="#" class="menu-link">
      <li>contact.</li>
    </a>
  </ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>

CSS:

html,body {
    padding:0;
    margin:0;
    height:100%
}

body {
    overflow:hidden
}

/*--Homepage*/

p.footertext {
    position:absolute;
    left:20px;
    bottom:10px;
    font-size:12px;
    z-index:1
}

@media only screen and (max-width : 400px) {
p.footertext {
    display:none
}
}
.hero1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: rgb(247,200,198);
}
div #hero1title h1{
    color: white;
    font-size: 90pt;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 30%;
    text-align: center;
}

/* Menu styling*/



%transition {
  transition: 250ms all;
}

.menu-opener {
  background: none;
  cursor: pointer;
  height: 4rem;
  margin: 1rem;
  position: absolute;
  user-select: none;
  width: 4rem;
}
.menu-opener-inner {
  background: white;
  height: .5rem;
  margin-left: .75rem;
  margin-top: 1.75rem;
  width: 2.5rem;
  @extend %transition;
  &::before, &::after {
    background: white;
    content: '';
    display: block;
    height: 8px;
    width: 2.5rem;
    @extend %transition;
  }
  &::before {
    transform: translateY(-.75rem);
  }
  &::after {
    transform: translateY(.25rem);
  }
  &.active {
    background: transparent;
    &::before {
      transform: translateY(0rem) rotate(-45deg);
    }
    &::after {
      transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
    }
  }
}
.menu {
  background: rgb(152, 211, 189);
  height: 100%;
  position: absolute;
  top: 0px;
  user-select: none;
  width: 0rem;
  z-index: -1;
  @extend %transition;
  &.active {
    width: 100%;
    @extend %transition;
    & .menu-link {
      color: white;
    }
  }
}
.menu-inner {
  display: block;
  flex-direction: row;
  height: 450px;
  list-style-type: none;
  margin-top: 15%;
  padding: 0;
}
.menu-link {
  color: transparent;
  display: flex;
  flex: 1 1 auto;
  font-size: 70px;
  font-family: 'Calibre-Semibold';
  height: 25%;
  text-align: center;
  text-decoration: none;
  li {
    margin: auto;
  }
}

Upvotes: 0

Views: 66

Answers (1)

durbnpoisn
durbnpoisn

Reputation: 4659

I dropped it all into a fiddle, and I find the following things:

  1. The z-index shouldn't be -1
  2. It's there. But you need to highlight it to see it.
  3. The text is styled horribly, so it doesn't look so great.
  4. Your text color in menu-list is set to "transparent".
  5. Your HREFs should be inside the "li" not outside.

Upvotes: 2

Related Questions