ASP.NET Easy Menu - How-To and Help





For any questions send us a support request.


1. How to use Easy Menu in my asp.net page?

At the top of your ASP.NET source-code page add:
    <%@ Register TagPrefix="oem" Namespace="OboutInc.EasyMenu_Pro" Assembly="Obout_EasyMenu_Pro" %>
You can now use Easy Menu just like in the examples.



2. How to add a reference to Easy Menu in VS?

Go to toolbar menu Project > Add Reference > Click button 'Browse' >
> Find obout_EasyMenu_Pro.dll > Click 'Open' > Click OK



4. How to change the theme of the menu?

Change the property StyleFolder to match the folder with theme you want.
Take a look at examples to see the available themes (styles).




5. How to use Icons?

Make sure you set the IconsFolder property correctly then for each menu item near which you want an icon to appear, change the Icon property to match the name of the file with the icon desired.




6. How to use my own Icons?

Create the icon (an image) and then either copy it to the EMStyles/Icons folder or to another folder of your choice (must be inside the root folder of your website) and change the IconsFolder property to match this folder, then set the Icon property of the menu item you want to match the name of the icon you created.




7. How to create my own menu style/skin?

See tutorial page here
Create a new folder inside easymenu/styles with the name of your new theme.
Create a file inside this folder named style.css.
Create styles for each of the states of the item of the menu:
        .easyMenu
        .easyMenuItemContainer
        .easyMenuItem
        .easyMenuItem a
        .easyMenuItemIconCell
        .easyMenuItemIconCell a
        .easyMenuItemContentCell
        .easyMenuItemContentCell a
        .easyMenuItemOver
        .easyMenuItemOver a
        .easyMenuItemIconCellOver
        .easyMenuItemIconCellOver a
        .easyMenuItemContentCellOver
        .easyMenuItemContentCellOver a
        .easyMenuSeparator
        .easyMenuSeparatorIconCell
        .easyMenuSeparatorContentCell
        .easyMenuSeparatorOver
        .easyMenuSeparatorIconCellOver
        .easyMenuSeparatorContentCellOver
        .easyMenuItemSubMenuCell New!
        .easyMenuItemSubMenuCellOver New!



Note: you might not need to define all the styles above.

Take a look at the existing themes for examples.




8. How to change where a menu is displayed?

Change the property called Align.
For more info take a look at the tutorial for this.




9. How to change when a menu is displayed?

Change the property called ShowEvent.
For more info take a look at the tutorial for this.




10. Can the menu overlap frames?

At the current version, the menu cannot overlap frames.
To overcome this, you can use inline frames (IFRAME), tables or layers (DIV, SPAN) in combination with CSS.
For more info on how to use layers instead of frames, take a look here:
      http://www.456bereastreet.com/lab/cssframes/
      http://www.gyford.com/phil/writing/2004/03/26/goodbye_frames_.php




11. How to use the menu programatically?

In the downloadable zip file containing the examples for EasyMenu, you will find examples of how to use EasyMenu from code (programatically), by creating the same functionality as the examples with declarative asp.net code.

Note: you could try to see the code from examples with the same name in parallel in order to better understand how you can achieve the same functionality with code-behind. (e.g: aspnet_horizontal_1.aspx and cs_horizontal_1.aspx, cs_horizontal_1.cs)




12. How to add Easy Menu to the page?

You have created the Easy Menu control and added items along with configuration, still the menu does not appear on the page?
Check one of the following:
1. You have assigned a unique ID to the menu. (myEasyMenu1.ID = "myEasyMenu1")
2. You have set the AttachTo property, and also it is a valid control id. (myEasyMenu1.AttachTo = "div1") For more info, take a look at the AttachTo tutorial.
3. You have added it to the controls collection of the page or to any other placeholder. (Page.Controls.Add(myEasyMenu)))


Note: take a look at the examples in codebehind folder called vertical, horizontal, horizontal_1 since there you can see multiple menus on the same page.




13. I'm using more than one Easy Menu on the page but only the last one added is rendered?

Make sure you have assigned a unique ID to each menu. For example, use:
myEasyMenu1.ID = "myEasyMenu1"
myEasyMenu2.ID = "myEasyMenu2"

See also: How to use different styles for multiple Easy Menu on the same page?.




14. Where to put folder 'EMStyles' ?

To run examples put folder 'EMStyles' from zip file into 'C:\Inetpub\wwwroot'

You can also put it to any other location on your web server under the root folder.

Use web relative paths:
- If folder was placed in 'C:\Inetpub\wwwroot':
easyMenu.IconsFolder = "/EMStyles/Icons"
easyMenu.StyleFolder = "/EMStyles/Styles/Style1" 

- If folder was placed in 'C:\Inetpub\wwwroot\MyPath':
easyMenu.IconsFolder = "/MyPath/EMStyles/Icons"
easyMenu.StyleFolder = "/MyPath/EMStyles/Styles/Style1" 

- If folder was placed in the same folder with your aspx file:
easyMenu.IconsFolder = "EMStyles/Icons"
easyMenu.StyleFolder = "EMStyles/Styles/Style1" 

Also see How to set path for my page?
Also see How to run examples?




15. How to run examples?

For Visual Studio

> File > Open > Website > 
> Select the folder where you unzipped EasyMenu.zip and click Open
> Right click the Default.aspx file in Solution Explorer and set it as start page
> Right click the project name in Solution Explorer and select View in Browser
> From the list in the web page that opens, click the example you want to see.




17. How to add links to Menu Items ?

Menu Items have two properties that help you open new pages on click:
· Url - sets the page to be opened
· UrlTarget - the target frame to open the page

Url can be any URL of a page (relative or absolute), just like the href of a link.

UrlTarget can be:
  - the name of an existing frame or iframe in the page
  - _blank to open in a new browser window
  - _top to open in the top document of the current window
  - _self to open instead of the current page






19. What browsers are supported?

Easy Menu has been tested and works correctly under Internet Explorer, Netscape Navigator, Mozilla FireFox and Opera.


Note: Easy Menu might also work correctly under other browsers, but it has not been tested yet.






20. How to use Easy Menu in an ascx control?

Using Page.Controls.Add (em_1), we are actually asking the ascx control to add the Easy Menu control to its parent page. However, the control cannot modify its parent. To overcome this, we should simply need to modify the line:
Page.Controls.Add (em_1)
to
this.Controls.Add (em_1)


Note: Easy Menu only attaches to the items after the page loads so unless using frames or iframes, it will not matter that an EasyMenu found inside an ascx control would have to attach to items found in the master page.






21. Does Easy Menu work with ASP classic too, or only with ASP.NET?

Unfortunatelly this component does not work with ASP classic, only with ASP.NET.






22. How to make the background transparent?

You need to modify the .css file. Whenever we have a background and it applies, we need to set the background color transparent:
background-color: transparent;


Notes:
· We may also use filter for opacity instead of making the background transparent. For example, we may use:
      background-color: Black;
      filter: Alpha(Opacity=0); /* for IE */
      -moz-opacity: 0.6; /* for Firefox */
      opacity: .6; /* for Safari */
You won't get any errors using all lines at the same time.

· You may also see the Transparent Easy Menu Example






23. Is Context Menu supported by the Opera browser?

Opera only supports MouseClick and MouseOver events for the ShowEvent property.






24. How to supress the Easy Menu from emitting IFRAME tags without SRC attributes?

Starting with version 2.5.11.0 of Easy Menu this problem is solved.
If for some reason we need to have the src of the iframe point to a certain page in a secured zone, we can use the property called securedPageUrl to set the url of this page.






25. How to use different styles for multiple Easy Menu on the same page?

If only one easymenu is visible at the same time you can do this by simply setting a different StyleFolder property for each Easy Menu.

For example:
<oem:EasyMenu id="Easymenu1" StyleFolder="/emstyles/styles/horizontal1">
and
<oem:EasyMenu id="Easymenu2" StyleFolder="/emstyles/styles/horizontal2">


If more than one easymenu is visible at the same time in the webpage, you need to use different css class names for the easymenu items.
To accomplish this you need to use CSSClasses and CSSClassesCollection properties.
More information on these properties you can find in server side documentation page.

For example:

For the first easymenu you don't need to do anything.

For the second easymenu on your webpage you need to add CSSClassesCollection property.
Second easymenu on your page has the css class names suffixed by "_1".

<oem:EasyMenu id="EasymenuMain" runat="server" ShowEvent="Always" StyleFolder="/emstyles/styles/example_1"
Position="Horizontal" CSSMenu="ParentMenu_1" CSSMenuItemContainer="ParentItemContainer_1" Width="330">
<CSSClassesCollection>
<oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuItem"
ComponentSubMenuCellOver="ParentItemSubMenuCellOver_1"
ComponentContentCell="ParentItemContentCell_1" Component="ParentItem_1"
ComponentSubMenuCell="ParentItemSubMenuCell_1"
ComponentIconCellOver="ParentItemIconCellOver_1" ComponentIconCell="ParentItemIconCell_1"
ComponentOver="ParentItemOver_1" ComponentContentCellOver="ParentItemContentCellOver_1" />
<oem:CSSClasses ObjectType="OboutInc.EasyMenu_Pro.MenuSeparator"
ComponentSubMenuCellOver="ParentSeparatorSubMenuCellOver_1"
ComponentContentCell="ParentSeparatorContentCell_1" Component="ParentSeparator"
ComponentSubMenuCell="ParentSeparatorSubMenuCell_1"
ComponentIconCellOver="ParentSeparatorIconCellOver_1" ComponentIconCell="ParentSeparatorIconCell_1"
ComponentOver="ParentSeparatorOver_1"
ComponentContentCellOver="ParentSeparatorContentCellOver_1" />
</CSSClassesCollection>
<Components>
<oem:MenuItem InnerHtml="Item1" ID="item1" />
<oem:MenuSeparator InnerHtml="|" ID="mainMenuSeparator1" />
<oem:MenuItem InnerHtml="Item2" ID="item2" />
<oem:MenuSeparator InnerHtml="|" ID="mainMenuSeparator2" />
<oem:MenuItem InnerHtml="Item3" ID="item3" />
<oem:MenuSeparator InnerHtml="|" ID="mainMenuSeparator3" />
<oem:MenuItem InnerHtml="Item4" ID="item4" />
</Components>
</oem:EasyMenu>

Also for the second easy menu you need to edit file style.css from the specified style folder by StyleFolder property, and add to the names of the classes "_1".

.ParentMenu_1
{
background-image: url(/emstyles/styles/horizontal1/margin.gif);
background-repeat: repeat-x; background-position: left bottom;
height: 30px;
padding-left: 1px;
padding-right: 1px;
}

.ParentItemContainer_1
{
background-image: url(/emstyles/styles/horizontal1/mid.gif);
background-repeat: repeat-x;
}

...


See also: I'm using more than one Easy Menu on the page but only the last one added is rendered?.






26. Where to set up properties like StyleFolder or UseIcons?

These properties must be set when we are declaring the Easy Menu. If we are declaring the Easy Menu in an .aspx file, then we have to set it like this:
<oem:EasyMenu id="Easymenu1" StyleFolder="/emstyles/styles/default" ...>

If you are using the Easy Menu in code behind, then you need to set them like this:
EasyMenu1 = new EasyMenu();
...
EasyMenu1.StyleFolder="/emstyles/styles/default"
...
where EasyMenu1 is the id of our Easy Menu.






27. How to make the menu display over flash movies in Mozilla?

Add these parameters to the object element:

<object ....>
....
<param name="wmode" value="opaque">
<param name="menu" value="false">
<embed wmode="opaque" menu="false" .... ></embed>
</object>

You may also see this example.






28. Can I create a Tab Strip?

You can create a Tab Strip just using the Easy Menu control.

Please take a look over these tutorials: Tab Strip, Tab Strip with loading.






29. Is working perfectly on my development server, but it doesn't work on the production server.

On the server,

1. Open IIS console and go into properties of your website.
2. Switch to "Home Directory" tab.
3. Click on "Configuration" button under "Application Settings".
4. In the new window go into "Mappings" tab.
5. Copy (into notepad for example) all values for .aspx extension.
6. Click "Add" button to add a new entry.
7. "Executable" field is the same as the path for .aspx extension
(example: c:\windows\microsoft.net\framework\v2.0.50727\aspnet_isapi.dll).
8. "Extension" field must be ".axd".
9. Verbs are limited to "GET,HEAD,POST,DEBUG".
10. Uncheck "Verify that file exists" (important that it is unchecked).

Click OK on all open dialogs. 
This should now reference web resource files correctly.






30. The menu is not working on my AJAX enabled page!

Make sure you place your menu control directly inside a form element.






31. Does Easy Menu work inside User Control or Master Page?

Yes, Easy Menu works inside User Control or Master Page.
Download ready working examples with source code.






32. Does Easy Menu work with AJAX?

Since version 3.8.1.0 Easy Menu has:

· improved support for working with Obout AJAX Page

· improved support for working with Microsoft ASP.NET AJAX

· improved support for working with Microsoft ASP.NET AJAX Control Toolkit






33. How to remove all the menu items client side?

JavaScript
for (i = 0; i< ob_em_Easymenu1.items.length;)
    ob_em_Easymenu1.RemoveItem(ob_em_Easymenu1.items[0].id)
where Easymenu1 is the menu id.






34. How to disable menu items client side?

JavaScript
document.getElementById('item1').disabled = true;
where item1 is the menu item id.

Unlikely this feature only works for Internet Explorer.






35. Can the menu items postback?

Yes, check the Server events using page postback example from the Obout suite.






For any questions send us a support request.

"Great components, great service and great support by the way guys."

Steve

obout.com
obout.com Home
News
Easy Menu Home 
Easy Menu Home
Download
Site Map
Compare with Text Menu
Examples - 47
Horizontal - 15
Horizontal 1
Horizontal 2
Horizontal 3
Horizontal 4
Horizontal 5
Horizontal 6
Horizontal 7
Horizontal 8
Horizontal Right To Left
Transparent - over flash
Transparent - over iframe
MSDN
MSDN 2
With rounded corners
Keep Open New
Vertical - 3
Vertical 1
MS Vertical
Vertical Right To Left
ContexMenu - 10
World Map
Default
Futura
VSNET
Windows
WindowsXP
Style 1
Style 2
Style 3
Right To Left
Tab Strip - 20
Tab Strip
Tab Strip - With postback New
Different Styles - 14
TabStrip1
TabStrip2
TabStrip3
TabStrip4
TabStrip5
TabStrip6
TabStrip7
TabStrip8
TabStrip9
TabStrip10
TabStrip11
TabStrip12
Yahoo TabStrip
Parent Child Tabstrip New
Tab Strip - Wizard
Tab Strip - Wizard 2
Add / Remove Tabs
Add / Remove Tabs 2
Time Picker
Features - 46
Fast loading time
Multi Column Menu - 2
Multi Column Submenu New
Multi Column Submenu with Icons New
Multiple menus - 3
Multiple menus
Multiple menus 2
Horizontal menu and Tab Strip
Operations - 9
ShowEvent New
Add / Remove Items New
Hide / Show Items New
Menu item inner HTML New
Attach / Detach
Menu Events
OnClientClick
Menu item postback
Show menu New
Align/Position - 4
Align
Advanced Align
Menu Offsets
Position
Integration  - 13
TreeView - 5
Attach to TreeView
Dynamic Loading
Inside callback panel
Select the TreeView node New
TreeView inside Easy Menu
AJAX Page - 3
Inside AJAX Page panel
Inside MS AJAX panel
Add items server side
Grid - 2
Use With Grid
Inside DataGrid column
Inside WindowNew
Build from SiteMap
Over Java Applet New
Other features - 15
AttachTo
Menu Icons
Menu Customize
Long vertical menus
Long menu items
Disabled menu item
Sub-menus
Custom Menu Items
Using Database
Postback Persistance
Dynamic Easy Menu Item
Full Easy Menu width
Hide menu with time delay
Custom sliding effect New
Custom Menu Content New
Knowledge Base - 2
Knowledge Base
Documentation - 4
Server side
Client side
Using the correct path
ChangeLog