I am using Kendo menu in my project. I want to retrieve id value when I click on the selected item. I used onSelect event and I am able to retrieve the selected item Text. How can I retrieve the id value?
You can use HTML5 data atrributes to accomplish this.
HTML
<div id="example" class="k-content">
<ul id="menu">
<li>
First Item
<ul>
<li data-id="12345">Sub Item 1 with ID</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>
Second Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>
Third Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>
Fourth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>
Fifth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
</div>
And the Javascript:
<script>
$(document).ready(function() {
function onSelect(e) {
var id = $(e.item).attr('data-id');
}
$("#menu").kendoMenu({
select: onSelect
});
});
</script>
You can set an ID in the UL/LI structure from which you initialize it (check the Robotsushi's answer). However if you want to initialize the menu dynamically you can use something like this - http://jsfiddle.net/MMRCf/8/
Related
I have been trying to get this to work for a while with no success.
I have a multi-level navigation and I would like to align all child UL's with is main parent/grandparent UL.
right now the structure is something like this:
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 5
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 6
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 7
<span class="arrow arrow-down"></span>
</a>
</li>
<li class="has-children">
<a href="#">Menu 8
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu" value="hide/show">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</li>
<li>Page 4</li>
</ul>
so, I have it setup so the second submenu shows on hover, I was able to get the second-submenu size to its grandparent UL with this:
$('.first-menu').each(function(){
$(this).find('ul.second-submenu')
.css('min-height', $(this).outerHeight(true));
});
and its position is set to absolute, top: 0 , and left: 100%, display: inline-block ...
but I would like to align all the second-submenu uls with the grandparent ul up top.
right now I have:
But, I would like to get something like this:
Appreciate the help.
Here your main problem is the CSS part where the relative parent you are using to position the submenu, you don't need the JS part and you can get your result if you just avoid the relative be on the li and just ensure you have it on the main ul, check this snippet:
.first-menu {
position: relative;
height: 300px;
width: 150px;
background: orange;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
background: orange;
}
.has-children:hover>.submenu {
display: block;
}
li:hover {
background:green;
}
ul {
padding: 0;
list-style: none
}
li {
line-height: 30px;
padding: 5px;
background: tomato
}
a {
text-decoration: none;
color: white
}
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
</ul>
Note:
Here is a snippet with relative position on the li element so you can see how this works wrong like your actual screenshots:
.first-menu {
position: relative;
height: 300px;
width: 150px;
background: orange;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
background: orange;
}
.has-children:hover>.submenu {
display: block;
}
li:hover {
background: green;
}
ul {
padding: 0;
list-style: none
}
li {
position: relative;
line-height: 30px;
padding: 5px;
background: tomato
}
a {
text-decoration: none;
color: white
}
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
</ul>
In my html page, there is a list of all the categories. Each category has some subcategories. I want that as a list item is clicked, its subcategories are toggled i.e. if they are visible, they should be hidden and vice versa. Also at one time, only one list item should be able to show its subcategories. I have tried this answer, but it doesn't help. I won't mind in using either JS, JQuery etc or changing the syntax altogether.
My work till now is
<ul>
<li class="outer-list-element">
category 1
<ul class="inner-list" id="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
<li class ="outer-list-element">
category 3
<ul class="inner-list" id="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
css
li {
margin-bottom: 8px;
}
.inner-list {
margin-top: 10px;
display: none;
}
Script
$('.outer-list-element').click(function () {
$(this).children().toggle();
})
$(".outer-list").click(function() {
$(this).siblings('.inner-list').toggle();
return false;
});
Feel free to update this fiddle
https://jsfiddle.net/7vmtd2px/1/
Please try following code.
$('.outer-list').click(function () {
//Hide other ul
$('ul .inner-list').not($(this).parent('li').find('ul')).hide();
//Toggle clicked ul
$(this).parent('li').find('ul').toggle();
});
li {
margin-bottom: 8px;
}
.inner-list {
margin-top: 10px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="outer-list-element">
category 1
<ul class="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
<li class="outer-list-element">
category 2
<ul class="inner-list">
<li>sub category 1</li>
<li> sub category 2</li>
</ul>
</li>
<li class ="outer-list-element">
category 3
<ul class="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
</ul>
You can create a class(showInnerList in this case) with display:block property. So on click of element you can add this class to the DOM which you want to show.
Also I am using addClass & removeClass instead of toggle. The reason is on click of any DOM,I intend to find the element which has showInnerClass and remove this same class from it & then add this same class to the sibling
HTML
<ul class="myList">
<li class="outer-list-element">
category 1
<ul class="inner-list" id="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
<li class="outer-list-element">
category 2
<ul class="inner-list" id="inner-list_1">
<li>sub category 1</li>
<li> sub category 2</li>
</ul>
</li>
<li class="outer-list-element">
category 3
<ul class="inner-list" id="inner-list_2">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
</ul>
JS
$('.outer-list-element a').click(function() {
$('.myList').find('ul.showInnerList').removeClass('showInnerList');
$(this).next('ul.inner-list').addClass('showInnerList');
})
Also note that you are using same id for ul class="inner-list". id need to be unique
JSFIDDLE
try With this..
$(document).on('click', ".outer-list", function() {
$('.inner-list').hide(); //first hide all the element having class inner-list
//$(this).siblings('.inner-list').toggle();
$(this).next('ul').toggle(); // here is the trick
return false;
});
and HERE is the FIDDLE
Thanks Mohit
Here's the same thing as Sarath's answer, but with the additional functionality of automatically collapsing the present list if it's clicked twice.
<ul>
<li class="outer-list-element">
category 1
<ul class="inner-list" id="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
<li class="outer-list-element">
category 2
<ul class="inner-list" id="inner-list">
<li>sub category 1</li>
<li> sub category 2</li>
</ul>
</li>
<li class ="outer-list-element">
category 3
<ul class="inner-list" id="inner-list">
<li>sub category 1</li>
<li>sub category 2</li>
</ul>
</li>
</ul>
CSS:
li {
margin-bottom: 8px;
}
.inner-list {
margin-top: 10px;
display: none;
}
jQuery:
$(document).on('click', ".outer-list", function()
{
$(this).parents().siblings().children(".inner-list").hide();
$(this).siblings('.inner-list').toggle();
});
Here's the jsFiddle in case you want to see it in action.
I am trying to integrate the accordion feature to wordpress menu.
i came across with a code but it didn't give me the full expectation(not really a js guru).
here is the html code:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>Option 2 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 3</li>
<li>Option 4 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</aside>
<section class="main-section">
Content
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
and here is the jscript:
$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
var icon = $(this).parent().next(".off-canvas-submenu").is(':visible') ? '+' : '-';
$(this).parent().next(".off-canvas-submenu").slideToggle('fast');
$(this).find("span").text(icon);
});
this works perfectly only for a static page, also work a bit in wordpress but the stuggle is that when you click on item in the menu all the li with submenu opens instead of one at a time. take attention of the html structure of the menu:
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>Option 2 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 3</li>
<li>Option 4 <span class="right"> + </span></li>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</aside>
the ul submenu is in the same level with the li menu.
in wordpress the ul.submenu is inside the parent li menu.
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>
Option 2 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</aside>
the curent code is actually working a bit, but we don't want to open all the submemnu by only clicking a single li.
here is the codepen
$(document).foundation();
$(".off-canvas-submenu").hide();
$(".off-canvas-submenu-call").click(function() {
var icon = $(this).parent().find(".off-canvas-submenu").is(':visible') ? '+' : '-';
$(this).parent().find(".off-canvas-submenu").slideToggle('fast');
$(this).find("span").text(icon);
});
Made it worked this way using .find(), you will need to style the .off-canvas-submenu since its not on the same level as the other elements anymore therefor not inheriting the style of first level <ul> but in all you should me good.
Edit:
Works with multiple submenu
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>Option 1</li>
<li>
Option 2 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
<li>
Option 3 <span class="right"> + </span>
<ul class="off-canvas-submenu">
<li>Sub menu 1</li>
<li>Sub menu 2</li>
<li>Sub menu 3</li>
</ul>
</li>
</ul>
</aside>
I'm using this piece of code for my website to implement a dropdown menu:
<script>
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
</script>
and
<div style="margin-left:150px">
<ul class="menu" id="menu">
<li>Dropdown One
<ul>
<li>Navigation Item 1</li>
<li>
Navigation Item 2
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
</ul>
</li>
<li>
Navigation Item 3
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>
Navigation Item 3
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
<li>Navigation Item 6</li>
</ul>
</li>
<li>Navigation Item 4</li>
</ul>
</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
I tried to convert h.onmouseover and h.onmouseout in h.onclick because i want the menu to expand when the user clicks on it.
How can i do that? I'm newbie in Javascript.
try this:
change from
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
change to
h.onclick=new Function(this.n+'.st('+i+',true)');
I have a menu structure like this:
<ul>
<li>One
</li>
<li class="active">Two
<ul>
<li>Sub One
<ul>
<li>Sub One One...</li>
<li>Sub One Two
</li>
</ul>
</li>
<li>Sub Two
<ul>
<li>Sub Two One
</li>
<li>Sub Two Two
</li>
</ul>
</li>
<li>Sub Tree
</li>
</ul>
</li>
<li>Tree
</li>
</ul>
Now... How can i select all sub first "ul" tags in class "active" ?
sample, active > "ul" (sub one) > "ul" (sub one one) ... etc.
You can select like this
JQuery
$('ul li.active>ul')
OR
$('li.active').children('ul')
CSS
ul li.active ul {}
$("li.active").find("ul") will do the trick. Following is the simple code where you can log all the UL elements inside active li.
var ulArr = $("li.active").find("ul");
console.log("First UL of active li is: " + ulArr[0]);
$.each(ulArr, function(index, element) {
console.log("Child UL number " + index + " is: " + element);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>One
</li>
<li class="active">Two
<ul>
<li>Sub One
<ul>
<li>Sub One One...</li>
<li>Sub One Two
</li>
</ul>
</li>
<li>Sub Two
<ul>
<li>Sub Two One
</li>
<li>Sub Two Two
</li>
</ul>
</li>
<li>Sub Tree
</li>
</ul>
</li>
<li>Tree
</li>
</ul>
try
$("li.active >ul:first")
$('.active ul>li>a').first()
$(function() {
var active = $('.active ul>li>a').first().addClass('red');
});
.red {
color:red !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>One
</li>
<li class="active">Two
<ul>
<li>Sub One
<ul>
<li>Sub One One...</li>
<li>Sub One Two
</li>
</ul>
</li>
<li>Sub Two
<ul>
<li>Sub Two One
</li>
<li>Sub Two Two
</li>
</ul>
</li>
<li>Sub Tree
</li>
</ul>
</li>
<li>Tree
</li>
</ul>