Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: ASP.NET
i have a menu, what i want is that when i click on parent item of menu then only subitem should display,mean i dont want to display subitem on mouseover. what should i do.Is there any property should i set or i have to write code for it please help.
Posted 27-Sep-12 19:41pm
Edited 28-Sep-12 2:25am
Vani Kulkarni at 28-Sep-12 9:39am
Repost of the question[^].
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

As this question is a repost, posting the same link as answer:
how to show submenu in menu in click event[^]
Another link:
er.deepshikha at 28-Sep-12 9:57am
@vani:its not working please tel me another example
Rate this: bad
Please Sign up or sign in to vote.

Solution 3

see the css of ur menu's ul li there will be .hover effect Please remove it than try it will run..Deepu Ji
or try with static menu
er.deepshikha at 29-Sep-12 4:17am
how to use static menu can you tel me briefly please
Devang Vaja at 29-Sep-12 4:42am
Hey Deepshikha ji sorry haan for my bad behaviour, You can add menu From Toolbox> navigation> Menu and From design side You can customize it to dynamic or static View also see the Properties of menu you will Get whatever You want any How
er.deepshikha at 29-Sep-12 6:26am
@devang:how to set static view?
Devang Vaja at 29-Sep-12 6:28am
Have You Put menu? than go to design side at that side like we customize grid by autoformat same thing you can customize Menu and By default menu will be static
er.deepshikha at 29-Sep-12 8:23am
@DEVANG:But it shows me submenu on mouse hover move.i want this submenu on the click event of main menu
Devang Vaja at 29-Sep-12 9:35am
Hey Deepu plz Read this link and in that other link for Easy Menu is given Try to download that easy Menu control and Use it in Your Project
er.deepshikha at 1-Oct-12 0:27am
@devang:no its not working can you please tell me any jquery example
Devang Vaja at 1-Oct-12 0:33am
are yar ye bhi work nai kar raha he? have u downloaded and Tried that easy menu? I m Trying with Jquery i wl let u know asap..
er.deepshikha at 1-Oct-12 1:06am
@deavang :tel me ur gmail dear its not workiing
Devang Vaja at 1-Oct-12 1:08am
My gmail id is and Yahoo is
er.deepshikha at 1-Oct-12 1:13am
ok jquery example bta skte ho koi?
Devang Vaja at 1-Oct-12 1:17am
jquery me simple example aata hai me learn kar raha hu abhi jquery <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html> menu wala tere liye try kar raha hu abhi to company me kam he lekin time milne par kar raha hu
er.deepshikha at 1-Oct-12 1:21am
Devang Vaja at 1-Oct-12 1:31am
Aur bolo tum job karti ho? kitna experience hai? aur yar muje maf kar diya na plz... aur free ho to ek kam karo <ul><li> se menu banao uske sirf onclick event pe child menu items ko visible true karvao javascript se
er.deepshikha at 1-Oct-12 2:25am
@devang:i got solution from there but href="", src="jquery-1.7.2.js","". what are its values?
Devang Vaja at 1-Oct-12 2:33am
you got sollution from where?
er.deepshikha at 1-Oct-12 2:45am
Devang Vaja at 1-Oct-12 2:52am
is link pe 404 page not found aa raha he yar
er.deepshikha at 1-Oct-12 3:01am
Devang Vaja at 1-Oct-12 3:08am
ye kaha pe likha he?? href="", src="jquery-1.7.2.js","".
er.deepshikha at 1-Oct-12 3:12am wo isme hai
er.deepshikha at 1-Oct-12 4:02am
can you help me please?
Devang Vaja at 1-Oct-12 4:06am
mere me wo link ka refernce nai mil raha he is liye run nai ho raha he..... Kya help chaiye bolo na yar
er.deepshikha at 1-Oct-12 4:11am
how to acess the jquery library?
Devang Vaja at 1-Oct-12 4:15am
Read this link
er.deepshikha at 1-Oct-12 4:22am
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 (":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 (":visible")) { submenu.fadeOut(); } else { submenu.fadeIn(); } }); var submenu_active = false; $('div#submenu').mouseenter(function() { submenu_ac
er.deepshikha at 1-Oct-12 4:23am
chk this
Devang Vaja at 1-Oct-12 5:29am
is it running properly in ur pc? fade in fade out is needed For Triggering Here
er.deepshikha at 1-Oct-12 5:31am
nai its not working can you tel me how it can be run
Devang Vaja at 1-Oct-12 5:32am
have u put css and other links Properly of jquery?????
er.deepshikha at 1-Oct-12 5:35am
just its all about in this code
er.deepshikha at 1-Oct-12 5:36am
its is also solved from this <!DOCTYPE html> <html> <head> <link type="text/css" href="" rel="stylesheet"> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src=""></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>
Devang Vaja at 1-Oct-12 5:52am
isme jquery mobile vali link nai mil rahi he... isliye run nai ho raha he you can download jquery mobile from here......
Devang Vaja at 1-Oct-12 6:04am
hey is this your Roll no:-80803107015?????????
er.deepshikha at 1-Oct-12 6:11am
ya kyu
Devang Vaja at 1-Oct-12 6:13am
kal rat ko me soya hua tha to sapne me mujhe ye number dikha aur baju me likha tha deepshikha mundey bohot daravna sapna tha yar
er.deepshikha at 1-Oct-12 6:24am
<script type="text/javascript" src="jquery-1.7.2.js"></script> ye wali kahan se aaegi?
Devang Vaja at 1-Oct-12 6:27am
yaha se aayegi download it
Devang Vaja at 1-Oct-12 6:31am
hey r u not surprized that how do i come to know about ur personal details....??
er.deepshikha at 1-Oct-12 6:33am
acha kaise pta hai
Devang Vaja at 1-Oct-12 6:35am
tum socho kaise pata hoga? mujhe tumhare papa ka nam bhi pata he jasur ki rani
er.deepshikha at 1-Oct-12 6:52am
ya nothing is working
er.deepshikha at 1-Oct-12 6:56am
i need it bs

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
0 Sergey Alexandrovich Kryukov 545
1 OriginalGriff 498
2 sanket saxena 330
3 Abhinav S 280
4 thatraja 275
0 Sergey Alexandrovich Kryukov 8,372
1 OriginalGriff 4,830
2 Peter Leow 3,784
3 Maciej Los 3,515
4 Er. Puneet Goel 3,107

Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 1 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid