Develop Reference

Setting Floating UI shift on multiple elements

I want to use Floating UI to prevent dropdown menus from going off the left/right edge of the screen. The example code is as follows:
HTML:
<ul class="menu">
<li class="menu__item">
Item 1
<ul class="submenu">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
<li>Item 1.5</li>
</ul>
</li>
<li class="menu__item">
Item 2
<ul class="submenu">
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul>
</li>
<li class="menu__item">
Item 3
<ul class="submenu">
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
<li>Item 3.4</li>
<li>Item 3.5</li>
</ul>
</li>
<li class="menu__item">
Item 4
<ul class="submenu">
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
<li>Item 4.4</li>
<li>Item 4.5</li>
</ul>
</li>
<li class="menu__item">
Item 5
<ul class="submenu">
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
<li>Item 5.4</li>
<li>Item 5.5</li>
</ul>
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
display: flex;
}
a {
color: inherit;
text-decoration: none;
}
.menu {
display: flex;
gap: 5px;
justify-content: space-around;
color: white;
}
.menu > li {
position: relative;
background: blue;
padding: 0 30px;
height: 40px;
}
.submenu {
display: none;
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
background: red;
}
.menu > li:hover .submenu {
display: flex;
}
.submenu li {
padding: 10px 20px;
}
.submenu a {
white-space: nowrap;
}
JS:
import { autoUpdate, computePosition, shift } from "https://cdn.skypack.dev/#floating-ui/dom#1.2.0";
const menuItems = document.querySelectorAll('.menu__item');
menuItems.forEach((item) => {
const reference = item.querySelector('.menu__link');
const floating = item.querySelector('.submenu');
computePosition(reference, floating, {
placement: "bottom",
middleware: [shift()]
}).then(({ x, y }) => {
Object.assign(floating.style, {
left: `${x}px`
});
});
});
There's a CodePen here.
However, I'm struggling to understand the documentation and the implementation I have doesn't seem to work. The red dropdowns should be center-aligned under the blue items where possible but Floating UI should adjust the positioning horizontally so that the first dropdown should have its left edge aligned to the left of the screen and the last dropdown should have its right edge aligned to the right of the screen.
Could anyone advise how to get this working and ensure that it maintains the correct positioning even after window resizing?
Many thanks.

I wanna show an element when hovering it using Jquery but even though it recognizes the event it won´t work

So, i've seen some other answers for similar stuff, but nothing that really helps or even works, I've tried to follow every step people said in other posts but nothing helped.
I wanna show a sub menu when I hover over it by removing the class hidden that it is defining its display to hiden, but I can´t make it using only css and, even though my js code recognizes that the mouse is hovering through it, it won´t budge.
So, here's my codes
$(".dropdown").hover(function() {
console.log('hover in');
$(".dropdown-content").removeClass("hidden");
console.log('hover out');
$(".dropdown-content").addClass("hidden");
})
.hidden {
display: none;
}
.menu-desktop {
position: absolute;
left: 70%;
list-style-type: none;
}
.menu-desktop ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu-desktop a {
display: inline;
float: left;
margin-left: 5px;
color: #bcbcbc;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background-color: transparent;
border-radius: 0%;
border-color: transparent;
}
.menu-desktop a:hover {
color: #858181
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown-content .shown {
position: absolute;
background-color: blue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-itens">
<div class="logo">
<img src="assets/9mnb2mazqne71.png" alt="">
</div>
<!-- Navigation menu -->
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA</li>
<ul id="submenu" class="dropdown-content hidden">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1</li>
<ul id="submenu2" class="dropdown-content hidden">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</ul>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
</nav>
EDIT: Forgot to include my css, so, here it is!

You need to declare function inside hover() to handle hover in & out event:
$( ".dropdown" ).hover(
function() {
$(".dropdown-content").removeClass("hidden");
}, function() {
$(".dropdown-content").addClass("hidden");
}
);

The problems with your code
Main problem
You immediately add the class back after removing it, so you never see the dropdown content.
jQuery's .hover() expects two function arguments (first is run when mouse enters, second when mouse leaves).
direct-child-only problem
Second problem with your code is that it toggles the class on all submenus while the one you want is only the direct, immediate child of the list item being hovered. You can use
$(this).find(".dropdown-content").first()
to only affect the sub-ul you want. Alternatively, instead of .first(), you can also use .eq(0).
Invalid html problem
Please also note that ul can only have li children, so you need to wrap any sub-ul inside an li.
The solution to not use
$(".dropdown").hover(
function() {
$(this).find(".dropdown-content").first().removeClass("hidden");
},
function() {
$(this).find(".dropdown-content").eq(0).addClass("hidden");
}
);
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA
<ul id="submenu" class="dropdown-content hidden">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1
<ul id="submenu2" class="dropdown-content hidden">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>
The solution to use is CSS only
That being said, you don't need any JavaScript for this, and you shouldn't be using JS for a CSS job:
.dropdown-content {
display: none;
}
.dropdown:hover > .dropdown-content {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="menu-desktop">
<li>HOME</li>
<li class="dropdown">EMPRESA
<ul id="submenu" class="dropdown-content">
<li>submenu 1</li>
<li>submenu 1</li>
<li>submenu 1</li>
<li class="dropdown">submenu 1
<ul id="submenu2" class="dropdown-content">
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>CLIENTES</li>
<li>CONTATO</li>
</ul>

Multi-level dropdown navigation - keep secondary dropdown closed

so I am relatively new to coding and I am trying to make a multilevel dropdown menu, that when opened shows the links for the first level but doesn't show the second level links until clicked.
I started with a fork from codepen and have the navigation built, but I do not know what script to add to close the secondary links.
// open mobile menu
$('.js-toggle-menu').click(function(e){
e.preventDefault();
$('.mobile-header-nav').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle').click(function(e){
e.preventDefault();
$('.subnav1').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle2').click(function(e){
e.preventDefault();
$('.subnav2').slideToggle();
});
$('.sub-toggle3').click(function(e){
e.preventDefault();
$('.subnav3').slideToggle();
});
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.mobile-nav-wrap {
/* display: none; */
}
}
.mobile-header-nav {
background-color: #222222;
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100px;
width: 100%;
}
.mobile-header-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
color: white;
display: block;
padding: 15px 15px;
text-align: left;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
background-color: #2f2f2f;
}
a.mobile-menu-toggle {
padding-left: 50px;
color: #52575f;
text-decoration: none;
background: #eeeff0;
font-size: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav1">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle2" href="#">Resources</a>
<ul class="subnav2">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle3" href="#">Service</a>
<ul class="subnav3">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
The codepen that I am working on can be found here:
Codepen Link
Any advice is welcome

You can just add some CSS to hide the sub nav initially, like this:
.subnav1, .subnav2, .subnav3 {
display: none;
}
You may want to also change the classes so they are a little more generic, like just use a class of subnav and sub-toggle instead of subnav1, sub-toggle2, etc. Then you can have just one CSS rule and one event handler regardless of how many menu items you add. So your CSS for hiding the sub nav would just be:
.subnav {
display: none;
}
And your javascript to toggle all of the menu items is reduced to just:
$('.sub-toggle').click(function(e){
$(this).next('.subnav').slideToggle();
$(this).toggleClass('open');
});
I updated your code pen with an example here.

You may try this. The changes are only done to js logic.
Also, I'm not sure why you have e.preventDefault(). You only need it if you are trying to avoid submit a form. So I took them out.
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Resources</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Service</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
<script>
$().ready(function()
{
$('.js-toggle-menu').click(function(e){
$('.sub-toggle').slideToggle();
$('.sub-toggle').each(function()
{
$(this).closest('li').find('.subnav').hide();
});
});
$('.sub-toggle').click(function(){
$(this).closest('li').find('.subnav').slideToggle();
});
});
</script>

How to do a vertical drop-down menu?

i try to realize how to do a vertical drop-down menu like on this site: http://haririsportsandmedicals.de/
It should "drop-down" when the onClick event happens and not at mousover.
Has anyone a code sample for doing something like this?
Would be very great, thanks.

Take a look at this. I think its pretty close to what you are seeking.
Demo: http://designshack.net/tutorialexamples/verticalnav/index.html
Tutorial/Guide: http://designshack.net/articles/css/verticalaccordionav/

Try this.
HTML
<div>
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div>
CSS
*{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
li a{
text-decoration: none;
height: 26px;
display: inline-block;
}
li ul{
display: none;
}
li li a{
margin-left: 10px;
}
jQuery
$(document).ready(function(){
$('li').click(function(){
$(this).children('ul').toggle();
});
});
Demo

Drop down menu issues

I have a main menu with few sub pages that I want to show in a drop down menu.
I am using CSS to hide all the "ul" that are inside the Main Menu "ul", and show the nested "ul" when hover over the main "ul (li's)"
It is not really working, I simply want to make it that when you hover over a tab from the main menu the sub menu just inside it will show as a drop down menu, and then when you hover out of the drop down menu or hover over anther main menu tab the drop down menu will go away.
Any ideas of how I would do that?
Here is the HTML:
<div id="headerLogo">
<?php include ("assets/templates/header-logo.inc"); ?>
</div>
<nav><ul id="mainMenu"><!--Main Menu-->
<li>Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li><li>
<li>Crisis</li>
</ul></li>
<li>Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul></li>
<li>Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul></li>
<li>Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul></li>
<li>Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul></li>
<li>Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul></li>
<li>Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul></li>
</ul></nav>
</div>
</header>
CSS:
/*Main Menu*/#mainMenu {
margin-top: 10px;
float: right;
}
ul#mainMenu ul {
display: none;
}
ul#mainMenu li:hover > ul {
display: block;
background-color: #F7F7F7;
width: 145px;
position: absolute; top: 100%;
}
ul#mainMenu li ul li {
float: none;
width: 100%;
}
#mainMenu li {
float: left;
}
#mainMenu a {
color: #595959;
width: 100%;
padding: 10px 15px;
margin-left: 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: background 0.1s linear;
-moz-transition: background 0.1s linear;
-ms-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#mainMenu a:hover {
color: #4E6C98;
}
#mainMenu a.active {
color: #ffffff;
background-color: #4E6C98;
cursor: default;
}

Try adding position: relative; on #mainMenu li. Your dropdowns are positioned absolutely but have nothing to be relative to.