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>
Related
I need some help.
I have a site (for example site1.ru) with a left menu.
Left menu has a set of hyperlinks: page1.htm, page2.htm etc. Links can be located within group of links.
<ul class="left_menu1">
<li>Group of links 1
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
<li>Group of links 2
...
</li>
...
<li>just a link 1</li>
<li>just a link 2</li>
</ul>
Group of links 1 is only open, when I locate on page1.htm page2.htm or page3.htm (and link must be bold).
When I locate on another webpage of site1.ru, Group of links 1 must be close (?minimized).
How can I do this ?
PS: sorry, It's a little bit complicated for me to write it in english, but I think you understand what I want.
Thanks in advance.
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 trying to have a simple dropdown with product listings which will filter the products on click, so the dropdown is Onclick.
Issue -
I have multiple products in a category, i'm trying to have a dropdown which will collapse other products which are not used on click.
The current script i have collapses everything and opens it up again and not able to attach a class to it to show downarrow when opened.
It is way too buggy is there any other way to achieve this or a tutorial / script or something.
Here is the jsfiddle.
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
i dont have specific solution for your problem,
but still you can take a look at this Select2 jquery plugin, you can have many facilities like searching and displaying image, just check this link Select2 - DropDown
hope this will help you...
please look below link
http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/
You can check demo over there for multilevel dropdown menu.
Changed a little bit of code(html and script) from your jsfiddle see if that is what you are looking for
http://jsfiddle.net/nextg_tech/4N3wA/
script
$('.topnav li a').click(function(){
if($(this).parent().children().is('ul'))
{
$(this).parent().find('ul').slideToggle();
}
else
{
if($(this).parent().parent().is('ul.topnav'))
{
$('.topnav').find('ul').slideUp();
}
else
{
$('.topnav').find('ul').slideUp();
$(this).parent().parent().slideDown('slow');
}
}
});
html
<div class="container">
<ul class="productfilters topnav">
<li>All</li>
<li class="hasarrow">
Product 1
<ul class="ddone">
<li class="hasarrow">Sub Product 1
<ul class="ddone">
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
<li>Sub 2 Product 1</li>
</ul>
</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li>
</ul>
</li>
<li class="hasarrow">Product 2
<ul class="ddone">
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
<li>Sub Product of 2</li>
</ul>
</li>
</ul>
</div>
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.
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)?