I have a Nav bar that I created and it is 1 image with multiple image maps... is it possible to make sub menus from the image maps in the image/Nav Bar?
Instead of an image map, you should use a hidden unordered list for the sub menu (and show it with javascript when appropriate)
something like:
Menu Item
<ul class="submenu" style="display: none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JS:
$("#menuitem1").click(function() {
$(this).next().show();
});
try having a look at jQuery you might be able to attach a click event to an areas id which activates a hidden div with the sub menu items. www.jquery.com
Related
I am fairly new to java script.
I would like to know how to make a drop down menu in which it will have links as element, but it will change according to what the user inputs.
I am working on a calendar, in which each day there is a different event, and a different link to sign up for that event. My goal is to create a drop down menu that will give the links to sign up for the several events happening on that day. So it will change its content according to which day the user selects. So far, I only see how to create drop down menus with already set links, but I want to have the drop down menu to be able to change the links in the elements, according to what the user chooses.
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
</ul></li>
<li>Menu 4</li>
</ul>
Here's a simple example of how to change links in javascript:
<ul>
<li>Menu 1</li>
</ul>
<script>
document.getElementById("link1").setAttribute("href", "https://www.google.com/");
document.getElementById("link1").innerText = "My New Link"
</script>
I can't imagine anyone will be able to crack this but any help or a point in a right direction will be great.
I have a standard menu that has x number of links and those links on hover will open a sub menu. the Main links on click however are accessable pages.
<ul id="mainNavigation">
<li>
Main 1
<ul class="submenu">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>
Main 2
<ul class="submenu">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
On a landscape tablet the desktop menu shows but obviously the hover effect will not work. The real problem here is that I want the Main links to have a click to open the submenu and a second click on the Main to go to the href it has attached to it (Only on devices).
Basically the desktop:
Main links on hover open submenu
Main links on click will open a page
Tablets
Main links open submenu on first click
Main links will open a page on second click
I'm guessing maybe some media queries to target the ipad and make a custom menu, or maybe someone can suggest a jquery alternative.
Thanks
I wrote something for you doing what you ask...
But to hide an opened sub-menu... I'm not sure.
lol! How would you like it to return to hidden state?
I tought of a setTimeout for the moment.
This is the code so far:
CodePen
NOTE To try on mobile and make it not execute on desktop, remove the ! where it is said to reverse the logic.
$(document).ready(function(){
// Easy way to determine if the script executes on mobile.
var isMobile=false;
$(document).on("touchstart",function(){
isMobile=true;
});
// Main links handler
$(".mainLink").on("click",function(e){
if(!isMobile){ // REVERSE THIS LOGIC TO TRY ON MOBILE
e.preventDefault();
if( $(this).siblings("ul").find("li").is(":visible") ){
console.log("sub is visible, open link!");
window.location.assign( $(this).attr("href") );
}else{
console.log("sub is NOT visible, show sub-menu.");
$(this).siblings("ul").show();
setTimeout(function(){
$(".submenu").hide();
},1500); // 1,5 seconds to hide the sub-menu.
}
}
});
// Main links handler - Just to stop event propagation.
$(".subLink").on("click",function(e){
if(!isMobile){ // REVERSE THIS LOGIC TO TRY ON MOBILE
e.stopImmediatePropagation();
console.log("SUB clicked, open link!");
}
});
});
#mainNavigation li ul{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainNavigation">
<li>
Main 1
<ul class="submenu">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>
Main 2
<ul class="submenu">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
I have a nav element which is something like this:
<ul>
<li name='first_item'>
<ul>
<li>item 1</li>
<ul>
<li>item 1.1</li>
<li>item 1.2</li>
</ul>
<li>item 2</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
and the code that handles the the sliding down and up is:(nav is a html element which is a parent of above)
nav.find("li").each(
if ($(this).find("ul").length > 0) {
_callback = false;
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
what happens is when I hover over the first_item it opens the sub menus and after it's finished sliding down them, it will open item 1's sub menus as well. I'm totally lost over this. Any help would be appreciated.
First of all, it seems you copyied the jquery without the function, so that isnt the problem:
nav.find("li").each(function(){
I think the problem is, that you travel to deep, so try this:
$(this).find(">ul")
or this:
$(this).children("ul")
From jQuery:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
So I would like to build a unsorted list and and another unsorted list within it so there is a basic menu functionality.
I basically need to know how to have Jquery access the elements so when a main level item is clicked, its children show.
So for example:
<ul class="category-links">
<li>
<span>Category 1</span>
<ul class="sub-category-links">
<li>Sub-category 1</li>
<li>Sub-category 2</li>
<li>Sub-category 3</li>
</ul>
</li>
</ul>
I might have several of these. Essentially I set the subcategories to display:none and I want Jquery to allow for when I click on the "category-links", only its children are displayed.
Thanks!
You can do something like this:
$('.category-links li').click(function(){
$(this).find('.sub-category-links').show();
});
Too long too read.
This is the core of my Gallery script. This looks more complicated then it really is.. but of my lack of JQuery (Javascript) knowledge im not able to program it on my own. The most javascript is only pseudo so it where nice if you could translate the pseudo javascript into actually valid javascript (Jquery).
I have a Gallery which shows a big image. I have a thumbnails list which contains some thumb images the user can click on to navigate between the Gallery Images. I have an information pool. Its a list which contains all big images for the Gallery. The Gallery gets its information from this information pool. - I use an invisible pool during some animation issues.
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
</ul>
</div>
<div id="thumbs">
<ul>
<li>Thumb 1</li> <--! This list contains thumbnails for the gallery-->
<li>Thumb 2</li>
<li>Thumb 3</li>
<li>Thumb 4</li>
</ul>
</div>
<div style="display:hidden;" id="pool"> <-- its invisible for the human eyes -->
<ul> <--! This list is the information pool which stores the big pictures of the gallery-->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Pseudo (JQuery) Javascript
$('#thumbs ul > li).click( function() {
$(this).add the next li from the pool to this list //this snippet is important for me - how do I write this?
});
User Interaction e.g.
This is the workflow how it should work - im open for every good idea to get the result
User clicks thumbnail number 3
Script gets Item 3 from the #pool
and attract it to the #gallery (Javascript needed ^^)
Looks like this:
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li>
</ul>
</div>
Now we animate (we scroll 800px to Item 3)
$(#gallery ul).animate(right: -800);
HTML
<div id="gallery">
<ul>
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page-->
<li>Item 3</li> <--!The User will see this big picture now -->
</ul>
</div>
Javascript
$('#gallery ul li').erase the not see able < li> Item 1 </ li> from the list
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
User clicks thumb 2
Attract Item 2 from #pool to the gallery !but dont put it under Item 3 - no put it above Item 3, so we can scroll to the left instead of scrolling right
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--! This is putted above < li> Item 3 < /li> -->
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
Now we animate (we scroll 800px to Item 2)
$(#gallery ul).animate(right: 800);
User now only sees the image from Item 2
Javascript
$('#gallery ul li').erase the not see able < li> Item 3 </ li> from the list
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--!The User will see this big picture now and Item 3 is gone-->
</ul>
</div>
You should align your code properly.
There are a lot of jQuery plugins and tutorials on how to do this. Seriously, like, tons.