Video: How Do I: Use the ASP.NET AJAX HoverMenu Extender?

Presenter:Joe Stagner

Discover how to use the HoverMenu extender control to create a context-sensitive menu that appears whenever the user hovers the mouse over an element of a web page.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

This video will show you how to add context sensitive pop up menus to your ASP net application by using a menu extender that ships as part of the Microsoft Ajax control toolkit source created a website project using the Ajax control toolkit template not going to do is add a cascading style sheet file so I can use the CSS classes are defined in there so to do that I m going to open our default aspx page in a drag the style sheet file into my into my page so I can reference not ready to build to build the pop up menu and its related content it s really pretty straightforward to do the first thing to do is have a link button this one button will represent something that we want to have a contact sensitive pop up menu so this could be a whole list of items understood into a single one for the purposes of example solicitors could be a intranet link button and I m a changed the name to be a

Minute 1

Product prices opposes some product and would change the and change the text to read product she was training video the patent so there s a good that we know why rough they hover menu to mix it we need is some content that could contain that many of us can up here and however and so did do that at first they were to do is get a standard ASP net panel to drop out of the page and this panel is to be the container for the menu items so I ll call it a panel pop up annually thing on add to this is incident at a CSS class for and if we open up that stylesheet file included that you note here that

Minute 2

Of the cliff to CSS for classes defined values pop up menu for a for this one to decide that panel the panel is to contain your container for the menu believed to define the menu items inside that panel settle on with this at a couple more link buttons and all make these link buttons and menu items so is going to do is I m in a get rid of the text is thereby the false enemies text properties instead since this part properties are programmatically sensible left on the preference also allowing fees as he become items on separate on separate lines on the street seems to be more meaningful will call this what an update so that will do maybe this is a function behind this is new to update the the record

Minute 3

So let s say causes validation equal to true because were calling for him to see updates for the record on and lets you specify a command name update and it will specify the text that should be displayed in in so now this is a side to the test attribute value and is therefore programmatically accessible if we should choose to some point the next puts call this button cancel and would say causes validation equal to false for canceling out we don t care let s say the command name is

Minute 4

Gets old and they would assess and text and then make a cancel as well moves as equals in their so difficult to now of course we just need to add the cover many extender itself so it s going to do that so many go over and scroll down to my Ajax toolkits have in my toolbox and find the hover menu extender drop that in my page here and now we can just do configure the properties for the hover menu extender and so let s begin by saying target control ID equal to

Minute 5

Product to the thing we want to cause the to cause the menu pop up is the button product a link button next let s specify what s going to pop up so will specify that the pop up control ID is and this is a data container so what what we ve labeled a panel pop up is what s going to actually appear let s is facing here so you can keep an eye and everything were doing know what caliber where we want that pop up to appear so let s say pop up position what this is to appear at the bottom so I wanted to appear with the muses I want to appear underneath that target which is are a button product

Minute 6

Not what I was based in time or space it in from the left border little bit so let s also say said X V cool a ticket to six pixels would be really careful that using offset why by the way because if you do that use offset why you run the risk of the having trouble getting the mouse to move from the thing cause the pop up to to the menu itself so one of the ways you manipulated that is by working with the pop up delay is the one it has its own at a former CSS class so just to specify a CSS class for during pop up and we ll call that pop up and over again to find in our

Minute 7

Cascading style sheet for stylesheet CSS file that it should do everything we should now be able to go and test our application don t so you can see the the product country Joe s training video and as we hover over our menu pops up in the desert clickable links us to win programs for any out logic behind those links recently in a press application as we redo but it s that easy to implement the hover menu to dynamically appearing contacts as if hover menu using the hover menu extender that shipped with the my suffragettes control toolkit

Click here to go to original video page