JavaScript CSS - Menu - javascript

Hello I need help with my menu if it shows more than 10 on dropdown menu in my exaple below.I want that when I click on ... button (see in example) show the other six languages. I am not good at javascript. Here is the example of the menu where ... is I want on click to show the other Language.
HTML code
<li>
<div class="buttonbg gradient_button">Language</div>
<ul class="gradient_menu">
<li class="gradient_menuitem first">Arabic</li>
<li class="gradient_menuitem">Brazilian</li>
<li class="gradient_menuitem">Dutch</li>
<li class="gradient_menuitem">English</li>
<li class="gradient_menuitem">French</li>
<li class="gradient_menuitem">German</li>
<li class="gradient_menuitem">Greek</li>
<li class="gradient_menuitem">Indonesian</li>
<li class="gradient_menuitem">Malay</li>
<li class="gradient_menuitem">...</li>
<li class="gradient_menuitem">Romanian</li>
<li class="gradient_menuitem">Spanish</li>
<li class="gradient_menuitem">Swedish</li>
<li class="gradient_menuitem">Thai</li>
<li class="gradient_menuitem">Turkish</li>
<li class="gradient_menuitem last">Vietnamese</li>
</ul>
</li>
Example url with css
http://jsfiddle.net/6pxaE/10/
Or with javascript example and all menu show the example that's I want to be the ...
http://myseacheck.besaba.com/ScrollDown.htm

Try this js:
$(".gradient_menuitem:gt(9)").css("display","none");
$(".gradient_menuitem:eq(9)").click ( function (e) {
e.preventDefault();
$(".gradient_menuitem:gt(9)").css("display","block");
});
/* update */
$("#mbmcpebul_table").hover( function () {
$(".gradient_menuitem:gt(9)").css("display","none");
});
Updated DEMO

$(".gradient_menuitem:gt(9)").css("display","none");
$(".gradient_menuitem:eq(9)").click ( function (e) {
e.preventDefault();
$(".gradient_menuitem:gt(9)").css("display","block");
$(".gradient_menuitem:eq(9)").hide();
});
$(".gradient_menu").mouseleave(function(){
$(".gradient_menuitem:gt(9)").hide();
$(".gradient_menuitem:eq(9)").show();
});
Use this jQuery, it works fine for me.
Here is a Fiddle DEMO

Related

HTML JS - sub menu is not working?

I'm trying to achieve this. But I could not succeed so far. My code is given below. What is wrong with it?
html:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger" id="bt-icon icon-gplus" ><br><span>Menu
<ul >
<li style="text-align:center;"><span>DashBoard</span></li>
<li style="text-align:center;"><span>User </span></li>
<li style="text-align:center;"><span>Candidates</span></li>
<li style="text-align:center;"><span>Partylist</span></li>
<li style="text-align:center;"><span>Position</span></li>
<li style="text-align:center;"><span>Program</span></li>
<li style="text-align:center;"><span>Department</span></li>
<li style="text-align:center;"class="active"><span>School-Year</span></li>
<li style="text-align:center;"><span>Reports</span></li>
<li style="text-align:center;"><span>Logs</span>
<ul class="sub-menu" style="text-align:right">
<li>Submenu</li>
</ul></li>
</ul>
</nav>
Javascript:
<script type="text/javascript">
$('li a').click(
function() {
$(this).next().slideToggle();
})
</script>
Firstly correct your markup ,some tags are not properly closed.
Second, you need to use preventDefault() to disable the default action of the a tag.
Third,
$('li a').click(
function() {
$(this).next().slideToggle();
})
this code will toggle you menu only if next element is the menu itself.
so use this
$('li a').click(function(e) {
e.preventDefault();
$('a:contains(Submenu)').slideToggle();
});
https://jsfiddle.net/uc3hp4o5/

Collapsing nested lists in a hiearchy-structure with jQuery

I have a very annoying problem, which might be a product of my poor knowledge of javascript and jQuery.
I have a list that uses recursion to enable a hierarchy-structure, it looks as follows
$(function (){
$('#foo').click(function() {
$(this).children('ul').slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='foo'>A
<ul>
<li id='foo'>B
<ul>
<li>
Sub-sub
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to accomplish a collapse function, so that when the user clicks on 'A' all the children elements collapses, and if she clicks the 'B' node all of 'B's children collapses. But however I try I always end up having all of the lists with id = 'foo' collapsing.
In my eyes, $(this).children('ul').slideToggle(); will collapse the children, since $(this) points to the list element clicked...?
Been at this for far to long now, would love some help!
Here you go... No change in HTML. But like other suggested, you need to have unique ID's
$(function (){
$('li').click(function(event) {
event.stopPropagation();
$(event.target).children('ul').slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='foo'>A
<ul>
<li id='foo'>B
<ul>
<li>
Sub-sub
</li>
</ul>
</li>
</ul>
</li>
</ul>

JQuery - Make .slideToggle specific to each list

I have a .slideToggle making a list dropdown, but unfortunately it makes all lists dropdown, I need to make it only dropdown the list below the a that I'm clicking on. Sure this is a simple issue, still pretty new to jquery.
Jsfiddle: http://jsfiddle.net/darcyvoutt/shErA/
The following finds the next ul element and runs slideToggle() on it.
$(document).ready(function () {
$('.nav-filters-list-item a').click(function () {
$(this).next('ul').slideToggle(70);
});
});
See this jsFiddle
Try adding an id for each dropdown like this:
<ul class="nav-filters-list">
<li class="nav-filters-list-item" id="genre">Genre
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item" id="tags">Tags
<ul>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
<li>Sub-Home
</li>
</ul>
</li>
<li class="nav-filters-list-item">Date
</li>
<li class="nav-filters-list-item">Order
</li>
</ul>
Javascript:
$(document).ready(function () {
$('#genre a').click(function () {
$('#genre ul').slideToggle(70);
});
$('#tags a').click(function () {
$('#tags ul').slideToggle(70);
});
});

open the first section when page loads

HTML:
<li class="page_item ">
A
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
</ul>
</li>
<li class="page_item ">
B
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
<li class="page_item ">
C
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
JS:
$('.page_item').click(function() {
var that = this;
$('.page_item').each(function() {
if (that == this) return true; //continue
$('.children:not(:hidden)', this).slideToggle();
});
$('ul.children', this).slideToggle();
});
Online demo: http://jsfiddle.net/kHLuR/1/
How can I make the first section li opened by default?
Variant #1 Pure CSS solution:
.page_item:first-child .children {
display: block;
}
Demo: http://jsfiddle.net/dfsq/kHLuR/7/
Note: :first-child works in IE8+. If you need to support older version you can give another class to your first li, e.g: <li class="page_item page_item-first"> http://jsfiddle.net/dfsq/kHLuR/9/
Variant #2. Trigger click event on the first .page_item:
$('.page_item').click(function () {
// ...
})
.filter(':first').click();
Demo: http://jsfiddle.net/dfsq/kHLuR/8/
Add this code to simulate a click event when the page is loaded: LIVE DEMO
$(document).ready(function () {
$('a').eq(0).trigger('click');
});
You can use jQuery's .ready() to execute code immediately after the page loads.
Take a look at http://api.jquery.com/ready/

active class javascript

I have used the following code to display menu
<ul id="menu">
<li id="11">Start a League<span></span></li>
<li id="12">Roster Settings<span></span></li>
<li id="13">Draft Settings<span></span></li>
<li id="14">Transaction Settings<span></span></li>
<li id="15">Playoff Settings<span></span></li>
<li id="16">Launch Your League!<span></span></li>
</ul>
If I click any menu the class active should be added in that particular li. How can i do it with javascript.
Using jQuery:
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});
I supposed that you only wanted a single <li> with the active class.
Demo: http://jsfiddle.net/j9qTE/1/

Categories

Resources