CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sktefan
Sktefan

Reputation: 21

Menu doesn't stay open when trying to click

I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this? Here is my Jquery:

$(document).ready(function() {
  $(".slide").hide();
  $("#menu").hover(function() {
    $(".slide").slideToggle("slow");
  });
  $(".logo").click(function() {
    window.location = 'index.html';
  });
  $(".logo").hover(function() {

  });
});

Here is the full code: https://jsfiddle.net/lollz4/dh1kLh8L/

P.S. I'm new here so sorry if I'm doing anything wrong.

Upvotes: 1

Views: 43

Answers (1)

jdlm
jdlm

Reputation: 6644

Add an additional wrapper around your menu and check for the hover state on that element instead:

$(document).ready(function() {
  $(".slide").hide();
  $("#menu-wrapper").hover(function() {
    $(".slide").slideToggle("slow");
  });
  $(".logo").click(function() {
    window.location = 'index.html';
  });
  $(".logo").hover(function() {

  });
});
* {
  margin-top: 0px;
  margin-left: 0px;
}
body {
  background-color: #EBEDEF;
}
.page {
  background: white;
  width: 100%;
  height: 52em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 2px;
  position: absolute;
  margin: 0;
  padding: 0;
}
#menu {
  display: block;
  position: absolute;
  left: 0em;
  top: 0em;
  background-color: #2E4053;
  border: none;
  padding: 15px 32px;
  font-size: 16px;
  clear: both;
}
.slide {
  display: block;
  left: 0em;
  top: 0em;
  position: relative;
  background-color: #2E4053;
  border: none;
  padding: 15px 32px;
  font-size: 16px;
  clear: both;
}
.logo {
  height: 3em;
  width: 100%;
  background-color: #ABB2B9;
  padding: 0px;
  margin: 0px;
  position: fixed;
}
div img {
  margin: auto;
  width: 8em;
  height: 3em;
  background-color: #607D8B;
  border-radius: 2px;
  display: block;
  padding-top: 0;
}
div img:hover {
  opacity: 0.80;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="scripts.js"></script>
  <title>Stefan's Website</title>
</head>

<body>
  <div class="logo">
    <img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
    <div id="menu-wrapper">
      <button id="menu">
        Menu
      </button>
      <button class="slide">
        Pagina1
      </button>
      <button class="slide">
        Pagina2
      </button>
      <button class="slide">
        Pagina3
      </button>
    </div>
  </div>
  <!--<div class="page">
  </div>-->
</body>

</html>

Upvotes: 2

Related Questions