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>
Related
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.
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>
I've been learning Javascript and as a bit of practice, thought i'd create myself a dropdown navigation menu, that works on a 'click' rather than hover. I've created the code below (which doesn't work) and i was wondering if someone could explain why so i can see where i've gone wrong.
I can get the dropdown to open, but when i added the code to close the dropdown, the dropdown menu doesn't even open.
I'm hoping someone can point me in the right direction so i can see where i'm going wrong and i can avoid such issues in the future
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenu = document.querySelector('.sub-menu');
menuHeader.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
subMenu.classList.add('nav-open');
// Close if anywhere on screen aprt form menu is clicked
if (subMenu.classList.contains('nav-open')) {
window.onclick = function(event) {
if (!event.target.classList.contains('sub-menu')) {
subMenu.classList.remove('nav-open');
}
};
};
});
});
})();
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
As requested, the CSS is as follows
.main-nav ul > li {
display: inline;
position: relative;
}
.main-nav ul li a {
display: inline-block;
font-family: bebas-neue, sans-serif;
font-style: normal;
font-weight: 400;
text-decoration: none;
color: #333;
font-size: 1.3em;
padding: 0.5em 0.8em 0.8em 0.8em;
transition: background 0.2s linear;
}
.main-nav ul li a:hover {
background: #00a492;
color: #fff;
}
.main-nav ul li a:not(:only-child):after {
content: '\25bc';
font-size: 0.6em;
position: relative;
top: -4px;
left: 2px;
}
/* Second Level of Navigation */
.main-nav ul li ul {
width: 250px;
position: absolute;
top: 160%;
left: 0;
background: #00a492;
}
.main-nav ul li ul li a {
display: block;
}
.sub-menu {
display: none;
}
.nav-open {
display: block;
}
.slicknav_menu {
display:none;
}
.highlight-btn {
background: #00a492 !important;
color: #fff !important;
}
``
Consider using event delegation instead. When anywhere on the page is clicked, run an event listener. If the clicked target is not inside a LI, remove the .nav-open from the existing element with .nav-open, if there is one. Otherwise, if the clicked target was the <a> (a descendant of the outer .menu-item-has-children), navigate to its second child (.children[1]) and add the class to it:
function closeOpenNav() {
const currentOpen = document.querySelector('.nav-open');
if (currentOpen) {
currentOpen.classList.remove('nav-open');
}
}
window.addEventListener('click', (event) => {
const li = event.target.closest('.menu-item-has-children');
if (!li) {
// Close if anywhere on screen aprt form menu is clicked
console.log('closing');
closeOpenNav();
return;
}
if (event.target.parentElement !== li) {
// The clicked element is a descendant of a `.nav-open`
// so, don't do anything
return;
}
event.preventDefault();
closeOpenNav();
const thisSubMenu = li.children[1];
thisSubMenu.classList.add('nav-open');
});
.sub-menu {
display: none;
}
.nav-open {
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I think it can happen because at first you are adding nav-open class than you are checking is it exist if yes you are adding event to window(window still can catch this event) and deleting this class so nothing should happen. Try to addevent.stopPropagation() under event.preventDefault()
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenu = document.querySelector('.sub-menu');
menuHeader.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation()
subMenu.classList.add('nav-open');
// Close if anywhere on screen aprt form menu is clicked
if (subMenu.classList.contains('nav-open')) {
window.onclick = function(event) {
if (!event.target.classList.contains('sub-menu')) {
subMenu.classList.remove('nav-open');
}
};
};
});
});
})();```
This is a wroking demo
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenus = document.querySelectorAll('.sub-menu');
menuHeader.forEach(function(btn) {
btn.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
closeAllMenus();
btn.querySelector('.sub-menu').classList.add('nav-open');
});
});
document.addEventListener("click", function(){
closeAllMenus();
});
function closeAllMenus(){
subMenus.forEach(function(ele) {
ele.classList.remove('nav-open');
});
}
})();
.sub-menu{
display: none;
}
.sub-menu.nav-open{
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">
What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
The first mistake on your code was declaring this
let subMenu = document.querySelector('.sub-menu');
this always will be the first subMenu, so I just removed it.
If you want to get the subMenu of every element you should do something like this:
btn.querySelector('.sub-menu')
So now It will get the sub menu for every element inside the forEach you already did.
To close the menu on document click I just made an event listener on document click which will remove the class nav-open from any of the sub menus.
document.addEventListener("click", function(){
subMenus.forEach(function(ele) {
ele.classList.remove('nav-open');
});
});
maybe like so, code should be self explanatory
// Dropdown Menu
(function(){
let menuHeader = document.querySelectorAll('.menu-item-has-children');
menuHeader.forEach(function(btn){
btn.addEventListener('click', function(event){
event.preventDefault();
if(this.classList.contains('nav-open')) {
return this.classList.remove('nav-open');
}
var openNavPoints = document.querySelectorAll('.menu-item-has-children.nav-open');
if(openNavPoints.length >= 1) {
[...openNavPoints].forEach(function(openNavPoint) {
openNavPoint.classList.remove('nav-open');
});
}
this.classList.add('nav-open');
});
});
})();
.menu-item-has-children .sub-menu {
display: none;
}
.menu-item-has-children.nav-open .sub-menu {
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul></li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
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.
JSFiddle # http://jsfiddle.net/UqyAq/
html -
<nav>
<ul>
<li>Button 1</li>
<li>Button 2
<ul>
<li>Sub-Button 1</li>
<li>Sub-Button 2</li>
<li>Sub-Button 3</li>
</ul>
</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
</ul>
</nav>
css -
* {
margin: 0;
padding: 0;
}
nav {
height: 100%; width: 18%;
position: absolute;
}
nav ul {
list-style-type: none;
font-family: 'Universal Accreditation', Serif;
font-size: 18pt;
letter-spacing: 1px;
font-variant: small-caps;
color: black;
}
nav ul ul {
display: none;
}
nav ul li {
display: block;
}
nav ul li:hover ul {
display: block;
}
Basically, you are looking at a simple un-ordered list drop down menu. I am trying to figure out what I need to use to create an easing effect on the drop down of the second tier. Hovering over 'Button 2' will bring up the sub-menu.
Notice how its a one jump movement. How would I slow it down? Maybe look like the sub-menu is sliding out from under 'Button 2'?
Should I use javascript or css?
Use this code..
HTML:
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li> Sub Link 1.1.1</li>
<li> Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
CSS:
.submenu
{
display: none;
}
#menu li ul{
margin-left:15px;
}
JQUERY:
$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
$('ul:first', this).each(function () {
var p = $(this).parent();
$(this).css('top', p.position().top)
.css('left', p.position().left + p.width())
.show();
});},
function () { $('ul:first', this).hide(); }
);
});