Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Menu doesn't want to open when clicked

Tags:

javascript

html

css

flexbox

Problem

when you click on the button (in your browser, not in codepen) the menu will not open

Desidered behaviour

The Menu has to open when you click on the burger button.

Code

$(document).ready(function(){
  var burger = $('.btn');
  var menu = $('.full-menu');
  var navItems =$('.nav__item');

  burger.click(function(){
    burger.toggleClass('btn--open');
    menu.toggleClass('menu--open');
  });

  navItems.hover(function(){
    navItems.not($(this)).toggleClass('nav__item--hover');
  });
});

This is my html

<html>
  <head>
    <title>FlexBox Exercise #2 - Responsive Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="title">FlexBox Exercise #2 - Responsive Menu</h1>
    </div>
   <script src="script.js"></script>
  </body>
</html>

i was trying to work on that and understand it, but i noticed that the menu doesn't open in chrome and edge. Yeah, in codepen works, but in my browser(chrome and edge) i see only the animation of the burger.

Codepen

pen here

like image 356
Legeo Avatar asked Jan 27 '26 16:01

Legeo

1 Answers

You are not using jQuery library.

Use it:

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

* {
  box-sizing:border-box;
}

html{
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
  font-family: 'Playfair Display', serif;
}

body{
  position:relative;
  height:100%;
  width:100%;
  margin: 0;
  padding: 0;
}
.content {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 95px;
    border-bottom-right-radius: 100%;
    background-color: #f0efef;
}


.title {
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 400;
    padding: 0 15px;
}

.btn{
  position:absolute;
  top:20px;
  left:20px;
  background-color:transparent;
  border:0;
  padding:0px;
  z-index:1;
  cursor:pointer;
}

.btn__line{
  height:2px;
  width:32px;
  display:block;
  background-color:#292929;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  position: relative;
}

.btn__line:nth-child(1){
  left:-4px;
}
.btn__line:nth-child(2){
  left:4px;
}
.btn__line:nth-child(3){
  left:-4px;
}


.btn__line + .btn__line{
  margin-top:6px;
}

.btn:hover .btn__line, .btn--open .btn__line{
  left:0px;
}

.btn--open .btn__line{
  background-color:#fff;
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    visibilty: hidden;
    transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    opacity: 0;
    display: flex;
    flex-direction: row;
    -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav__item--hover{
  opacity: 0.25;
}

.full-menu {
  position: fixed;
  top:0;
    width: 100%;
  height:0;
    display: flex;
    justify-content: center;
    align-items: center;
   transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
}

.full-menu:before, .full-menu:after{
  content: '';
  height: 0;
   position: fixed;
  top:0;
    width: 100%;
    height: 0;
}

.full-menu:before{
  z-index: -2;
  background-color:#3b3b3b;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
} 

.full-menu:after{
   z-index: -1;
  background-color:#121212;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
}



.menu--open:before, .menu--open:after{
  height: 100%;
}

.menu--open:before{
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
} 

.menu--open:after{
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.menu--open{
  height:100%;
  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.nav__item {
    padding: 0 20px;
  visibility: hidden;
    transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.menu--open .nav__item{
  visibility: visible;
}

.menu--open .nav__list{
  visibilty: visible;
  opacity: 1;
  -webkit-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.nav__link {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
  letter-spacing: 1px;
}

.nav__item:hover {
    transform: scale(1.1, 1.1);
    
}
.nav__item:hover .nav__link{
  font-weight:700;
}

.nav__item-not-hover{
  opacity:0.3;
}

@media screen and (max-width:767px){
  .nav__list{
    flex-direction:column;
    text-align:center;
  }
  .nav__item{
    padding:8px 0;
  }
}

@media screen and (max-width:480px){
  .nav__link{
    font-size:26px;
  }
}
<html>
  <head>
    <title>FlexBox Exercise #2 - Responsive Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  
  <body>
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="title">FlexBox Exercise #2 - Responsive Menu</h1>
    </div>
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script>
  $(document).ready(function(){
  var burger = $('.btn');
  var menu = $('.full-menu');
  var navItems =$('.nav__item');
  
  burger.click(function(){
    burger.toggleClass('btn--open');
    menu.toggleClass('menu--open');
  });
  
  navItems.hover(function(){
    navItems.not($(this)).toggleClass('nav__item--hover');
  });
});

  </script>
</html>
like image 110
Mojtaba Nava Avatar answered Jan 29 '26 04:01

Mojtaba Nava
Sign in to Comment

Related questions

Switch Between Pages in React
How to concat url in Angular 6?
Can I use react router in django project?
Vue.js - Watch data changes
Why are React Actions dispatched using a Return function
how to draw two image with style in canvas?
Add value to inner array using map in JavaScript
Cannot reduce the fontSize of label in reactjs using semantic-ui-react

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!