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

Posted by: Minal Agarwal , on 7/12/2009, in Category Expression Web
Views: 26046
Abstract: In our previous article, we learnt how to create the Horizontal Navigation Menu from CSS lists. This article would help you transform it into a beautiful and professional navigation bar.
Create and Stylize Horizontal Navigation Menu from CSS lists using Microsoft Expression Web 2 (Part II)
 
In our previous article, Create and Stylize Horizontal Navigation Menu from CSS lists using Microsoft Expression Web 2 (Part I) we created a basic horizontal navigation bar from an ordered list. But it did not resemble to a navigation bar at all. Well that was because we still have to stylize it and create links to make it function like one. In this part of the article we would create hyperlinks and stylize them. 



Create hyperlinks
The navigation bar now looks like: 
List_2
 To insert a hyperlink, select the first item. In this example, select Home and either right click and choose hyperlink from the menu or key in the shortcut ‘CTRL+K’ to launch the ‘Insert Hyperlink’ dialog box. The ‘Text to display:’ field will already contain ‘Home’ (if not, do type in). Then enter the URL of the page you want to link in the ‘Address:’ field. You can also add a ‘Screen Tip’ if you like. Click Ok to complete. Create other links in the same way. Read Creating Hyperlinks and applying Styles to them in Microsoft Expression Web to know more about hyperlinks.
Stylizing the links
1.    In the Apply/Manage Styles task pane, click ‘New Style’. In the ‘New Style’ dialog box, in the ‘Selector’ box, type ‘#top_nav a’.
 
2.    Choose the existing style sheet in the ‘Define in’ box and browse to the style sheet in the URL box. Also check the option ‘Apply new style to document selection’.
 
3.    We will now style the hyperlinks (<a> tag) by setting different properties in each category listed on the left of the dialog box:
 
a.    Font – Select a font from the list of font-family (Arial, Helvetica, sans-serif). Set the font-size to 12px. Choose a color for the links in the ‘color’ box (#FFFFFF). I do not like my links in the navigation bar with an underline, so I will get rid of those lines by checking the box next to ‘none’ under the text-decoration.
 
b.    Layout – Choose the ‘display: block’.
 
c.    Borders – To set a border choose the width. I prefer to enter an integer in pixels, since it would be rendered in a similar way in all the browsers. Set a 1px border. With solid style and black in color.
 
d.    Box – We would like to set padding and margin for our navigation bar. Deselect the option ‘Same for all’ for both padding and margin. Type in 5 and choose pixels from the drop down for right and left padding. Add a right margin of 2 px.
 
e.    Background – Set a background color (#666666).
Your navigation bar would now look like this: 
NavigationBar_1
4.    Next we would stylize the hover event of the <a> tag to change the appearance of the links on mouse over. For this, create a new style and type in ‘#top_nav a: hover’. Then you can choose the properties to help the link to stand out from the other links in the navigation bar. This would tell the user that his has rolled the mouse over a link.
 
a.    Font – Increase the size of the font (15px) and change the color (#000000), since we would change the color of the background too.
 
b.    Background – Add a different background color than the original (#FFFFFF).
And we are done. Save your page and hit the preview in browser key. Your navigation bar would look exactly like it looked in above picture. Move your mouse pointer over any one of the links and bingo! 
NavigationBar_MouseHover 
I hope you enjoyed this tutorial as much as I enjoyed doing it. So get creative and create beautiful pages.
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 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 Explore the Table of Contents or Download Sample Chapters!

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!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook