We Keep Coding

Creating a Dynamic Link Dropdown Menu

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>

Handling 'a' tag with a hover effect on moble devices

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>

displaying category and subcategories in one drop down select

I'm trying to create a select like this(it is a drop down select input) :
as you can see when the select opens it display main categories which by clicking on each category the sub categories will be shown . also you can click on the tick to choose the current category and sub category.
Also , when sub categories of a category is being displayed , there is two item at the top. one is the tick and the other one is back which by clicking on it , you could see the main categories again.
How can create selects like that?
Thanks in advance

this is the html part that you can use to have a menu and sub-menu.
<body class="no-js">
<nav id="topNav">
<ul>
<li>Nav Link 1</li>
<li>
Nav Link 2
<ul>
<li>Sub Nav Link 1</li>
<li>Sub Nav Link 2</li>
<li>Sub Nav Link 3</li>
<li>Sub Nav Link 4</li>
<li class="last">Sub Nav Link 5</li>
</ul>
</li>
<li>Nav Link 3</li>
<li>Nav Link 4</li>
<li>Nav Link 5</li>
</ul>
</nav>
</body>

I'm looking for some JQuery to run a fairly elaborate drop-down selection/go function

I have a drop-down menu made up of unordered lists containing several options. Upon selection of an option, I want this option to populate the head selection box (li class="first") replacing the "I am a..." text. Then the "Go" button can be pressed to open the href for that specific option. Here is the html:
<div class="dropNavOne" class="gradient">
<ul>
<li class="first">I am a...
<ul class="menu_body1">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li class="last">Option 10</li>
</ul>
</li>
</ul>
</div>
<div class="goButtonOne" class="gradient">Go</div>
If this is at all possible please let me know...thanks!

Here's a few pointers that you'll find useful in writing this. There may be plugins that directly fit your requirements, but on the other hand it sounds simple enough that you could do this yourself.
Use classes for hidden and revealed elements in your unordered list
Set up a DOM ready handler to add event handlers to your page
Attach a click event to show your menu (probably by class, so you can show many items in one go)
Attach a click event to hide your menu
Use an html injection method to modify the inner HTML of an element
You can certainly use jQuery for this. It's lovely to work with, and writing something like this would be a good first exercise.

List doesn't want to toggle

I have a (semantically incorrect) HTML like this:
<ul>
<li class="year">2009</li>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
<ul>
<li class="year">2008</li>
<li>Project 4</li>
<li>Project 5</li>
<li>Project 6</li>
</ul>
<ul>
<li class="year">2007</li>
<li>Project 7</li>
<li>Project 8</li>
<li>Project 9</li>
</ul>
and a jQuery script like this:
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year)').toggle('fast');
})
})
It works almost as needed. By default all ul li-s are hidden except those having the class year. When the user clicks on a year, any opened year's links slide up and the clicked year's links slide down. The problem is that if I click on a year when it's opened it first slides up (being intercepted by the first line) and then slides down via the toggle line. I'd like it to stay closed with the slide up line not intercepting the currently clicked year.
Hope this makes sense.
Any help appreciated.

May be you should use the :hidden or :visible selector to distinguish which are already shown.
$(function() {
$('.year').click(function() {
$('ul').find('li:not(.year)').slideUp('fast');
$(this).closest('ul').find('li:not(.year):hidden').toggle('fast');
})
})

In therms of the :not is it not true that you can only use filter as opposed to find expressions in here e.g. :not(:blah) or :not([blah] but not :not(.blah)?