 |
Website Basics: Creating Simple Navigation Menus, Both Horizontal and Vertical HTML/CSS Navigation Menus |
 |
Member Login
Welcome
Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.
In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.
 |
Zymic Webmaster Forums Zymic Free Web HostingTutorials |
 |
  |
 Mar 12 2012, 07:27 PM
Post
#1
|
|
 Outrageously Uber Ninja  Group: Members Posts: 840 Joined: 30-March 08 From: Cincinnati, OH Member No.: 16,073  |
In order to have a successful website people need to be able to navigate your site quickly and effectively.
There are many different ways to create a navigation menu but today we will learn how to create a horizontal navigation bar as well as a vertical navigation menu. First let's get ready to code. Let's open up Komodo (a free HTML editor my personal preference) and create a new document called horizontalnav.html. (You can name this file anything you would like just make sure it ends in .html) Save this file and minimize it. DO NOT CLOSE THE WINDOW! Now that you are a website designer you need to learn to multi-task and work with multiple windows.  Open up a copy of firefox and go to file open. Navigate to horizontalnav.html and open it. You will have a blank screen. [imghttp://www.sharpielovers.com/Tutorials/HorizontalNav/open.png[/img] Switch back to Komodo and let's get started! Now we are ready, A navigation menu is essentially a list because of this we are going to use a html elment called an unorganized list to create the navigation. In html an unorganized list is represented by the tag <ul></ul>. And each item inside that list is recongized by the tag <li></li>. Let's create our structure with 6 list elements. The Structure: CODE <!DOCTYPE html> <html> <head> <title>Horizontal Nav</title> </head> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#1">About Us</a></li> <li><a href="#2">Tutorials</a></li> <li><a href="#3">Forum</a></li> <li><a href="#4">Contact Us</a></li> </ul> </body> </html> Notice that INSIDE the <ul></ul> tag lies the individual links. Save this and refresh your web-browser. You know have links like so,  Your Horizontal navigation menu is just about done! Now we just need to add some CSS styling to make it look a bit better! Open a new document in Komodo and call it style.css. In the head of your section make sure your page is linked with style.css. CODE <!DOCTYPE html> <html> <head> <title>Horizontal Nav</title> [color="#FF0000"]<link href="style.css" rel="stylesheet" type="text/css" />[/color] </head> Now let's apply some basic style. CODE ul{ margin:5px; } ul li{ width:150px; /*Allows you to set the width of each box*/ height:25px; /*Allows you to set the height of each box*/ text-align:center; /*This Centers the text horizontally*/ padding-top:2px; /*This Centers the text vertically*/ background:blue; /*sets the color of the box*/ list-style:none; /*removes the bullets that auto populate with a list*/ float:left; /*allows the navigation menu to be horizontal*/ margin:5px; /*adds space in between each box*/ } ul li a{ color:#fff; /*defines the color of the text*/ text-decoration:none; /*removes the underline automatically on all links*/ } And that's it! Your own navigation menu!  Now if you want your navigation menu to be vertical all you have to do is change your style.css! CODE ul{ margin:5px; } ul li{ width:150px; /*Allows you to set the width of each box*/ height:25px; /*Allows you to set the height of each box*/ text-align:center; /*This Centers the text horizontally*/ padding-top:2px; /*This Centers the text vertically*/ background:blue; /*sets the color of the box*/ list-style:none; /*removes the bullets that auto populate with a list*/ margin:5px; /*adds space in between each box*/ } ul li a{ color:#fff; /*defines the color of the text*/ text-decoration:none; /*removes the underline automatically on all links*/ } Simply remove the float:left; and there you go! Enjoy! Please feel free to ask questions. Kevin DiGennaro Owner/Founder DiGennaroDesigns.com |
 |
 
|
|
Aug 1 2012, 11:36 AM
Post
#2
|
|
|
Newbie Group: Members Posts: 3 Joined: 1-August 12 Member No.: 251,129 |
Nice tutorial,
thanks for sharing such a nice tutorial, |
|
|
|
|
Nov 14 2012, 08:12 AM
Post
#3
|
|
 Newbie Group: Members Posts: 2 Joined: 14-November 12 Member No.: 263,959 |
Very nice tutorial for html and css file. This is useful for developing a menu bar in a web page with hyperlinks. Thanks for your precious time for sharing this.
|
|
|
|
|
Nov 28 2012, 07:25 AM
Post
#4
|
|
|
Newbie Group: Members Posts: 13 Joined: 15-November 12 Member No.: 264,072 |
|
|
|
|
|
Nov 30 2012, 03:08 AM
Post
#5
|
|
|
Newbie Group: Members Posts: 11 Joined: 18-October 12 Member No.: 260,781 |
You tone seems like a professor
 You are knowledgeable. ------------------------------------------------------------------------------------------------------------------------------------------ Top Affiliate Programs|Today's free android app |
|
|
|
|
Feb 22 2013, 05:54 AM
Post
#6
|
|
|
Newbie Group: Members Posts: 4 Joined: 25-August 12 From: India Member No.: 253,923 |
Navigation is the most important element of web designing. It is very important to create right navigation in website that make an easy way for user to reach each and every page easily. This tutorial is really very useful for me to know the different way to create navigation menu in website. Thanks for sharing this information here.
|
|
|
|
|
Mar 5 2013, 07:00 AM
Post
#7
|
|
|
Newbie Group: Members Posts: 28 Joined: 21-February 13 From: Pakistan Member No.: 274,244 |
It is an informative post. thanks for sharing .Now a days the development needs such tutorials.
|
|
|
|
| |
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users) |
|
| 0 Members: | ||
|
Forum Jump |
|
| Lo-Fi Version | Time is now: 22nd May 2013 - 12:07 AM |