Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET
Article

TwoColorsMenu - The fastest menu in the world

Rate me:
Please Sign up or sign in to vote.
4.61/5 (20 votes)
10 Dec 2007CPOL2 min read 49.5K   1.1K   87   5
This article will demo the fastest way to create a menu for your web page with the TwoColorsMenu.

TwoColorsMenu

Introduction

In my previous article, "Flyout - A great way to save space on your webpage", I have introduced to you a nice and free control. Today, I would like to bring here another free ASP.NET control named, TwoColorsMenu, from obout inc. As the name indicates, this is a menu made by two colors. Although it sounds simple, it is an effective, fast, and free solution for menus in your webpage. Like the Flyout component, the TwoColorsMenu is free for both personal and commercial usage.

List of features

Below are some of the highlighted features:

  • The fastest menu in the world.
  • Can work with database.
  • Compatible with Microsoft ASP.NET AJAX.
  • Content is accessible by web engine spiders.
  • Easy to use: you can have a menu with very few lines of code.

How to add the TwoColorsMenu to your page

Adding the TwoColorsMenu control to your page is very simple.

  • Copy obout_TwoColorsMenu.dll to the Bin folder of your project
  • Register TwoColorsMenu on your page:
    ASP.NET
    <%@ Register TagPrefix="tcm" Namespace="OboutInc.TwoColorsMenu" 
                 Assembly="obout_TwoColorsMenu" %>

Using the TwoColorsMenu control

Below is some sample code to start with:

ASP.NET
<tcm:TwoColorsMenu runat="server" id="tcm1">
    <tcm:Item ID="item1" InnerHtml="Item1"/>
        <tcm:Item ParentID="item1" ID="item11" InnerHtml="Item 1 - 1"/>
        <tcm:Item ParentID="item1" ID="item12" InnerHtml="Item 1-2"/>
    <tcm:Item ID="item2" InnerHtml="Item2"/>
        <tcm:Item ParentID="item2" ID="item21" InnerHtml="Item 2-1"/>
        <tcm:Item ParentID="item2" ID="item22" InnerHtml="Item 2-2"/>
</tcm:TwoColorsMenu>

By putting the ID of parent item into the ParentID property of the child item, we can build a menu with sub-items and even with sub-sub-items.

And here is the result of our work:

Screenshot - tcm2.gif

How to change the colors for the menu?

The above image shows the default colors of the menu, those colors can be changed. There are four properties to control colors:

  • ColorBackground: The background color of an item.
  • ColorBackgroundOver: The background color of an item on mouse-over.
  • ColorFont: The font color of items.
  • ColorFontover: The font color of items on mouse-over.

If you want your menu to have other colors, like this:

Screenshot - tcm3.gif

do this:

ASP.NET
<tcm:TwoColorsMenu runat="server" id="tcm1" 
       ColorBackground="Orange" ColorBackgroundOver="Blue" 
       ColorFont="Black" ColorFontOver="White">
    ...        
</tcm:TwoColorsMenu>

How to make a vertical menu

The TwoColorsMenu menu appears, by default, in horizontal shape. But if you want to have a vertical menu, you may set the Vertical property to true.

ASP.NET
<tcm:TwoColorsMenu runat="server" id="tcm1" Vertical="true" >
    ...        
</tcm:TwoColorsMenu>

Screenshot - tcm4.gif

About the code-behind of TwoColorsMenu

Below is an excerpt of C# code to generate the TwoColorsMenu menu:

C#
TwoColorsMenu tcm1 = new TwoColorsMenu();
tcm1.ID = "tcm1";
tcm1.StyleFolder = "styles/submenuicon";
tcm1.SubMenuText = "";
//You can easily added javascript code for menuitems


tcm1.Add(null, "brands", "Brands", 
               "javascript:alert('you clicked me');void(0);", null);
    tcm1.Add("brands", "ibm", "IBM");
    tcm1.Add("brands", "microsoft", "MICROSOFT");
    tcm1.Add("brands", "obout", "OBOUT", "http://www.obout.com/", "_top");
        // The format of Add() method is Add(string ParentID,string ID,
        //                                   string InnerHtml,string Url, 
        //                                   string Target);


        tcm1.Add("obout", "treeview", "TreeView", 
                 "http://www.obout.com/t2/edraganddrop.aspx", "_top");
        tcm1.Add("obout", "slidemenu", "Slide Menu", 
                 "http://www.obout.com/sm3/whatisnew.aspx", "_top");
        tcm1.Add("obout", "calendar", "Calendar", 
                 "http://www.obout.com/calendar/", "_top");
        tcm1.Add("obout", "postback", "Postback4", 
                 "http://www.obout.com/pb4/", "_top");
        tcm1.Add("obout", "splitter", "Splitter", 
                 "http://www.obout.com/splitter/", "_top");
        tcm1.Add("obout", "easymenu", "EasyMenu", 
                 "http://www.obout.com/em/", "_top");
        tcm1.Add("obout", "combobox", "Combobox", 
                 "http://www.obout.com/em/ex_combobox.aspx", "_top");
        tcm1.Add("obout", "editor", "HTML Editor", 
                 "http://www.obout.com/editor_new/", "_top");
        tcm1.Add("obout", "superbutton", "Super Button", 
                "http://www.obout.com/osb/", "_top");
        tcm1.Add("obout", "treedb", "Tree_DB", 
                 "http://www.obout.com/t_db/index.aspx", "_top");
        tcm1.Add("obout", "twocolorsmenu", "TwoColorsMenu", 
                 "http://www.obout.com/tcm/tcm.aspx", "_top");
tcm1.Add(null, "systems", "Systems");
    tcm1.Add("systems", "desktops", "Desktops");
    tcm1.Add("systems", "handhelds", "Handhelds");
    tcm1.Add("systems", "notebooks", "Notebooks");
    tcm1.Add("systems", "servers", "Servers");
tcm1.Add(null, "hardware", "Hardware");
    tcm1.Add("hardware", "accessories", "Accessories");
    tcm1.Add("hardware", "keyboards", "Keyboards");
    tcm1.Add("hardware", "memory", "Memory");
    tcm1.Add("hardware", "printers", "Printers");
    tcm1.Add("hardware", "videocards", "Video Cards");
tcm1.Add(null, "software", "Software");
    tcm1.Add("software", "applications", "Applications");
    tcm1.Add("software", "licensing", "Licensing");
    Page.Controls.Add(tcm1);

What else can I tweak in the TwoColorsMenu?

  • You can change the font of menu items with the Font and FontParent properties.
  • You can make the menu auto position - more.
  • You can make deeper changes to the appearance of the TwoColorMenu menu with Advanced CSS - more.
  • You can change the alignment of the menu from RightToLeft - more

Summary

In this article, I have shown you how to use the TwoColorsMenu from obout inc. The TwoColorsMenu menu is easy to use, and extremely fast in rendering. You can have a ready-to-go menu for your webpage in a few minutes. I hope that you find it useful. In the Zip file, there are number of examples for you to start with. You may get the latest version of the TwoColorsMenu menu anytime from the obout Suite.

License

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


Written By
Web Developer
Unknown
I am Ned Thompson, 26 years old. I am working at obout inc as web component developer. I am really good at ASP.NET and Javascript.


Comments and Discussions

 
GeneralMy vote of 1 Pin
zdlik25-Apr-12 1:17
zdlik25-Apr-12 1:17 
GeneralMy vote of 1 Pin
duraid wadie9-Jun-11 0:07
duraid wadie9-Jun-11 0:07 
No source code for the actual control. it should not be listed in this site.
QuestionWhy javascript? Pin
thany.nl6-Dec-07 22:14
thany.nl6-Dec-07 22:14 
AnswerRe: Why javascript? Pin
jamief16-Dec-07 22:24
jamief16-Dec-07 22:24 
GeneralEffective Pin
rcollina6-Dec-07 15:04
rcollina6-Dec-07 15:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.