Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Creating A Simple Horizontal Menu Using Css
Mystixs
post Jan 27 2007, 03:08 AM
Post #1


Member [Level 1]
****

Group: Members
Posts: 57
Joined: 23-January 07
Member No.: 37,683
Hello!

This tutorial will teach you how to make a simple Horizontal Menu using CSS.
For a demo of what it looks like visit: http://chesspieces.byethost9.com/Dragon%20Designs/

Anyway, enough of this, lets get started on the tutorial.

First lets add the HTML part of the menu.
CODE

<html>
<head>

</head>

<body>

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

</body>

</html>

What this does is setup the VERY basic look of the navigation. It has 5 links, each link goes nowhere. You have to specify were it goes yourself.
Now the "div id" stuff identifys the menu so the CSS will work.

Now, lets add the first part of the CSS.

CODE

<html>
<head>
<style type="text/css">
#navigation       {
               list-style: none;
               margin: 0;
               padding: 0;
            }
</style>
</head>

<body>

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

</body>

</html>

This CSS code just specifys the basic layout of the navigation.
Lets add the second and third parts of the CSS.

CODE

<html>
<head>
<style type="text/css">
#navigation       {
               list-style: none;
               margin: 0;
               padding: 0;
            }

#navigation li       {
               float: left;
            }

#navigation li a  {
               display: block;
               background: #3366AA;
               width: 179px;
               text-align: center;
               color: white;
               padding: 3px 0;
            }
</style>
</head>

<body>

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

</body>

</html>


The "#navigation li" tells that the links inside <li> and </li> tags to float to the left. If you changed "float: left;" to "float: center;" it would not be a horizontal navigation. It would be a vertical CSS menu.

The "#navigation li a" tells the general look of the navigation. The code "display: block;" makes it so the menu is in blocks.
The Background tells the background color of the menu.
The width specifys how wide each button is.
Text align center tells it to align the text center.
The color tells what color the text will be.

Now add the final CSS.

CODE

<html>
<head>
<style type="text/css">
#navigation       {
               list-style: none;
               margin: 0;
               padding: 0;
            }

#navigation li       {
               float: left;
            }

#navigation li a  {
               display: block;
               background: #3366AA;
               width: 179px;
               text-align: center;
               color: white;
               padding: 3px 0;
            }

#navigation li a:hover     {
               background: #6699CC;
               border-type: solid;
               border-color: white;
               color: white;
            }
</style>
</head>

<body>

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

</body>

</html>

(list)

Go to the top of the page
 
+Quote Post
Autumn
post Feb 5 2007, 05:34 AM
Post #2


Member [Level 1]
****

Group: Members
Posts: 50
Joined: 5-February 07
Member No.: 38,291
Well done.

I'm sure most people now are moving on to the graphical menus that they can create in photoshop and just slice up, but it's always nice to see someone code their own.

I like to do that, although I have to admit, my latest site has a graphical menu. The look of it is just more filling for the site.

Nice job, though!

(list)

Go to the top of the page
 
+Quote Post
matak
post Feb 5 2007, 06:12 AM
Post #3


Super Member
*********

Group: Members
Posts: 413
Joined: 4-October 06
From: Psychedelic Realms
Member No.: 31,079
If you want to add graphic to this menu you could do it like this

CODE
#navigation li a  {
               display: block;
               background: url(path/to/image) top right no-repeat;
               width: 179px;
               text-align: center;
               color: white;
               padding: 3px 0;
            }

#navigation li a:hover     {
               background: url(path/to/image_hover) top right no-repeat;
               border-type: solid;
               border-color: white;
               color: white;
            }


I haven't tested it but it should work... You need to be smart when creating images. This images are aligned top right, so make them "top right" images (search for sliding doors technique)

(list)

Go to the top of the page
 
+Quote Post
Autumn
post Feb 5 2007, 08:27 PM
Post #4


Member [Level 1]
****

Group: Members
Posts: 50
Joined: 5-February 07
Member No.: 38,291
Theoretically, it should work.

There might be a complication with Internet Explorer, but that's expected when using code like that. I figure by using a completely graphical menu, you save the risk of browser complications.

(list)

Go to the top of the page
 
+Quote Post
DjLuki
post Feb 5 2007, 09:56 PM
Post #5


Super Member
*********

Group: Members
Posts: 447
Joined: 2-March 05
Member No.: 4,094
how would you go about if you wanted to add submenus to this navigation? i'm trying to make one but i can only get the menu like this one, except my code is a bit different, im not using the list tags.. what i mean by submenus is when you hover over a button, the other buttons/links drop down below. i have look at many codes for this but i don't understand any of them.

(list)

Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 5 2007, 10:09 PM
Post #6


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 3,993
Joined: 24-July 05
From: In Trouble Again... still?
Member No.: 9,787
Spam Patrol
Go to http://www.cssplay.co.uk and look at the Menu demos they have. Most of them are cross-browser and standards compliant. Pick one you like and after reading the author's comments, (some of the menus are restricted), do a view > siurce and copy the code into your page. smile.gif
It helps to have the knowledge of css and html to do this, though. If you need help, start a topic in the html/css sub-forum.

(list)

Go to the top of the page
 
+Quote Post
DjLuki
post Feb 5 2007, 10:15 PM
Post #7


Super Member
*********

Group: Members
Posts: 447
Joined: 2-March 05
Member No.: 4,094
yea i have already been to that site and have tired their codes but it messed up the one i have..i already haev a topic started but people are only giving me links, which i can't seem to get these codes to work with mine.. i will post mine up and see if anyone can help me.

(list)

Go to the top of the page
 
+Quote Post
Autumn
post Feb 5 2007, 10:32 PM
Post #8


Member [Level 1]
****

Group: Members
Posts: 50
Joined: 5-February 07
Member No.: 38,291
You could try:

www.apycom.com

If you wanted to do your own, you'd need a fair bit knowledge on HTML/CSS and JavaScript. I'm sure they can be completely scripted without Java, but it might be a little easier to use a bit of it.

I used to like menus like that, but I find that sometimes they're just annoying. I'll probably end up using one again soon on my newer designs. We'll see how it goes!

(list)

Go to the top of the page
 
+Quote Post
DjLuki