Drop-down menu on jQuery

enter a description of the image here

You need to implement a similar menu:
1. When you hover over the item --> the bar{[9] appears at the top]} 2. When you click on the item --> the menu appears 3. If you hover over the item in the menu itself --> the image appears on the right

$(".header_nav").on("click", function() {
  $(".drop_menu").show();
});


$(".drop_menu:has(a)").on("click", function() {
  $(".drop_menu__img").show();
});
* {
  margin: 0;
  padding: 0;
}

ul>li {
  list-style: none;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

.horizontal_line {
  background: black;
  float: left;
  width: 100%;
  height: 6px;
  clear: both;
  margin-top: 10px;
  margin-bottom: 22px;
}

.horizontal_line:hover {
  background: red;
  height: 6px;
}

.header_nav {
  float: left;
}

.header_nav ul>li {
  display: inline-block;
  padding-right: 20px;
}

.header_nav a {
  text-decoration: none;
}

.header_nav a:hover {
  color: #1bff04;
  text-decoration: none;
}

.drop_menu {
  display: none;
  height: 100px;
  width: 110px;
  background: blue;
  float: left;
  position: relative;
  top: 25px;
  right: 238px;
}

.drop_menu a {
  color: white;
  text-decoration: none;
  font: 14px "Times New Roman";
}

.drop_menu a:hover {
  color: #1bff04;
  text-decoration: none;
  font: 14px "Times New Roman";
}

.drop_menu__img {
  display: none;
  height: 100px;
  width: 110px;
  background: #ff9a22;
  float: left;
  position: relative;
  top: 25px;
  right: 238px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="wrapper">
  <span class="horizontal_line"></span>
  <nav class="header_nav">
    <ul>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
    </ul>
  </nav>
  <div class="header_nav__drop">
    <nav class="drop_menu">
      <ul>
        <li><a href="#">Example-drop</a></li>
        <li><a href="#">Example-drop</a></li>
        <li><a href="#">Example-drop</a></li>
        <li><a href="#">Example-drop</a></li>
      </ul>
    </nav>
    <div class="drop_menu__img"></div>
  </div>
</div>
Author: Yuri, 2017-04-04
Source

2 answers

Here is my option: 

(function() {
  'use strict';

  function dropdown(event) {
    var target = event.target;

    if (!target.classList.contains('dropdown-toggle')) return;
    target.nextElementSibling.classList.toggle('hidden');
    event.preventDefault();
  }

  function showImg(event) {
    var target = event.target;

    if (!target.classList.contains('dropdown-toggle_img')) return;
    target.nextElementSibling.classList.toggle('hidden');
  }

  function hideImg(event) {
    var target = event.target;
    if (!target.classList.contains('dropdown-toggle_img')) return;
    target.nextElementSibling.classList.toggle('hidden');
  }



  var nav = document.querySelector('nav.header_nav');

  nav.addEventListener('click', dropdown);
  nav.addEventListener('mouseover', showImg);
  nav.addEventListener('mouseout', hideImg);
})();
span.horizontal_line {
  width: 100%;
  height: 5px;
  background-color: #000;
  color: #000;
  display: block;
  position: absolute;
  top: 9px; }

nav.header_nav {
  position: relative;
  margin-top: 25px; }
  nav.header_nav > ul > li {
    display: inline-block; }
    nav.header_nav > ul > li > a {
      color: #000;
      font-size: 20px;
      font-weight: 700px;
      text-decoration: none;
      border-top: 5px solid black;
      padding: 10px; }
      nav.header_nav > ul > li > a:hover {
        color: red;
        border-top-color: red;
        -webkit-transition: 0.3s;
                transition: 0.3s; }
  nav.header_nav > ul li.dropdown {
    position: relative; }
    nav.header_nav > ul li.dropdown ul.dropdown-menu {
      top: 35px;
      position: absolute;
      background-color: #000;
      box-shadow: 0px 14px 68px -15px rgba(0, 0, 0, 0.75); }
      nav.header_nav > ul li.dropdown ul.dropdown-menu li {
        color: #fff;
        padding: 10px 5px;
        display: inline-block; }
        nav.header_nav > ul li.dropdown ul.dropdown-menu li a {
          color: #fff;
          padding: 10px 0;
          text-decoration: none; }
          nav.header_nav > ul li.dropdown ul.dropdown-menu li a:hover {
            color: red;
            -webkit-transition: 0.3s;
                    transition: 0.3s; }
        nav.header_nav > ul li.dropdown ul.dropdown-menu li img {
          position: absolute;
          height: 150px;
          width: 150px;
          left: 100%;
          z-index: 10;
          top: 0; }

.hidden {
  display: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
  <span class="horizontal_line"></span>
  <nav class="header_nav">
    <ul>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" href="#">Dropdown</a>
        <ul class="dropdown-menu hidden">
          <li>
            <a class="dropdown-toggle_img" href="#">Example-drop</a>
            <img class="hidden" src="http://placehold.it/150x150" alt="Img">
          </li>
          <li>
            <a class="dropdown-toggle_img" href="#">Example-drop</a>
            <img class="hidden" src="http://placehold.it/150x150" alt="Img">
          </li>
          <li>
            <a class="dropdown-toggle_img" href="#">Example-drop</a>
            <img class="hidden" src="http://placehold.it/150x150" alt="Img">
          </li>
          <li>
            <a class="dropdown-toggle_img" href="#">Example-drop</a>
            <img class="hidden" src="http://placehold.it/150x150" alt="Img">
          </li>
        </ul>
      </li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
    </ul>
  </nav>
  • At the moment, I'm still learning JavaScript myself.
  • I used reset. css.
  • I wrote almost everything from scratch(I changed your markup and styles).
 2
Author: Александр Казаков, 2017-11-16 06:45:56

There is a ready-made solution in jQuery, called jQuery-menu-aim

Example

The library itself

 2
Author: sashatexb, 2017-04-04 21:03:57