I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.
I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.
I am very new to javascript. Please help me to solve my problem.
Here is my html code
<nav class="navigation">
<ul>
<li> HOME
</li>
<li> <span>WHO WE ARE </span>
<i class="ion-ios-plus-empty visible-xs"></i>
<ul class="sub-nav">
<li>
Vision
</li>
</ul>
</li>
</ul>
</nav>
and hrere is my js
$('.sub-menu >a').on('click', function() {
if ($(window).width() <= 767) {
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
}
});
please help
Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():
document.getElementById("myspeciallink").addEventListener("click", function(e) {
alert("A different action!");
e.preventDefault(); //return false / stopPropagation could've also worked here
});
I'm a link!
Regarding your code:
You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:
$(".sub-menu > a").click(() => alert("Clicked"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
<li>
Example A
</li>
</ul>
<br/>
<ul class="sub-menu">
Example B (Which is what you did but not what you want)
</ul>
Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.
I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.
See also:
What's the difference between event.stopPropagation and event.preventDefault?
Couple of things here.
First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.
But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.
Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...
Lastly, this code
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.
Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.
Related
I'm not a programmer. I can read and understand some code, and I can google for answers. But this one escapes me. I built a test page to try my hand at coding for mobile devices - http://www.stovebolt.com/testing2.html
At 800 pixels, the navigation stack on the left is hidden and replaced with a dropdown menu that uses a list structure with a hover function. This will work on mobile devices if the href for the parent li is #. However, you have to reload the page to get it to close the menu.
So I cast about for a solution and came across this: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
I'm using his DoubleTapToGo javascript, and it works, but it applies to all the elements not just the parent li. According to his page you just need to use the following to only have the parent require a double tap:
$( '#nav li:has(ul)' ).doubleTapToGo();
I'm not using the id #nav. I'm using the class .mobile, so I replaced #nav with .moblie. But you have to double tap ALL the links, not just the dropdown.
I've tried negating the function, but that didn't work. I tried changing to li:hasClass() and created a new class for that one li. Didn't work. How can I get the doubleclick to only work on the parent li? The code li:has(ul) should work, because there's only one sublist. But it doesn't.
I can't help but think I'm missing something very simple. Here's the code on my page, which I copied directly from the source of his webpage:
<script>
$( function()
{
$( '.mobile li:hasClass('mobileParent')').DoubleTapToGo();
});
This is the html for the mobile list:
<div class="mobile" role="navigation">
<ul>
<li>Around the 'Bolt...
<ul>
<li>Home</li>
<li>Search</li>
<li>Discussion Forums</li>
<li>Gallery</li>
<li>Tech Tips</li>
<li>Links</li>
<li>Events</li>
<li>Swap Meet</li>
<li>FAQs</li>
<li>Features</li>
<li>Stovebolt Hoo-ya</li>
<li>Stovebolt Office</li>
</ul>
</li>
</ul>
</div>
Please try this
$( function()
{
$( '.mobile li.mobileParent').DoubleTapToGo();
});
But in you html there is no li with the class mobileParent. So $( '.mobile li.mobileParent').DoubleTapToGo(); wont work. Add that calss and then use this code.
This is how I solved the problem. I ripped out all the double-click stuff (since it was giving me errors), changed the link in the primary LI to "#" and added another LI to the dropdown menu to close it:
<li>Around the 'Bolt...
<ul>
<li>Close this Menu</li>
That just left one problem. Apparently Apple tries to emulate the hover event, so it requires a double click on dropdown menu items. So I added this script to over come that: http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices
I want to have the list item with the id "#greenHome" slide in when the list item with the id "#home" is being hovered over. It is not working for me and I can't figure out why.
HTML:
<ul id="nav_animations">
<li id="greenHome"></li>
</ul>
<ul id="navlist">
<li id="home">Home</li>
</ul>
JavaScript:
$('#home').hover(function(){
('#greenHome').slideToggle('slow');
});
CSS:
#greenHome {
display:none;
}
https://jsfiddle.net/JoshuaHurlburt/etehjeaq/
PS: This is not my full code, I can post it though if need be.
First of all, you have missed the jQuery function name $ from your call to slideToggle. It's correctly like this:
$('#greenHome').slideToggle('slow');
Also, you have completely messed up the jsFiddle, I've corrected it and at the link below you can see the updated, working sample. In the fiddle you shouldn't use <head> tag, and you should select inclusion of jQuery at the left settings panel.
Also, I've changed the order of your lists for demo purposes, because hover event was firing multiple times when the hovered item was pushed down by the toggling element above it.
And finally as others have pointed out in the comments, I filled the text "Green home" to the corresponding <li> because if it remained empty you of course wouldn't see any effect.
Working Demo
I'm looking to understand how to code drop down navigation bar similar to the reference site included below. Their solution works perfectly between pc/mac/iphone and android and it would be awesome if someone can show me the same. If you are looking at this site via your pc or mac adjust the size of the browser to activate the drop down version of the navigation. Thanks alot!
http://treadsack.com/
p.s Im new to asking these questions online so if you need me to be more specific please comment and I will comment back.
Thanks again!
Just use bootstrap, http://getbootstrap.com Its allready cross browser compliant, and uses that type of menu
There are a number of ways to show the dropdown like that, assuming that's what you're asking. In this case, observe what they've done using the browser's tools.
In Chrome:
Minimize the browser, so you can see the dropdown style of the page.
Click on the "NAV" link to see the dropdown menu.
Right-click on any of those menu items, and click Inspect Element.
You'll see the Developer Tools open up below, showing the HTML. You'll notice that the element that you wanted to inspect, is a <a> inside <li> inside <ul> inside a <div> of class dropdown
4.1 When the Nav is closed, this div is as below:
<div class="dropdown" id="nav-dropdown" style="display: none;">
<!-- bunch of ul, li elements follow here -->
</div>
Now click on the Nav link, and observe the change in HTML of that div alone. You'll notice it as below:
<div class="dropdown" id="nav-dropdown" style="display: block;">
<!-- bunch of ul, li elements follow here -->
</div>
They just changed the display property of the div, from none to block materializing all those menu items.
And that can be done using jquery as below:
$( "#nav-trigger" ).click(function() {
$('#dropdown').css("display", "block");
});
nav-trigger is the id of the NAV element.
Update:
The HTML is structured like this:
<div class="main-container">
<span class="navigation" id="nav-trigger"/>
<div class="dropdown" display="none">
<!-- menu items as <ul><li> here -->
</div>
</div>
That's the main structure (names changed). Initially, only the <span> element is visible. When this span element is clicked, the div below it is displayed. So we associate a click handler to the span element in jQuery, as I've shown above. That's how they are "connected"
The animation:
Again, there are a lot of ways to do that. There are jQuery plugins that you can directly use in your project (easiest). Alternatively, you can use jQuery.slideDown() and jQuery.slideUp() to toggle the menu items down or up. Links: slideUp() and slideDown()
You'll notice that there is a sequence to the animation. Not all menu items are dropped down at once.
$( "#nav-trigger" ).click(function() {
var menuitems = $("#dropdown").children(); //since the items are hierarchically , children of the dropdown div.
for(var i=0; i<6; i++){
menuitems.eq(i).slideDown(200); //200 is the speed.
}
});
That's a very crude code, but it gives you the picture. Hope that helps.
Basically, You can make sites mobile friendly by using percentages instead of set widths and heights... Typically developers will make separate styling sheets depending on device resolution... so at different resolutions content will scale accordingly.
see this example
This way you can control different styling so it displays correctly
I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <ul> which is hidden but should show up if the notification item is clicked.
I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.
The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.
// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>
// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
<li class="event_new">[..]</li>
<li class="event_new">[..]</li>
</ul>
I also initialize the dropdown() when i append set the data-toggle attribute. Like this:
$notifications.addAttr('data.toggle', 'notifications-alert')
.dropdown();
I also tried with a manual trigger but still doesent work.
$notifications.addAttr('data.toggle', 'notifications-alert')
.click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
.dropdown();
Any ideas why it is not working?
#EDIT: my mistake, solved. See my answer for details.
All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)
I am currently using anchor tags and have implemented smooth scrolling on 5 links. This currently works perfectly. However, I would now like to add the ability to use the arrow keys to navigate through these same anchor tags.
I can only fumble through javascript and jquery, so I'm pretty confused when it comes to that stuff.
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
So basically, I want a user to hit the down arrow and them to be taken to the next section, depending on where they are on the page. If they are on section 2, take them to three. If they hit up again, they would be taken back to two and so forth. Make sense?
Checkout Mousetrap. It's a nifty little library that makes binding keys pretty easy. There are a few good examples on the site as well.
Perhaps something like this would suffice:
Mousetrap.bind('up', function() {
your_up_function();
});
Mousetrap.bind('down', function() {
your_down_function();
});