how to set menus on click event of menu item in asp.net?

@devang:no its not working can you please tell me any jquery example

@deavang :tel me ur gmail id.no dear its not workiing

ok jquery example bta skte ho koi?

ok

@devang:i got solution from there but href="jquery.mobile-1.1.0.css",
src="jquery-1.7.2.js","jquery.mobile-1.1.0.js".
what are its values?

http://ramkulkarni.com/blog/creating-dynamic-popup-menus-with-jquery-mobile/
http://www.webgeekly.com/tutorials/create-a-simple-jquery-drop-down-menu-in-3-simple-steps/

http://www.webgeekly.com/tutorials/create-a-simple-jquery-drop-down-menu-in-3-simple-steps

http://ramkulkarni.com/blog/creating-dynamic-popup-menus-with-jquery-mobile

wo isme hai

can you help me please?

how to acess the jquery library?

i have this code

1) The elements you will need

To create a drop down menu, you will need two items:

A Button
A Drop Down Menu
To start off, we will be creating these two elements:

1
2
3
4
5
6
About

<div id="submenu">
About the company<br />
Careers
</div>
I put in 2 random links in the sub menu just as a sample. The button is the “About” link which should load up the sub menu when clicked on. Here’s what it will look like:


2) The CSS you will need

Since the sub menu needs to be positioned directly under the link, we will need some CSS to create the desired layout.

We will need to set the position attribute to absolute to ensure that the sub menu will go over the rest of the content. We will also apply a small border so you can see the menu. Additionally, we will give the link a background color to make it easy to see.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>

a#link {
background:#CCC;
padding:10px;
cursor:pointer;
}

div#submenu {
position:absolute;
border:1px solid #CCC;
background:#FFF;
padding:10px;
}

</style>
With the CSS in place, it should now look like:


Next, we need to set the CSS display property to none for the sub menu. We do not want the sub menu to appear when you load the page the first time.

3) The jQuery you will need

First and foremost, you will need to include the jQuery library:

1
<script type="text/javascript" language="javascript" src="/PATH/TO/jquery.min.js"></script>
With the library included, we are going to need three event handlers:

The first will get triggered when you click the link
The second will trigger when your mouse enters the submenu
The third will trigger when your mouse leaves the submenu
Here’s the first event handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('a#link').click(function() {
// Trigger event on click

var submenu = $('div#submenu');
// Store the sub menu element in the 'submenu' var

if (submenu.is(":visible")) {
// Is the submenu visible?

submenu.fadeOut();
// If so, fade it out.

} else {

submenu.fadeIn();
// If not visible, fade it in.

}
});
I’ve included a number of comments to explain what is happening. When the button is clicked, jQuery checks to see whether the submenu is already visible and hides it or shows it accordingly. Simple enough so far, right?

The new two event handlers will make the sub menu disappear once the mouse has left it and some time has passed. In order to do this successfully, we need to create a JS variable which lets us know whether the pointer is currently inside the submenu or outside of it. Why? If we take our cursor out and place it immediately back in, we do not want the fadeOut function to get triggered.

Here are the two event handlers and the variable:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var submenu_active = false;
// Is the cursor inside the sub menu?

$('div#submenu').mouseenter(function() {
// On mouse enter, set the var to true

submenu_active = true;

});

$('div#submenu').mouseleave(function() {
// On mouse leave, set it to false
submenu_active = false;

// Use the setTimeout function to run
// a command after a short delay.

// The code above will pause the code for
// 400 milliseconds and then checked
// whether the submenu is active or not
// If not, it will fade it out

setTimeout(function() { if (submenu_active === false) $('div#submenu').fadeOut(); }, 400);
});
And here’s all the code again, this time without any comments:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('a#link').click(function() {
var submenu = $('div#submenu');
if (submenu.is(":visible")) {
submenu.fadeOut();
} else {
submenu.fadeIn();
}
});
var submenu_active = false;

$('div#submenu').mouseenter(function() {
submenu_ac

chk this

nai its not working can you tel me how it can be run

just its all about in this code

its is also solved from this

<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="jquery.mobile-1.1.0.css" rel="stylesheet">

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0.js"></script>

<script type="text/javascript">
$(document).bind("pageinit", onPageInit);

//variable to store menu instance
newMenu = null;

function onPageInit()
{
//create menu. First option in the third argument is menu title
createMenu("dynamicMenu1","contentDiv","Menus,menu1,menu2,menu3",menuHandler);

$("#btn1").click(function(){
showMenu(newMenu);
});
}

function createMenu(menuId, parentId, options, menuHandler)
{
//create a containing div
var div = $("<div id='" + menuId + "div'></div>").appendTo("#"+parentId).hide();

//create select tag
var menuElm = $("<select id='" + menuId + "' data-inline='true' data-native-menu='false'></select>").appendTo(div);

//add options
var optionsArray = options.split(",");
for (var i = 0; i < optionsArray.length; i++)
$("<option>" + optionsArray[i] + "</option>").appendTo("#"+menuId);

//convert to JQueryMobile menu
$("#" + menuId).selectmenu();

//find custom menu that JQM creates
var menus = $(".ui-selectmenu");
for (var i = 0; i < menus.length; i++)
{
if ($(menus[i]).children("ul:#" + menuId + "-menu").length > 0)
{
newMenu = $(menus[i]);
break;
}
}

if (newMenu == null)
{
alert("Error creating menu");
return;
}

//Associate click handler with menu items, i.e. anchor tags
$(newMenu).find(".ui-selectmenu-list li a").click(menuHandler);

return newMenu.hide();
}

function showMenu(menu)
{
if (menu == null)
return;

//show menu at center of the window
var left = ($(window).width() - $(menu).width()) / 2;
//consider vertical scrolling when calculating top
var top = (($(window).height() - $(menu).height()) / 2) + $(window).scrollTop();
$(menu).css({
left: left,
top: top
});

$(menu).show();
}

//Callback handler when menu item is clicked
function menuHandler(event)
{
if (newMenu != null)
$(newMenu).hide();

alert(event.srcElement.text);
}
</script>

</head>

<body>
<div data-role="page" >
<div data-role="content" id="contentDiv">
Show Menu
</div>
</div>

</body>
</html>

ya kyu

<script type="text/javascript" src="jquery-1.7.2.js"></script>
ye wali kahan se aaegi?

acha kaise pta hai

ya nothing is working

i need it bs