I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.
When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.
What I want to accomplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.
HTML
<!-- original code -->
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- my code -->
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
JS
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
// rename the JS to use the id/class for my script
The JSfiddle is here https://jsfiddle.net/cRsZE/982/
You have to update the click event in your jQuery to work for clicking the menu icon. This works:
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
Edit As requested via the comments, to have the menu appear below the menu icon all you have to do is reposition the menu icon to be above the ul like so:
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
And working Fiddle
Need To update Code Like That :
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
For Documentation :https://jqueryui.com/menu/
Cleaned up code a little. Like this?
https://jsfiddle.net/cshanno/cRsZE/990/
$(document).ready(function () {
$('#menu-icon').click(function () {
$('.sub-nav').toggleClass('visible');
});
});
Related
I have a "dot" navigation on a site that has one link with a submenu. Originally, I had a simple JQ function that would slideToggle() the submenu on hover but that was causing some 'bouncing' issues. So, I reverted it back to click() function.
$("#troy-dot-nav li.menu-item-81 > a").click(function(e){
e.preventDefault();
$(this).siblings('.sub-menu').slideToggle('800');
});
In doing so, I need to add the preventDefault() so the submenu would open up on click, but disable the link.
Turns out, I need to keep the link on that active to navigate to that top-level page, but can't seem to figure out the best way to go about allowing the submenu to open (on click or hover; without bouncing) and keep the menu link active.
HTML for Menu
<div class="menu-primary-container">
<ul id="troy-dot-nav" class="menu reverse-dots">
<li class="...">About</li>
<li class="... menu-item-81">
Integrated Services
<ul class="sub-menu" style="display: none;">
<li class="...">EPC & Project Services</li>
<li class="...">Pipeline Construction</li>
<li class="...">Facility Construction</li>
<li class="...">Integrity Management</li>
</ul>
</li>
<li class="...">Safety & Quality</li>
<li class="...">Careers</li>
<li class="...">Contact Us</li>
</ul>
</div>
The CSS creates the dots on the li:after. Removed extra HTML for cleaner look here.
can't you just use css to add/remove an active class and also close all / open related submenu ?
Like so :
$(document).ready(function() {
$('.link').click(function() {
// Remove the "active" class from all links
$('.link').removeClass('active');
// Add the "active" class to the clicked link
$(this).addClass('active');
// Find the corresponding sublist
var sublistId = $(this).data('sublist');
var sublist = $('#' + sublistId);
// Close all sublists
$('.sublist').hide();
// Open the corresponding sublist
sublist.show();
});
});
with that kind of html :
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<ul id="sublist-1" class="sublist">
<li>Sublist item 1</li>
<li>Sublist item 2</li>
</ul>
<ul id="sublist-2" class="sublist">
<li>Sublist item 3</li>
<li>Sublist item 4</li>
</ul>
<ul id="sublist-3" class="sublist">
<li>Sublist item 5</li>
<li>Sublist item 6</li>
</ul>
I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>
I have this page where I have a menu (using Pure) and I have some links taht when clicked run a javascript to change a picture on the page. For some reason, when the code is inside the Pure menu, it does not run. When it is outside the menu it runs without a problem.
Any ideas why this is happening or any tips for a more elegant solution?
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<script>
YUI({
classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {
var horizontalMenu = new Y.Menu({
container : '#demo-horizontal-menu',
sourceNode : '#std-menu-items',
orientation : 'horizontal',
hideOnOutsideClick: false,
hideOnClick : false
});
horizontalMenu.render();
horizontalMenu.show();
});
</script>
<script>
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";
obj.innerHTML = imgTag;
return;
}
</script>
</head>
<body>
<div id="demo-horizontal-menu">
Site Title
<ul id="std-menu-items">
<li>
Menu (Not Working)
<ul>
<li>Dashboard 1</li>
<li>Dashboard 2</li>
<li>Dashboard 3</li>
</ul>
</li>
</ul>
</div>
<div id="image-dash">
<img src="1.jpg" border="0">
</div>
<p>These links here will work for some reason..</p>
<ul>
<li>Dashboard 1</li>
<li>Dashboard 2</li>
<li>Dashboard 3</li>
</ul>
</body>
</html>
I think that your problem is related to how the YUI Menu widget is created. If you take a look at the rendered code, you can see that your anchor tags don't have the onclick attribute anymore:
original syntax (has onclick)
<li>Dashboard 1</li>
rendered yui menu item (doesn't have onclick)
<li id="menuItem-yui_3_17_2_1_1402336941070_76" class="pure-menu-item" aria-hidden="false" aria-labelledby="yui_3_17_2_1_1402336941070_87" role="menuitem">
Dashboard 1
</li>
That being said, you have some choices:
dive into the YUI API to find a way to add attributes to your menu items (recommended)
use the href to execute your javascript function:
Dashboard 1</li>
I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html
it should work too-
$("#1").css("display","block");
$("#1").click("show");
should be:
$("#1").show();
Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle
as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}
I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/