how to design drop down links

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

how to design drop down links

Post by adsegzy »

Hello there,
Am designing a site and i need to categories my links into groups to that i wont have too much links everywhere. for example, once the mouse is moved over SERVICES button, the SERVICES button should drop down the list of all available services in which a visitor can click one of the services to read. Pls how do i do this?

Regards
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: how to design drop down links

Post by aravona »

I have just done something very similar to this, only horizontally (after much effort :) )

I used a premade CSS and javascript code and then using <ul> and <li> tags in html. There are plenty of premades and tutorials out there :)
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

Re: how to design drop down links

Post by adsegzy »

Hello aravona

can you pls give me the example of the code
regards
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: how to design drop down links

Post by pickle »

I wouldn't rely on any technique that requires Javascript to work. What happens then if the user viewing your site doesn't have Javascript?

There are CSS only options. Google for "CSS Drop down menu". The basic premise is you make an unordered list. Inside each list element is a second unordered list that becomes the drop down. The second unordered list is hidden until the list item is hovered over.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: how to design drop down links

Post by social_experiment »

Found this in my code repository.
Attachments
dropdown.rar
css based dropdown list, html and css file.
(1.41 KiB) Downloaded 207 times
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: how to design drop down links

Post by daedalus__ »

alistapart.com has a fantastic article about this: http://www.alistapart.com/articles/horizdropdowns/
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: how to design drop down links

Post by aravona »

I never got alistaparts working when I tried it a few months back - theres a tonne of premade packages on dynamicdrive.com tho :)
Post Reply