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
Views: 44983
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

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 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 eBook 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 .NET Standard and the upcoming C# 8.0 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 Purchase this eBook at a Discounted Price!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
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


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by ravi on Monday, April 21, 2014 6:33 AM
This is very nice article for get more related to jquery menu use this link

http://www.dotnetnukes.blogspot.in/2014/04/jquery-menu.html

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook