Add to Google

Creating A Simple Horizontal Menu Using Css

Pages: 1, 2
free web hosting

Read Latest Entries..: (Post #12) by jlhaslip on Feb 6 2007, 09:34 PM. (Line Breaks Removed)
I suggest modding the original code to place the list-style: none on the <li> element because with it placed on the ul, it displayed the bullets on the individual elements, but when used as an attribute on the <li>'s, they bullets went away. This might be a Browser specific behaviour, though. I don't know...CODE#navigation li       {  &nb... read more.
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion > CONTRIBUTE > Tutorials

Creating A Simple Horizontal Menu Using Css

Mystixs
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>

 

 

 


Reply

Autumn
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!

Reply

matak
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)

 

 

 


Reply

Autumn
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.

Reply

DjLuki
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.

Reply

jlhaslip
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.

Reply

DjLuki
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.

Reply

Autumn
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!

Reply

DjLuki
yea, i know html, not an expert but i can make a horizontal bar, and i know some css, but not enough to apply this waht i want.. and i don't like those javascript, where you have to click to see the submenus.. i want them to show up automatically when you hover.. i was going to put up my code but somebody closed my topic.

Reply

Autumn
You'd have to style it to automatically drop down. MouseOver should do it, I'd think.

Example:

CODE
onMouseOver =


etc...

I'm not 100% sure how to do it, exactly so I don't think I could be beneficial to you. I used to know most of it. Perhaps reading up on a tutorial or two will help. I'll PM you if I find one.

Reply

Latest Entries

jlhaslip
I suggest modding the original code to place the list-style: none on the <li> element because with it placed on the ul, it displayed the bullets on the individual elements, but when used as an attribute on the <li>'s, they bullets went away. This might be a Browser specific behaviour, though. I don't know...

CODE
#navigation li       {
               float: left;
               list-style: none;
            }

Reply

Mystixs
Oh, wow. I didn't notice this ever got posted... Sorry.

Now, seems everyone is helping him, but if you still have troubles I will try to make one with no or very little javascript for you.

Also, thanks for the comments. Been busy lately and haven't been able to get on the forums lately.
But, I am trying to come back smile.gif

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Pages: 1, 2
Recent Queries:-
  1. horizontal menu panel using css - 678.18 hr back. (1)
  2. creating a horizontal menu in photoshop - 1127.62 hr back. (1)
Similar Topics

Keywords : creating horizontal menu css

  1. Create Dynamic Html/php Pages Using Simple Vb.net Code - Taking your application data, and creating a webpage for others to vie (1)
  2. Getting Started With Amfphp And Rias - first steps in creating RIAs (2)
    AMFPHP in a short way is a library of php files that let u manage in JUST ONE FILE what u would do
    in many files like for example queries to mysql. So u can have tons of queries to mysql and all of
    them in just ONE FILE! so what is a RIA? a RIA is a Rich Internet Application commonly given
    to flash applications, not the animations or presentations we see daily on the internet but very
    useful and cool programs made in flash. the fisrt step u need to take is to download the AMFPHP
    library directly from its site at www.amfphp.org, in some free hosted sites the latest...
  3. How To Start Your First Game Project - The first steps to creating your own game! (0)
    Ok, I see alot of questions around the game development forums of people wanting to make their first
    game, but they don't know where to start. So, I decided to write this tutorial, having been in
    the same situation before. NOTE: This Tutorial: -Is meant to help you get past that initial bout of
    developer's block -Does not teach you how to make a game, just help you start -Cannot help you
    if you cannot answer the questions asked So, let's get to it, shall we? How to start
    your first game project: --So, the first thing you need to make sure yo...
  4. Reducing Windows Vista Start Menu Programs Response Time. - How to do it. (4)
    If you have been using Microsoft Windows Vista for quite some time, you would have noticed that
    installing a number of programs/softwares into your computer considerably slows down the response
    time of your start menu program folder, sometimes up to one second or more before the programs
    listed in a particular start menu folder is displayed. Worst of all, if you are trying to launch a
    program from you start menu which is within another start menu prrograms folder. Well, I have found
    a way to bypass this very annoying thing in Windows Vista. I have about 98 start menu en...
  5. Getting Started With Mysql - creating tables and insert data into them. (2)
    Hi in this tutorial you will learn how to create tables and insert items into them. First steps are
    to create the database - go into your cpanel and mysql databases, from there make an account and a
    database and then attach them together with all priviliges, call the database test and the account
    admin, with the pw as pass - or any other password. We need to connect to the database so first in
    your php file (probably named index.php) - this is how to do it. CODE
    mysql_connect("localhost", "admin", "pass") or
    die(mysql_error(&...
  6. Delete Files And Directories Using Php - following up from creating and writing (7)
    How To Delete Files and Directories follow up from creating them Hello all and
    welcome to my second tutorial involving file management. In my previous tutorial , I explained how
    to create, write and read files. In this tutorial I'll explain how to remove the files and
    directories you took so long to create. I did not explain last time how to create directories as I
    did not know, now I do, you can use the mkdir() function. Now with this tutorial.... Removing
    Files Removing files can easily be done with the unlink() function: CODE <? un...
  7. Creating A Timer Program - Using Visual Basic 2005 (8)
    This tutorial will explain how to create a basic timer using Visual Basic Express 2005. If you
    don't have it, it's free and you can dowload it from Microsoft's website. All you need
    is a few minutes to sit down and read this and a version of Visual Basic. OK, so what will this
    timer actually do? Well, you are able to enter a number of minutes and a message, and then click a
    button. Once the timer is up, your message pops up and you are reminded! So, basically it's
    a little reminder system. I use it to remind me when TV programmes start, when I have to...
  8. Creating Navigation For Html Websites - Have a common navigation menu for the whole website! (12)
    Pre-requisite: HTML, inline frame tags 1 Attachment(.zip) included. Updates : 29-12-07: Doctype
    added in example files (Advised by jlhaslip) Designing a whole website takes a lot of planning
    and organization. Designing a proper navigation system is a basic step in building your website. If
    you are developing webpages in html you would have observed that as you go on creating pages it
    becomes difficult to maintain the links to the pages. This article will guide you in developing a
    common navigation menu for your website. It describes three ways, so if you don'...
  9. Creating A Resume - 10 Tips For Making A Resume (1)
    I've been working on my Resume for months now. Here is a summary of what I've learned: 1.
    Avoid referring to yourself via 1st person or 3rd person terms. Rather than saying "I started this
    job in" just say "Began job in"... Employers expect Resumes to be professional and avoid reference
    to oneself; and instead speaking in an impersonal tone that presents
    achievements/skills/experience/education without personalization. Avoid words like "I", "my", "he",
    "she", etc. Leave out personal pronouns and only use the action words/verbs. This also includes
    your Ob...
  10. Creating A Simple Image Viewer - Using Visual Basic 2005 Express Edition (4)
    I downloaded Microsoft's Visual Studio Express suite a few months ago, but only recently got
    around to installing it. I have been practising with Visual Basic and making some rather basic
    programs and utilities, but they contain most of the basic concepts. This tutorial will explain how
    to create a basic image viewer, and I will try to explain each step from beginning to end as clear
    as I can. To start you will need: Microsoft Visual Studio About 10-20 minutes free time OK,
    first open up the Visual Basic part of the Studio. I am using the 2005 Express version, so...
  11. Programming In Glut (lesson 4) - Creating 3D objects (0)
    Lesson 4 of 6. I hope you are enjoying them /laugh.gif" style="vertical-align:middle"
    emoid=":lol:" border="0" alt="laugh.gif" /> . QUOTE Hello, in this tutorial we will be creating
    a 3D pyramid. We are building this tutorial from Lesson 3, but I took out the 2D objects and placed
    a 3D pyramid in there instead. The 3rd axis for drawing can be a litle confusing, but after you get
    the hand of it you'll do fine. Now when you are setting a 3D vertex just remember that the
    camera is on the positive end of the z axis. So things that have a more positive z axis va...
  12. Programming In Glut (lesson 1) - Creating a windwo (0)
    This is the first of six lessons I am transferring from Astahost for programming in GLUT, and after
    the six I hope to make more, I hope you enjoy. QUOTE Hello, I'm starting a series on how to
    program in OpenGL using the OpenGL Utility Toolkit, a.k.a. GLUT. I chose GLUT because it is quick
    and easy to write, and very easy to learn. In this tutorial I am going to teach you how to create a
    basic window which we will build off of in later tutorials. Throughout the tutorial I will leave
    notes to let you know what each command does, and how you can modify it to fit...
  13. Creating Your Own Icon - (23)
    It is easy to create your own icon, just pick a bitmap (.bmp) file and change its extension to .ico.
    To do so, open the Windows Explorer, click on the View menu (or Tools in WinMe), click Folder
    Options, click View tab, remove the check on the "Hide file extensions for known files types"
    option, and then click OK. Select a bitmap file, press F2 key, and then change its extension to
    .ico. Have fun learning:)...
  14. How To Build A Pure Css Using Online Tools Tutorial (part 4) - Vertical Nav Menu (0)
    Step 4 Vertical Nav Menu The next step is to add in a basic rollover menu so I bring you to the
    following online tool: Menu Generator Now with this online tool you can not only create
    vertical but also horizontal rollover menus. Since we will be doing a Verticle menu we will keep it
    on that option. Now the next part is deciding if we want it fixed, relative, or absolute. If we
    have learned anything it is insane trying to make a absolute or fixed position work perfectly for
    all three browsers (IE, FF, Opera). So to keep our minds sane we will use relative,...
  15. A Guide To Css And Creating A Stylesheet - (15)
    Table of Contents: I. Introduction II. Starting your stylesheet --A. Starting syntax with
    font-family --B. Defining classes --C. Using classes III. The STYLE tag IV. Comments in CSS V. The
    "a" tag VI. A quick list of common attributes VII. Notes --A. Universal classes --B. Grouping --C.
    Multiple instances VIII. Finding other attributes IX. Closing I. Introduction Firstly, to begin
    using a stylesheet, you must have one. Open up your text editor and save as (something).css. I know
    NotePad doesn't need quotes for a stylesheet, but I'm not sure about other progr...
  16. Tutorial: Creating Custom Icons For Devices - Give that device a great icon every time you plug it in! (0)
    Ok for this tutorial I will use the PSP as an example of the device, this should work for every
    device. (THIS WILL NOT HARM ANYTHING AT ALL!) First off, open notepad and type in:
    ICON=ICONE.ICO Save that as AUTORUN.inf Now, find a picture you like.. make sure its dimensions
    are 16X16 pixels. Put it in the main folder of the device, for example, my psp is located at
    F:\, i would type in F:\ to the adress bar and put the picture in that folder, as it is
    the folder your computer automatically reads, anyways, put your picture in there and name it: ICO...
  17. Tutorial: How To Enable "view" Menu On Desktop ! - (0)
    Hi Guys! I always wondered why "VIEW" menu is not displayed on desktop, its displayed in each
    folder but not on desktop. I wanted to enable it on desktop so that I can set the desktop icons
    view, like Thumbnails, Small Icons, List, etc. Thats why yesterday I was playing with Shell32.dll
    file in Resource Hacker and found a way to enable it on desktop too after 2 hours r&d. So here we
    go: 1.) Open Shell32.dll file in Resource Hacker. 2.) Goto: Menu -> 215 -> 1033. 3.) In right-side
    pane, replace the line saying: CODE POPUP "&View", 28674, MFT_STRING, ...
  18. Php Menu Bulding Script And Site Template - available for download (0)
    A Php Menu-builder Tutorial This Sidebar Menu-builder code and the php scripts are adapted from
    a Tutorial on the Astahost.com Forum titled : CMS101 - Content Management System Design .
    Since the original tutorial's author (vujsa) did such a marvellous job of describing the system
    in the original Topic posting, I will not attempt to explain it here, rather, I invite you to have a
    look at his Topic and learn from it. The Basic tutorial provided coding for developing a table-based
    web-site template which used php includes and embedded data to create a &...
  19. How To:customizing Your Start Menu - Things like my music, my pictures etc.. (10)
    How to make it to where things like My Pictures; My documents; and My Music dont show in your start
    menu First off simple right click on the start button in the bottom left corner of the page and
    select properties, or open it up and right click somewhere in there and select properties. Now
    click on the Start menu tab then click on customize If you want to clear/permenatly clear the
    recently used program list click on the general tab and look down the window for Programs. once you
    are there you can hit the up or down button(2) to customize the amount of recently used ...
  20. Quick And Easy Font Instaler - from the right click menu! (4)
    I’m going to show you how to add a feature I feel Windows should have had from the get go, easy font
    install, after all what’s more exciting then using a font you have just downloaded in a new
    presentation or document. I’ll start off by saying that there are probably easier ways of doing
    this, perhaps even shell extensions you can install, however this tutorial can be modified by the
    user to do almost anything from the right click using an age old technology known as the batch file,
    or “.bat” for short, and what’s better all in 10 easy steps! There is a tutorial on...
  21. Creating Rollovers With Buttons - Short & simple javascript tutorial that shows you how. (2)
    Javascript in action can render some very neat visual effects, which can make your website more
    appealing, and sometimes even easier to navigate. Among the most common effects are the
    'button' effect, and the mouseover effect. The buttons are very common, of course; if
    nowhere else, most of us have seen them at the end of forms (Click the 'submit' button to
    proceed...). The basic idea is to have a 'depressible' object, which can give you the
    illusion that you're 'pressing' it when you click it. The rollover effect causes
    something to h...
  22. Add Copy To And Move To Functions To Right Click Menu - (3)
    In this tutorial i will explain how to put Copy to and Move to functions to right click menu... 1.
    Open registry editor...you can open it like this... START->Run...->type "regedit" hit Enter...
    2.find this directory... ->
    "HKEY_CLASSES_ROOT\AllFilesystemObjects\shellex\ContextMenuHandlers" 3.Create a
    new key in this directory... rename it to "Copy To" 4.Change it's value to this-> CODE
    {C2FBB630-2971-11d1-A18C-00C04FD75D13} 5.Create another key in the same directory...rename it to
    "Move To" 6.Change it's value to this-> CODE {...
  23. Moving And Adding Shortcuts To Your Start Menu - Tutorial for newbies (4)
    Do you have lots of programs in programs menu? and want a quick click solution?... so you don't
    have to chase down the program on the Programs Menu! For the example I'll use Notepad.
    Click on start->programs->Accessories and direct to Notepad and hold the left mouse button. Keep
    holding it, and move it to the area above the "Programs" and you'll see a dark "bar" appear.
    Slide the icon up and down, and the bar moves up and down. Release the mouse button, and the icon is
    now on Start Menu. And if you want desktop item to be add on Start Menu, use tutoria...
  24. Creating Personal Alarm - To remind you something (2)
    Creating Personal Alarm This personal alarm is very useful to remind you something or anything you
    would like it to do. Use Task Scheduler application to create your personal alarm. First, click on
    Start -> Settings -> Control Panel -> Scheduled Tasks. Now click on the Add Scheduled Task wizard
    in the Task Scheduler folder. Click Next, click the Browse button, and then select your favorite
    sound files (WAV/MP3/MIDI). Set the file to open as the task daily. Set it at the top of the hour
    every day, open up its advanced properties. On the Schedule tab press the Advance...
  25. Creating Your Own Php News System - (23)
    Hello, heres a simple tutorial from a script that I made to power my news system. It is written
    withthe PHP coding system and consists of 8 files using a flatfile based system, without MySQL
    databases. This should be usefull for those who want a simple little news manager and like to have
    simplcity without the fancy date strings and sutff. You can see a demo of it at my site @
    http://www.xeek.trap17.com . Let's Start! First let's start with the easy stuff,
    making the directory first, first create a main directory to hold everything, call this folder "ne...



Looking for Creating, A, Simple, Horizontal, Menu, Using, Css

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for Creating, A, Simple, Horizontal, Menu, Using, Css

*MORE FROM TRAP17.COM*
Create
Dynamic
Html/php
Pages Using
Simple
Vb.net Code
Taking your
application
data, and
creating a
webpage for
others to
vie
Getting
Started With
Amfphp And
Rias first
steps in
creating
RIAs
How To Start
Your First
Game Project
The first
steps to
creating
your own
game!
Reducing
Windows
Vista Start
Menu
Programs
Response
Time. How to
do it.
Getting
Started With
Mysql
creating
tables and
insert data
into them.
Delete Files
And
Directories
Using Php
following up
from
creating and
writing
Creating A
Timer
Program
Using Visual
Basic 2005
Creating
Navigation
For Html
Websites
Have a
common
navigation
menu for the
whole
website!
Creating A
Resume 10
Tips For
Making A
Resume
Creating A
Simple Image
Viewer Using
Visual Basic
2005 Express
Edition
Programming
In Glut
(lesson 4)
Creating 3D
objects
Programming
In Glut
(lesson 1)
Creating a
windwo
Creating
Your Own
Icon
How To Build
A Pure Css
Using Online
Tools
Tutorial
(part 4)
Vertical Nav
Menu
A Guide To
Css And
Creating A
Stylesheet
Tutorial:
Creating
Custom Icons
For Devices
Give that
device a
great icon
every time
you plug it
in!
Tutorial:
How To
Enable
"view&q
uot; Menu On
Desktop
!
Php Menu
Bulding
Script And
Site
Template
available
for download
How
To:customizi
ng Your
Start Menu
Things like
my music, my
pictures
etc..
Quick And
Easy Font
Instaler
from the
right click
menu!
Creating
Rollovers
With Buttons
Short &
simple
javascript
tutorial
that shows
you how.
Add Copy To
And Move To
Functions To
Right Click
Menu
Moving And
Adding
Shortcuts To
Your Start
Menu
Tutorial for
newbies
Creating
Personal
Alarm To
remind you
something
Creating
Your Own Php
News System
advertisement



Creating A Simple Horizontal Menu Using Css



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE