Navigation with style

Frankiiei · #1 Sep 25th, 2007, 08:26

Hi guys, I have decided that I want a navigation at the top, underneath my title, but i want each section in a 'box' if you understand me. If possible I also want a drop down menu on each section. Thanks Frankiiei x

Blake121 · #2 Sep 25th, 2007, 10:05

What exactly is your question?

Frankiiei · #3 Sep 25th, 2007, 10:18

I want the navigation to be across the top of my webpage but each topic e.g 'houses' or whatever to be in like a box, and when you put the cursor across it, you get a drop down menue?

ssnerdy · #4 Sep 25th, 2007, 11:01

You may need to use a javascript for the drop down menu effect, try searching google for drop down menu javascripts, they will come with tutorials on most sites so are easy enough to use.

Frankiiei · #5 Sep 25th, 2007, 11:16

what if i just went for a navitagtion at the top, instead of having just the 'links' i want the text inside 'boxes'

Blake121 · #6 Sep 25th, 2007, 11:21

You can do that with CSS.

take a look at this site: http://www.cssplay.co.uk/menus/

It shows a lot of styles you can apply to menus.

demonzmedia · #7 Sep 26th, 2007, 03:02

The standards compliant way of doing this would be to use a suckerfish -

>> Make a Suckerfish

This is a very simple method. It allocates a css class to a list which is hidden and swaps it to a css class which displays on rollover as a javascript event, however for accessibility reasons dropdown menus can be problematic
_________________
Web Design Sydney, Demonz Media

Lchad · #8 Sep 26th, 2007, 12:09

There is no need to use Javascript for a drop down menu. Suckerfish is an easy example but not the best.

Use the link that Blake provided. There are so many ALL CSS drop down menus there.

Frankiiei · #9 Sep 26th, 2007, 16:02

Ok i have gone off the idea of the drop down menu. I just want a menu that has boxes aroud the text, and you click on the box not the text. Would i find that in the same link, I do not know what it is called.
Thanks you

karinne · #10 Sep 26th, 2007, 16:37

Yes

it's basically just making sure you have the display: block; property with a width and height added to the a { }

Something like this

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    #navigation{
        padding-top: 10px;
        margin-bottom: 20px;
    }

    #navigation ul {
        list-style: none;
        display: inline;
    }

    #navigation ul li {
        float: left;
        position: relative;
        margin-right: 5px;
    }
    
    #navigation ul li a {
        text-decoration: none;
        display: block;
        font-size: 17px;
        letter-spacing: 1px;
        font-weight: bold;
        color: #fff;
        padding: 0 20px;
        background-color: #060;
    }

    #navigation ul li a:hover {
        background-color: #900;
        
    }
    </style>    
</head>

<body>

<div id="navigation">
    <ul>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
        <li><a href="/">menu</a></li>
    </ul>
</div>

</body>
</html>

Monie · #11 Sep 27th, 2007, 05:11

This type of question can get hundreds of answer.
Try google them!

just a minute....
.....................

ahh, there you are, I found you!

CSS Drop Down Menu Tutorial Code

The Example

mamaphoenix · #12 Sep 27th, 2007, 15:01

Just be sure to test it on multiple browsers before you go live with it

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
My navigation style	TheSealPortalTeam	Graphics and 3D	12	Jan 23rd, 2008 17:30
style	MetallicWarfare	Starting Out	12	Aug 13th, 2007 09:00
How to tell IE7 to use a pariticular style in a single style sheet	figo2476	Web Page Design	5	May 25th, 2007 14:23
List style / rollover image navigation disappears in IE on the Mac	eskymo	Web Page Design	5	Mar 1st, 2006 00:43
Just for style?	timmytots	Web Page Design	4	Nov 17th, 2005 21:01

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Navigation with style