Wednesday, May 30, 2018

Easy Tips to Add Menu and Design Menu in

Easy Tips to Add Menu and Design Menu in

When you start designing website, it is important to consider about connecting to other pages to this main page. There is many way to connect web page URL, but here i am describing the URL connectivity through navigation tool. You can use HTML code or directly drag this control to you Web Form. And you can choose Orientation mode like horizontal or vertical as your requirement.

First of all, learn about webpage start in ASP.Net.

But where to find this control on

Find and Add Menu in WebForm:
For add this control, Just go to Toolbox and find "Navigation" option, from this option find "Menu" control and drag it to web form.
Add Navigation Control for design
Add Navigation Control
When dragging process will complete, it will looks in Vertical Orientation mode.

Change Orientation Mode:
Suppose, we want to set it in Horizontal Orientation mode. Then go to this control's "Property" window. And Find Orientation option and set option with selecting Horizontal mode.
Change Orientation for design
Change Orientation
After completion of above process. Let's go to next process.

Menu Root Items and Properties setting: 
Now its time to add items replacing with Root name. For this process, Just Click on "Menu task" button, this activity shows drop down list containing many such as describe in bellow image.

Find and select "Edit Menu Items.." option. It will show "Menu Item Editor" screen. In this screen, you will find 2 box related with Items and Properties.

If you are new and want to design layout with header, footer, sidebar and content then learn with wabpage layout in

For adding items, click on 'Add a root item' button from "Items:" caption. This process will show "New item.." text in this box.

Set Text properties with your required name will show in run time. Suppose we modify it with "Home_page".

Like this merge more root name with change its Text such as: About_Page, Contact_Page, Policy_Page etc.
Add Root Items for design
Root Name setting

Steps: Menu Task >> Edit Menu Items.. >> Add a root Item (button click) >> Text (change properties)

Properties Settings: 
When you work on designing style, this will be in default static template mode. so, if you want to settings on its back color, Root items back color, border style etc, Then go to "Properties" screen and design whatever in your mind.

For normal designing style process, learn about some point of Properties screen.

  1. StaticMenuItemStyle
  2. StaticHoverStyle

(1) StaticMenuItemStyle :
This property settings use to set some options like back color, Border color, Border style, Border width, Font Color, Font etc. Suppose we change these properties as:

BackColor:  #CC0000
BorderColor:  #669900
BorderStyle:  Groove
BorderWidth:  1px
Font Name:  Calibri
ForeColor:  #FFFF99
Width:  90px

(2) StaticHoverStyle : 
 This setting change hover style, for example when you move cursor here and there on navigation control then it will be focus as defining style. Suppose we set these properties as:

BackColor: #FFFF66
ForeColor: #CC0000
Font Bold: True

Change Style for design in asp
Change Style
When you set these properties, this will change with attractive look. This process can give attractive look for this control.
Now see the output, when you run application.
navigation tool at runtime in asp

Create and set CSS Style Sheet for attractive look: 
If you do not want to change through property, you can try CSS code for design it. There is following CSS code which you have to write in your webpage.

Add CSS code and file
Add CSS code and file

Copy CSS code from here: 
    margin: 0px auto;         
    font-family: Helvetica;         
    text-align: center;         

 .mymenu ul li:hover{         
   background-color: #ccc;         
   font-family: calibri;         
   background-color: #F4F4F4;color:#33CC33;         

 .mymenu ul li {         
   float: left;         
   margin-left: 3px;         
   background-color: #C0C0C0;color:#33CC33;         
   text-align: center;         
   padding: 3px;         
   border-bottom: 1px solid #FFFF00;         
For this CSS code define Menu's CssClass as mymenu.

When you apply this CSS code it will looks like:
CSS design navigation tool in asp
So, after apply above these steps, anyone can easily learn how to add Menu and design it in ASP.Net with SKOTechLearn.