I have a navigation menu that works well and looks good.
The HTML for the menu is:
<div id="menubar">
<div id="welcome">
<h1>Cedars Hair <span>Academy</span></h1>
</div><!--close welcome-->
<div id="menu_items">
<ul id="menu">
<li class="current">Home</li>
<li>The Salon</li>
<li>Testimonials</li>
<li>Courses</li>
<li>The Staff</li>
<li>Contact Us</li>
</ul>
</div><!--close menu-->
</div><!--close menubar-->
But I want to change it so it is something like:
<li>The Salon
<ul>
<li>Hair Cut</li>
</ul>
</li>
So under the salon, a drop down menu would come up with 'Hair Cut'.
I know this is possible with CSS, but the problem is I have a lot of CSS with the divs shown above (menubar, welcome, menu_items etc). Do you know the most simplest way to make a simple dropdown?
The simplest way in a nutshell:
https://jsfiddle.net/svArtist/2jd9uvx0/
hide lists inside other lists
upon hovering list elements, show the child lists
ul ul {
display:none;
display:absolute;
bottom:-100%;
}
li{
position:relative;
}
li:hover>ul {
display:table;
}
<ul>
<li>The Salon
<ul>
<li>Hair Cut
</li>
</ul>
</li>
</ul>
Why don't you use Jquery UI?
https://jqueryui.com/menu/
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
Added the sub menu using li:hover
Here is the fiddle - https://jsfiddle.net/gkdj6y5x/
Related
I have a timeline for my product tour that has 4 main sections, with 4-5 subsections in between, it is set up like this:
<ul class="slideshow-timeline">
<li class="active-target-main main-section">Target
<ul class="current-section target-sub">
<li>Donor Profiles</li>
<li>Segmentation</li>
<li>Custom Lists</li>
<li>RFM Analysis</li>
<li>Wealth Screening</li>
</ul>
</li>
<li class="main-section">Connect
<ul class="current-section connect-sub">
<li>Email Marketing</li>
<li>Social Media</li>
<li>Direct Mail</li>
<li>Welcome Series</li>
</ul>
</li>
<li class="main-section">Convert
<ul class="current-section convert-sub">
<li>Donation Forms</li>
<li>Automated Receipts</li>
<li>Events</li>
<li>Member Mgmt</li>
<li>Moves Mgmt</li>
</ul>
</li>
<li class="main-section">Optimize
<ul class="current-section optimize-sub">
<li>Analytics</li>
<li>Campaigns/Funds/Appeals</li>
<li>A/B Testing</li>
<li>Task Management</li>
</ul>
</li>
</ul>
I am looking for a JS solution to allow me to hide the connect-sub, convert-sub, and optimize-sub while the .active-tour div has a class of target-panel.
I attempted this by using .css but was wondering if there would be a more-elegant solution?
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".connect-sub").css("display", "none");
$(".convert-sub").css("display", "none");
$(".optimize-sub").css("display", "none");
}
});
Since the timeline and slides are set as position:absolute and position:fixed it is not sitting in the page flow, so I can't just target it in css.
In theory, this JS should work, but for some reason, it doesn't want to hide the 3 sub sections. No errors are being thrown either. Here is my working page.
I will continue looking into a solution, but if any of you could point me in the right direction, I'd really appreciate it!
Updated to hide all subnavs and show with javascript:
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".target-sub").css("display", "block");
}
});
Updated answer:
Use a containing div for both the main content and the footer timeline. Set the class on this outer div using jQuery and use css selectors to show the correct submenu items accordingly.
updated fiddle here
original answer:
Here's a quick and dirty way to do it:
$('.main-section').on('click',function(){
$('.main-section').removeClass('active-tour');
$(this).addClass('active-tour');
});
.current-section{
display:none;
}
li.active-tour .current-section{
display:block;
}
fiddle here
I have a list (.mainMenu) with a nested list (.subMenu) that I want to dropdown on click. Basically I want the nested list to slide toggle down to reveal it on click but I'm having trouble as i need the nested list to sit below the main list.
I wondered if there is anyway of achieving this without applying position: absolute; to the .subMenu. The reason position:absolute is not suitable for me is I need everything below .mainMenu to be pushed up/down when the menu is opened/closed.
Heres my Demo of what I have so far. Heres a website that has what I'm trying to achieve (click Men in main menu to see function).
HTML
<ul class="mainMenu">
<li>Link</li>
<li>Main +
<ul class="subMenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<div class-"main-content">
All content below the menu that needs to move up down as and when subMenu is opened/closed.
</div>
JS:
$('.mainMenu').children('li').on('click', function() {
$(this).children('ul').slideToggle('slow');
});
Hopefully I'm being clear if anyone knows of any tutorials or can point me in the right direction I would really appreciate it I'm finding it hard to find any help online.
Considering your level of CSS and as sugested on the comments it would be easier for you to use any library with the widget you need, as jQueryUI or maybe Bootstrap.
Anyway, if you want to follow just as you were doing here you have an updated fiddler to achieve what you want:
http://jsfiddle.net/2ezsP/130/
This is the code:
<ul class="mainMenu">
<li>Link</li>
<li id="option1">Main +</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul id="subMenu1">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
<div class-"main-content">
All content below the menu that needs to move up down as and when subMenu is opened/closed.
</div>
ul.mainMenu {
list-style: none;
width: 100%;
background-color: grey;
}
li {
display:inline-block;
cursor:pointer;
}
#subMenu1 {
display: none;
}
$('#option1').on('click', function() {
$('#subMenu1').slideToggle('slow');
});
Why don't you solve it like the example page you showed? Instead of placing the submenu inside the mainmenu just place the submenu as an isolated element below the mainmenu.
You can see here how I tried to solve it.
HTML
<ul class="mainMenu">
<li>Link</li>
<li>Main +</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="subMenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
<div class-"main-content">All content below the menu that needs to move up down as and when subMenu is opened/closed.</div>
JS
$(".subLink").click(function(){
$(this).text() === "Main +" ? $(this).text("Main -") : $(this).text("Main +");
$(".subMenu").slideToggle("slow");
});
Can someone please point me to where I can go to find info on how to create a mobile menu (drop list) for the code bellow? All the tutorials that I have found has been on switching pages, nothing for filters such as bellow. I am using the isotop plugin to navigate through my site.
<!-- SMOOTH MENU DIV -->
<div id="nav-button"> </div>
<nav id="smooth-menu" role="navigation" class="main-nav-links responsive-nav">
<ul id="filters" data-option-key="filter">
<li>Home</li>
<li>About Danielle</li>
<li id="one">My Work
<ul class="second-level">
<li>Kids and Family</li>
<li>Babies</li>
<li class="last">Seniors</li>
</ul>
</li>
<li id="two">Info
<ul class="second-level">
<li>Session Fees</li>
<li>Finished Art</li>
<li class="last">About Your Session</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- end nav -->
I ended up using an alternative solution. I went with a different menu.
First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.
So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.
Code:
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="ull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
});
</script>
All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;
The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.
I can't explain the problem easily so i setup a jsfiddle which will help you understand.
Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.
Thanks in advance.
Id must be unique.
<li id="li">Test
<li id="li">Test 2A
Change to different id's or use a class
Corrected Fiddle
And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.
In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="lull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
$("#lull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
$("#lull").slideUp(400).hide(100);
});
</script>
Is it possible to attach html tag to others using Javascript?
<li> to other <li> ?
For instance, I'm creating dropdown menu.
I have div separate from the <ul> tag
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
When I click, say, a link, then I want sub menu to show up under menu1 so result would be like:
<ul>
<li>menu1</li>
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
</ul>
The reason why I choose <div> to be separated from beginning instead of nested in <li> tag is that if I set the <div> "hide", it hides but it occupies the space and created big space between menu1 and any content below, so my page looks weird like:
mypage
----------------------------
| menu1
|
| <------ big open space div is hiding
|
|
| hello content start here
EDIT
Thanks for the tip guys, I've solved the problem with removing div and have nested <ul> per suggestion. The elements are still being shifted when submenu shows up but used CSS position:absolute and specifying z-index helped.
This is invalid HTML. A li should be contained in either a ol or a ul element. Change
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
to
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
For your main problem, there is no need to put the div (or ideally ul) outside the main ul. When you hide an element by setting its visibility to hidden, it will still take up the empty space. To complete hide it and remove any space it was taking, set the display CSS property to none.
document.getElementById('submenu1').style.display = 'none';
Usually you put the submenu in another <ul> inside an <li> in your main menu (so that you get valid HTML), and hide it with display: none CSS property and show it on click.
<ul>
<li>menu item 1<ul class="submenu">
<li>sub 1</li>
</ul></li>
<li><a hrf="menu2">menu item 2</a></li>
</u>
Then in your CSS (or added using js):
ul.submenu {
display: none;
}
a:hover + ul.submenu, ul.submenu:hover {
display: block;
}
This one will work on modern browsers without any js! But you can do it with js too, of course.
This is usually done via CSS. You have the entire menu pre-created (note that nesting <div> within <ul> is invalid HTML):
<ul class="menu">
<li>menu1
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
and then you declare in CSS:
ul.submenu {
display: none;
}
Now you can remove or add the "submenu" CSS class from the <ul> through JavaScript, or you set the .style.display property.
Or even more elegantly (but less cross-browser compatible, if you still care for old browsers), entirely without JavaScript through pure CSS:
ul.menu > li:hover ul.submenu {
display: block;
}
ul.submenu:hover {
display: block;
}
If you use display: none in your CSS then the hidden element doesn't need any space:
HTML:
<ul>
<li>menu1
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li class="active">menu2
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
</ul>
CSS:
li ul {
display: none;
}
li.active {
display: block;
}
<ul>
<li>menu1</li>
<div id="submenu1" style="display: none">
<li>sub1</li>
<li>sub2</li>
</div>
<li>menu2</li>
</ul>
Try it, this will make the div take up no space. if you use visiblity: hidden then it will take up space.