Click here to Skip to main content
Rate this: bad
good
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
v2
Comments
Vani Kulkarni at 28-Sep-12 9:39am
   
Repost of the question[^].
Rate this: bad
good
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:
aspnet-menu-click-instead-of-hover[^]
  Permalink  
Comments
er.deepshikha at 28-Sep-12 9:57am
   
@vani:its not working please tel me another example
Rate this: bad
good
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
  Permalink  
v2
Comments
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 http://forums.asp.net/t/1148565.aspx/1 and in that other link for Easy Menu is given http://www.obout.com/inc/download.aspx 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 id.no dear its not workiing
Devang Vaja at 1-Oct-12 1:08am
   
My gmail id is coolrocker.vaja@gmail.com and Yahoo is devangvaja@yahoo.co.in
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
   
ok
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="jquery.mobile-1.1.0.css", src="jquery-1.7.2.js","jquery.mobile-1.1.0.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
   
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/
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
   
http://www.webgeekly.com/tutorials/create-a-simple-jquery-drop-down-menu-in-3-simple-steps
Devang Vaja at 1-Oct-12 3:08am
   
ye kaha pe likha he?? href="jquery.mobile-1.1.0.css", src="jquery-1.7.2.js","jquery.mobile-1.1.0.js".
er.deepshikha at 1-Oct-12 3:12am
   
http://ramkulkarni.com/blog/creating-dynamic-popup-menus-with-jquery-mobile 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 https://developers.google.com/speed/libraries/devguide
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 (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
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="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>
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 http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/ 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 http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/ 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
Interested
Ignored
     
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