enter image description here

You need to implement a similar menu:
1. When you point at an item -> a bar appears at the top
2. When you click on an item -> The menu drops out 3. If you hover over an item in the menu itself -> a picture 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>

  • nobody knows how to implement it either - NotControlledMind
  • Hello! Maybe I will try to write such code, but it will be in pure javascript, without jquery, will it work for you? - Alexander Kazakov
  • @AlexandrKazakov Hello, it would be very kind of you :) - NotControlledMind
  • one
    If one of the answers suits you, please accept it (check the box next to the plus / minus buttons). - Alexander Kazakov

2 answers 2

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 am still studying JavaScript.
  • Used reset.css.
  • Almost everything wrote from scratch (changed your markup and styles).
  • It looks very cool, thanks for your hard work :) - NotControlledMind
  • Could you advise me where it is better to develop your skills? I also want to learn how to write something like this from scratch :) Or is the whole secret of continuous coding? :) - NotControlledMind
  • @NotControlledMind I will advise, if you have basic css and html skills, start learning native javascript, this is the most difficult of these three, and it may take a lot of time. Here is one of the resources link . - Alexander Kazakov
  • But how to make it so that when you click on the drop-down menu, a picture is shown and you can click on it, how is the link allowed? - NotControlledMind
  • @NotControlledMind it can be done, how? Of course you need to know HTML / CSS / JavaScript. I see this as a separate task, if you want to get this solution, I suggest to write a working prototype first (make a working menu with all styles) and then ask a new question on it, maybe someone will help. - Alexander Kazakov

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

Example

Library itself

  • cool, thanks, really I don’t use Bootstrap in my project :) - NotControlledMind
  • @NotControlledMind because you have the library itself, substitute your styles and that's it, Bootstrap for example - sashatexb