Iskorka Iskorka - 6 months ago 57
CSS Question

CSS element is unclickable

I made up a button which must open up the menu in mobile version of the site with jQuery but it is not working in any way.
I did the new project just with this button and menu to debug and it works fine and also I can't find any difference between this code and the original one.

My brain hurts very much, please tell me why this button is not working and what should I do with it.
(I replaced poping menu with exploding just to see if the button works)

I'm using jQuery UI.



$(document).ready(function() {
$('#menu-icon').click(function() {
$('header').toggle('explode');
});
});

nav {
margin-left: -35px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
border-bottom: 1px solid black;
border-top: 1px solid black;
}

#menu-icon {
background: url(../img/mobile-menu.png) no-repeat;
position: absolute;
left: -9999px;
width: 0px;
}

nav li {
display: inline;
}

nav .left-nav {
margin-top: -20px;
margin-right: 0px;
width: 200px;
float: right;
position: relative;
padding-top: 20px;
}

#login {
position: absolute;
top: 5px;
right: 0;
}

nav h3 {
text-indent: -9999px;
}

nav h3:after {
clear: both;
display: block;
content: ' ';
visibility: hidden;
height: 1%;
}

nav h3 a {
background: url(../img/cart.png) no-repeat;
width: 48px;
height: 44px;
position: absolute;
top: 10px;
left: 0;
padding: 0;
}

nav h3 a:hover {
background-color: white;
}

nav a {
font-family: 'Cormorant Infant', serif;
font-size: 26px;
letter-spacing: 3px;
margin-right: 5px;
color: #0d0d0d;
padding: 15px 5px;
}

nav a:hover {
background-color: #e8e8e8;
}

@media only screen and (max-width: 768px) {
nav {
height: 90px;
}
nav ul {
visibility: hidden;
}
nav .left-nav {
margin-top: -5px;
visibility: visible;
padding-top: 0;
}
nav #login {
letter-spacing: -1px;
font-size: 50px;
padding: 40px 0;
top: -35px;
margin-right: 55px;
}
nav h3 a {
left: -73px;
}
#menu-icon {
width: 78px;
height: 65px;
display: block;
left: 15px;
margin-top: 15px;
}
header h3 {
text-indent: -9999px;
}
.news {
width: 100%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="container">
<header>
<h3 id="menu-icon">
<a href="#"></a>Меню</h3>
<nav>
<ul>
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<div class="left-nav">
<li>
<h3>
<a href="#"></a>Корзина</h3>
</li>
<li><a href="#" id="login">Войти</a></li>
</div>
</ul>
<ul class="mob-menu hidden">
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
</ul>
</nav>
<div class="banner">
<a href="#" id="left"></a>
<!-- image replacement лучше сделать в css без картинки -->
<a href="#" id="right"></a>
<!-- image replacement -->
<h1>Цветочный Дом Полины</h1>
<ul>
<li id=selected>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</header>
</body>




Answer Source

The problem is just that your nav is overlapping #menu-icon.

Since it is already positioned absolutely, you can make sure #menu-icon is clickable just by giving it a z-index higher than zero.

You are right that the function you use has nothing to do with it, but I went ahead and added jQuery UI to the snippet anyway, to alleviate any possible confusion about using the .toggle() method.

Note that I commented out your left and text-indent styles in the snippet below just to make sure it's clear at a glance what you're supposed to click, but that's not actually necessary to make #menu-icon clickable; you can still click its invisible box if you add those styles back in.

$(document).ready(function() {
  $('#menu-icon').click(function() {
    $('header').toggle('explode');
  });
});
nav {
  margin-left: -35px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

#menu-icon {
  background: url(../img/mobile-menu.png) no-repeat;
  position: absolute;
  /*left: -9999px;*/
  width: 0px;
  z-index: 1;
}

nav li {
  display: inline;
}

nav .left-nav {
  margin-top: -20px;
  margin-right: 0px;
  width: 200px;
  float: right;
  position: relative;
  padding-top: 20px;
}

#login {
  position: absolute;
  top: 5px;
  right: 0;
}

/*nav h3 {
  text-indent: -9999px;
}*/

nav h3:after {
  clear: both;
  display: block;
  content: ' ';
  visibility: hidden;
  height: 1%;
}

nav h3 a {
  background: url(../img/cart.png) no-repeat;
  width: 48px;
  height: 44px;
  position: absolute;
  top: 10px;
  left: 0;
  padding: 0;
}

nav h3 a:hover {
  background-color: white;
}

nav a {
  font-family: 'Cormorant Infant', serif;
  font-size: 26px;
  letter-spacing: 3px;
  margin-right: 5px;
  color: #0d0d0d;
  padding: 15px 5px;
}

nav a:hover {
  background-color: #e8e8e8;
}

@media only screen and (max-width: 768px) {
  nav {
    height: 90px;
  }
  nav ul {
    visibility: hidden;
  }
  nav .left-nav {
    margin-top: -5px;
    visibility: visible;
    padding-top: 0;
  }
  nav #login {
    letter-spacing: -1px;
    font-size: 50px;
    padding: 40px 0;
    top: -35px;
    margin-right: 55px;
  }
  nav h3 a {
    left: -73px;
  }
  #menu-icon {
    width: 78px;
    height: 65px;
    display: block;
    left: 15px;
    margin-top: 15px;
  }
  /*header h3 {
    text-indent: -9999px;
  }*/
  .news {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
  <header>
    <h3 id="menu-icon">
      <a href="#"></a>CLICK ME</h3>
    <nav>
      <ul>
        <li><a href="#">Прайслист</a></li>
        <li><a href="#">Подбор букета</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Доставка</a></li>
        <div class="left-nav">
          <li>
            <h3>
              <a href="#"></a>Корзина</h3>
          </li>
          <li><a href="#" id="login">Войти</a></li>
        </div>
      </ul>
      <ul class="mob-menu hidden">
        <li><a href="#">Прайслист</a></li>
        <li><a href="#">Подбор букета</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Доставка</a></li>
      </ul>
    </nav>
    <div class="banner">
      <a href="#" id="left"></a>
      <!-- image replacement лучше сделать в css без картинки -->
      <a href="#" id="right"></a>
      <!-- image replacement -->
      <h1>Цветочный Дом Полины</h1>
      <ul>
        <li id=selected>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
      </ul>
    </div>
  </header>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download