Блог

Главная - Вопросы по программированию - Прыгающее слайд-меню с помощью Jquery

Прыгающее слайд-меню с помощью Jquery

#javascript #jquery #html #css #menu

#javascript #jquery #HTML #css #меню

Вопрос:

Я новичок в Jquery и довольно новичок в HTML / CSS, но поскольку я из тех, кто учится на собственном опыте, я создавал практический веб-сайт, изучая новые вещи, и экспериментировал с элементами, которые я хотел бы в конечном итоге реализовать на настоящем сайте.

Я пытался создать правильное меню слайдов, которое активируется при наведении курсора на пункты меню. Мне удалось заставить меню выдвигаться, но если я наведу курсор вниз на выдвинутое меню, все это начнет подпрыгивать! Я пробовал использовать .stop(), но потом он мигает!

Я нашел вопросы здесь и на других сайтах от людей с очень похожими (если не идентичными) проблемами, но я думаю, что я не понимаю ни одного из ответов, которые сработали для них. Мне нужны визуальные эффекты, и ответы типа «вставить оператор if () {}» меня смущают, потому что я не уверен, куда его поместить. Если я следую тому, что мой исходный материал предписывает мне делать (поместите оператор check / if в нижнюю функцию), кажется, что это просто нарушает код, а затем меню даже не выдвигаются.

Это было очень неприятно, и когда я слишком расстраиваюсь (например, через шесть часов) Я не могу хорошо подумать о решении, поэтому, если кто-нибудь может помочь мне найти ошибки в моем коде или дать мне довольно подробное объяснение того, что я мог бы сделать, чтобы исправить эту проблему с отскоком, и как это началось, я был бы очень признателен.

Я прикрепил JQ, HTML и CSS. Заранее спасибо.

 $(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);

}); 
 nav {
  background-color: #000000;
  padding:10px 0;
  text-align:center;
}

nav li {
  margin: 10px;
  padding: 0 10px;
  display: inline;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}

nav ul li {
  display:inline-block;
  position:relative;
}

nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  top:50px;
  width:200px;
}

nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0;
  display:block;
}

ul.sub-menu {
    display:none;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>

  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  

  <li><a href="">News</a></li>

  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>

  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

Ответ №1:

У вас есть пробел между вашими <li> элементами и выпадающим меню (вы можете увидеть его здесь). Просто удалите / переместите его.

Я сделал

 nav {
  [...]
  // padding: 10px 0;
  padding: 0;
}
nav li {
  [...]
  // padding: 0 10px;
  padding: 10px;
}
 
 $(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);

}); 
 nav {
  background-color: #000000;
  padding: 0;
  text-align:center;
}

nav li {
  margin: 10px;
  padding: 10px;
  display: inline;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}

nav ul li {
  display:inline-block;
  position:relative;
}

nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  top:50px;
  width:200px;
}

nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0;
  display:block;
}

ul.sub-menu {
    display:none;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>

  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  

  <li><a href="">News</a></li>

  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>

  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>

Комментарии:

1. Что за черт? Это было так? CSS? Ради всего святого. Ну, это решило мою проблему. Спасибо, Robiseb.

Ответ №2:

Измените css в nav li ul top:50px том, где padding-top:23px 

 $(document).ready(function() {
    $('.dropdown').hover(
    function() {
        $(this).children(".sub-menu").slideDown(200);
    },
    function() {
        $(this).children(".sub-menu").slideUp(200);
    }
);

}); 
 nav {
  background-color: #000000;
  padding:10px 0;
  text-align:center;
}

nav li {
  margin: 10px;
  padding: 0 10px;
  display: inline;
}

nav ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

nav a {
  font-size: 30px;
  height: 35px;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: #ff0000;
}

nav ul li {
  display:inline-block;
  position:relative;
}

nav li ul {
  background-color:#000000;
  position:absolute;
  left:0;
  padding-top:23px;
  width:200px;
}

nav li li a {
  position:relative;
  font-size:25px;
  margin:0;
  padding:0`;
  display:block;
}

ul.sub-menu {
    display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
 <ul>
  <li><a href=""><b>Home</b></a></li>
  <li><a href="">About</a></li>
  <li><a href="">Inspiration</a></li>

  <li class="dropdown"><a href="">Find</a>
    <ul class="sub-menu">
      <li><a href="">Ebooks</a></li>
      <li><a href="">PDFs</a></li>
    </ul>
  </li>  

  <li><a href="">News</a></li>

  <li class="dropdown"><a href="">Contact Us</a>
    <ul class="sub-menu">
      <li><a href="">E-mail List</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </li>

  <li class="dropdown"><a href="">Extras</a>
    <ul class="sub-menu">
      <li><a href="">Coming Soon</a></li>
    </ul>
  </li>
 </ul>
</nav>
Метки: