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.
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.
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.