2

I want to create a dropdown mega menu for the navbar that would have the menu expanded on a large device and minimalized on a small device. I will provide photos with what I done so far and what I want to achieve,

I tried to hide the div with display none, position absolute and move it -9999px away and with .remove() on JS, but nothing worked so far.

if (window.innerWidth <= 986)
  $('.lateral').addClass("hide");
else
  $('.lateral').removeClass("hide");
$(window).resize(function() {
  if ($(window).width() <= 986)
    $('.lateral').addClass("hide");
  else
    $('.lateral').removeClass("hide");
});
.lateral {
  position: relative;
  width: 98%;
  height: 28%;
  float: left;
  color: white;
}

.hide {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lateral">
  <div class="container">
    <ul class="navbar-nav nav mr-auto vertical-menu">
      <li class="navbar-header">
      </li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu
    ">
        <p>produs</p>
      </li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu ">
        <p>produs</p>
      </li>
  </div>
  </ul>
  </nav>

I expected my code to delete the whole div, not just the text from it.

1
  • Your HTML is invalid. This is the source of your problem. You should delete this, fix your errors, and then re-ask the question if you still have issues. Note that display:none will not "delete" anything.
    – Rob
    May 24, 2019 at 11:38

1 Answer 1

3

I do no think the issue is with display: none.

There's a few issues on the code:

  1. The HTML tree is corrupted as some elements are closed before their children are.
  2. The CSS code should be within a <style></style> tag.
  3. The JavaScript is missing curly braces. In theory, it should work, but the code is more error prone if you do not add them.

// Adjusted to 600 for better display in demo.
const changeSize = 600; 
if($(window).width() <= changeSize) {
  $('.lateral').addClass("hide");
} else {
  $('.lateral').removeClass("hide");
  $(window).resize(() => {
    if ($(window).width() <= changeSize) {
      $('.lateral').addClass("hide");
    } else {
      $('.lateral').removeClass("hide");
    }
  });
}
.lateral{
      position:relative;
      width:98%;
      height:28%;
      float:left;
      color: red;
    }
    
    .hide {
       display: none !important;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="lateral">
  <div class="container">
    <ul class="navbar-nav nav mr-auto vertical-menu">
      <li class="navbar-header">Menu</li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu"><p>produs</p></li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu "><p>produs</p></li>
    </ul>
   </div>
</div>

<div>
Content
</div>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.