How To Create Css Menu In Asp Net

Create and Stylize Horizontal Navigation Menu from CSS lists using Microsoft Expression Web 2 (Part I)

Posted by: Minal Agarwal , on 6/14/2009, in Category Expression Web

Abstract: In this article we will learn how to transform a list to create a basic navigation bar.

Create and Stylize Horizontal Navigation Menu from CSS lists using Microsoft Expression Web 2 (Part I)

You can easily create a vertical navigation menu from a CSS list. But a horizontal CSS menu from a list, how can I do that? Well, yes a list could be converted into a horizontal navigation menu and in simple steps. You could do that with an existing list or create a new list in your web page. The list could be ordered or unordered. Since your navigation menu cannot contain numberings or bullets, we will have to change that anyway. A navigation bar will help the visitor navigate through various pages in your website. If you have listed all the links that you would like to have on the navigation bar, you need not disturb the list to put it onto the bar. Just add a couple of styles to it and your job would be done. Let us begin.

We will cover this topic in two parts to help you understand the subject in a better way. In first part we will learn how to create a list and create a basic horizontal menu. And in the next part, we would cover the linking and stylization portion.

Create a Horizontal Navigation Menu using CSS lists

First we will add a <div> to our page, which will serve as the container for the Navigation bar.

1. In the Design View, drag the HTML tag <div> from the Toolbox, onto your page. This would be your '#top_nav' <div>.

2. The list is to be added into this div. So go to the Common toolbar and click on Order_List_1 to create an 'Ordered List' or on Order_List_2 to create an 'Unordered List'. Start adding the list items. In this example we will create an <ol>. The list would look like:

List_1

Next step would be to remove its numbering/markers. We will create a style rule for the list; <ol> (Ordered List) or <ul> (Unordered List).

1. Go to the Apply/Manage Styles task pane, choose 'New Style'. In the 'New Style' dialog box, in the Selector box, enter '#top_nav ol'. By doing this, we are telling CSS to style only <ol> (Ordered Lists) which are in the #top_nav <div>. Choose to define the style in the Current Page, New Style sheet or Existing Style sheet.

NOTE: This example defines a style in the current page since this is just a demo page. But it a good practice to have a separate external style sheet for each project.

Also check the box–'Apply new style to document selection', to apply the style to the selected <ol> tag.

2. Choose the following properties and set its values to:

· List – list-style-type: none.

· Position – width: 100%.

· Box – padding: 0px and margin: 0px.

New_Style

Next we need to create a style to control the list. So we will create a style '#top_nav li' for the <li> tags inside the #top_nav <div>

1. Go to the Apply/Manage Styles task pane, choose 'New Style'. In the 'New Style' dialog box, in the Selector box, enter '#top_nav li'.

2. Under the 'Layout' category, set float: left and click OK.

The list would now look like:

List_2

Our next step would be to stylize this text, add hyperlinks and make it look like a Navigation bar and not merely some text in horizontal line. We have covered a basic tutorial about Creating Hyperlinks and applying Styles to them in Microsoft Expression Web. But in our next article we would cover these aspects in detail, with respect to the Navigation bar. I hope you enjoyed reading this article.

If you liked the article, Subscribe to the RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there's always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke