Nav menu click opening and closing the Nav items and content

2
votes

I just created a nav menu icon and nav item list Home, About & Contact and on clicking each nav list item displaying their content. My requirement is I haven't provided a close button for closing the content. all the closing opening should work from the nav menu click only. i.e on the first click on nav menu nav items will display (Home, About and Contact), by click on any of the items list their content will appear and by clicking the nav menu again here will need to close the content and nav items needs to appear. that is it needs to go back to the nav items from the content.

Below is my code:

$(document).ready(function(){
      $('.nav-menu').click(function(){
        $('#menu').toggleClass("open-menu");
      });
      $(".link").click(function(e) {
        e.preventDefault();
        $('.home_content .scroll').fadeOut('fast');
        $('#' + $(this).data('rel')).fadeIn('fast');
        $('.link').removeClass("focus");
        $(this).addClass("focus");
      });

     $(".desktop li .link").click(function(){
        $(".desktop li").addClass("open");
        $(this).siblings().removeClass("open-btn")
        $(this).parent().parent().removeClass("open");
        $(this).removeClass("focus");
        $(this).parent().addClass("focus");
      });
     });
#menuToggle
  {
   display: block;
z-index: 1;
-webkit-user-select: none;
user-select: none;
padding-left:5px;
  }
  #menu{
display:flex;
flex-direction:column;
justify-content: space-between;
position: fixed;
height: 82%;
width: 24%;
padding-top: 7px;
padding-left:0px;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-110%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
/*hamburger*/
.nav-menu span
{
display: block;
width: 21px;
height: 1px;
margin-bottom: 4px;
position: relative;
background: #000;
border-radius: 25px;
z-index: 1;
}
 .nav-menu{
  padding-top:5px;
}
  .active_links{
  margin-top:0px;
    margin-bottom:1.6vh;
padding-right:0vw;
width: 100%;
margin-left: auto;
margin-right: auto;
  }
  .bottom-links{
  padding-bottom:0.5vw;
  text-align: right;
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
width:100%;
 }
  .active_links a{
  font-size: 16px;
  font-family: "font-regular";
       }
    .bottom-links a{
    font-size: 16px;
   }
.open-menu{
transform: none !important;
}
 /* content container */
.home_content {
position: relative;
width: 23%;
height: 88vh;
margin-top:auto;
margin-bottom:auto;
}
.scroll{
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:10;
 }
 .wrapper{
display:flex;
height:88%;
 }

 #content1{
  padding-bottom:20px;
  position:relative;
  transition:all 500ms ease;
  }

 }
   .cover-bar {
  position: absolute;
  background: #fff;;
  height: 100%;  
  top: 0;
  right: 0px;
  width: .5em;
  transition: all .5s;
  opacity: 1;
   }

   .link-wrapper{
  display:flex;
  align-items: center;
  justify-content: space-between;
   }
  .firm_content{
text-align: justify;
font-size: 15px;
line-height: 1.3;
width: 100%;
height:96%;
margin: 0px auto 0px auto;
padding-bottom:10px;
letter-spacing:1px;
color:grey;
  }
  .scroll a{
  color:grey;
  text-decoration: none;
  line-height: 1;
  font-size:15px;
 }

  .ch{
  font-size:14px;
 }


.open{
display:none;
}
.open-btn{
  visibility: hidden;
}    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuToggle">
            <div class="nav-menu">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <ul class="nav" id="menu">
<div class="active_links desktop scroll-width-thin">
    <li>
      <div class="link-wrapper">
        <a href="#" class="link" data-rel="content1">Home</a>
      </div>
      <div id="content1" class="close-text">
        <div class="firm_content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </li>
    <li>
      <div class="link-wrapper">
        <a href="#" class="link" data-rel="content2">About</a>
      </div>
      <div id="content2" class="close-text">
        <div class="firm_content" style="text-align:left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </li>
    <li>
      <div class="link-wrapper">
        <a href="#" class="link" data-rel="content4">Contact</a>
      </div>
      <div id="content4" class="close-text">
        <div class="firm_content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
    </li>
</div>
</ul>
</div>
1
javascriptjqueryhtmlcss

1 Answers

1
votes

The following changes needs to be done in your code base:

1. Remove the open .class & hide content of menu on click of .nav-menu

$(".desktop li").removeClass("open");
$('.firm_content').hide();

2. On click event of menu just use toggleClass method to add remove .open class

$(".desktop li").toggleClass("open");


$(document).ready(function() {
  $('.firm_content').hide();
  $('.nav-menu').click(function() {
  
    if($('.firm_content').is(":visible")){
      $('.firm_content').hide();
      $(".desktop li").removeClass("open");
    }else{
      $('#menu').toggleClass("open-menu");
    }

    
  });
  $(".link").click(function(e) {
    e.preventDefault();
    $('.home_content .scroll').fadeOut('fast');
    $('#' + $(this).data('rel')).fadeIn('fast');
    $('.link').removeClass("focus");
    $(this).addClass("focus");
  });

  $(".desktop li .link").click(function() {
    $(".desktop li").toggleClass("open");
    $(this).siblings().removeClass("open-btn")
    $(this).parent().parent().removeClass("open");
    $(this).removeClass("focus");
    $(this).parent().addClass("focus");
    $(this).closest('div').next().find('.firm_content').toggle();

  });
});
#menuToggle {
  display: block;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  padding-left: 5px;
}

#menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  height: 82%;
  width: 24%;
  padding-top: 7px;
  padding-left: 0px;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-110%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}


/*hamburger*/

.nav-menu span {
  display: block;
  width: 21px;
  height: 1px;
  margin-bottom: 4px;
  position: relative;
  background: #000;
  border-radius: 25px;
  z-index: 1;
}

.nav-menu {
  padding-top: 5px;
}

.active_links {
  margin-top: 0px;
  margin-bottom: 1.6vh;
  padding-right: 0vw;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.bottom-links {
  padding-bottom: 0.5vw;
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
}

.active_links a {
  font-size: 16px;
  font-family: "font-regular";
}

.bottom-links a {
  font-size: 16px;
}

.open-menu {
  transform: none !important;
}


/* content container */

.home_content {
  position: relative;
  width: 23%;
  height: 88vh;
  margin-top: auto;
  margin-bottom: auto;
}

.scroll {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.wrapper {
  display: flex;
  height: 88%;
}

#content1 {
  padding-bottom: 20px;
  position: relative;
  transition: all 500ms ease;
}


}
.cover-bar {
  position: absolute;
  background: #fff;
  ;
  height: 100%;
  top: 0;
  right: 0px;
  width: .5em;
  transition: all .5s;
  opacity: 1;
}
.link-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.firm_content {
  text-align: justify;
  font-size: 15px;
  line-height: 1.3;
  width: 100%;
  height: 96%;
  margin: 0px auto 0px auto;
  padding-bottom: 10px;
  letter-spacing: 1px;
  color: grey;
}
.scroll a {
  color: grey;
  text-decoration: none;
  line-height: 1;
  font-size: 15px;
}
.ch {
  font-size: 14px;
}
.open {
  display: none;
}
.open-btn {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuToggle">
  <div class="nav-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="nav" id="menu">
    <div class="active_links desktop scroll-width-thin">
      <li>
        <div class="link-wrapper">
          <a href="#" class="link" data-rel="content1">Home</a>
        </div>
        <div id="content1" class="close-text">
          <div class="firm_content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </li>
      <li>
        <div class="link-wrapper">
          <a href="#" class="link" data-rel="content2">About</a>
        </div>
        <div id="content2" class="close-text">
          <div class="firm_content" style="text-align:left">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </li>
      <li>
        <div class="link-wrapper">
          <a href="#" class="link" data-rel="content4">Contact</a>
        </div>
        <div id="content4" class="close-text">
          <div class="firm_content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </li>
    </div>
  </ul>
</div>