CSS for menu

	Home Register Search Help Login

Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS for menu

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> CSS for menu

Page: [1]


chris_wolfe Posts: 12 Joined: 8/25/2005 Status: offline	CSS for menu - 8/25/2005 6:42:19 Hi Im trying to create a site at the moment and am getting a bit confused. The main page is made out of frames with a menu on the top frame. When one of the links is clicked on it opens up the appropriate page on the bottom frame. I want to use a sub menu on the left hand column on the page. So far i have done it using frontpage drawings and positioning but it is alot of code and im sure it could be done simpler using css. Here is the link for the page: http://www.beardedgroove.co.uk/Links/labellinks.htm The orange box is the one i would like to create using css. The only problem is i dont really understand how to do it. Can i use css to do it? If so does anyone have any suggestions or can someone point me in the direction of a good tutorial which will help. Thanks Chris

Tailslide

Posts: 6370
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

RE: CSS for menu - 8/25/2005 6:55:04

Oh yes - CSS will do nicely for that!!

What you need to do is put your links into a list like this:

<ul id="navlist">
  <li><a href="item1.html">Item One</a></li>
  <li><a href="item2.html">Item Two</a></li>
  <li><a href="item3.html">Item Three</a></li> 
</ul>

Depending on your overal structure (tables/CSS) you could either stick a <div> around the whole navlist (let's call in "navigation") and put the yellow box as a background image to that div - or I suppose you could do the same for the table cell (not sure about tables any more)

#navigation {background url (images/yellowbox.gif) top center no-repeat;

Then you just style your <li> links however you like:

#navlist a {color: blue; text-decoration:none;}
#navlist a:hover {color:red; text-decoration:underline;}

Or whatever.

There's an excellent site that goes into depth about CSS navigation amongst other things - I recommend you pay it a visit: http://css.maxdesign.com.au/

_____________________________

Little Blue Plane Web Design | Land Rover project

(in reply to chris_wolfe)


davidrandall Posts: 82 Joined: 7/28/2005 Status: offline	RE: CSS for menu - 8/25/2005 6:57:54 Hi Chris, firstly, I'd try to avoid frames like the plague as they're very outdated. For CSS menus, have a look at http://css.maxdesign.com.au/index.htm Dave (in reply to chris_wolfe)


womble Posts: 5721 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: CSS for menu - 8/25/2005 7:10:31 There's also these which are pretty good: http://e-lusion.com/design/menu/ http://css.maxdesign.com.au/listamatic/ http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to davidrandall)


Tailslide Posts: 6370 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: CSS for menu - 8/25/2005 7:20:44 Did we all give him the same link? _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to womble)


womble Posts: 5721 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: CSS for menu - 8/26/2005 6:24:13 I think so. I've only just realised Listamatic's the same as the maxdesign one both of you have already given - obviously didn't read the previous posts very well - I claim insanity as my defence. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to Tailslide)