Welcome to WebmasterWorld Guest from 18.205.246.238

Forum Moderators: not2easy

Message Too Old, No Replies

Tableless Drop Down Menu

CSS Only, No JavaScript

     
3:21 am on Sep 26, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0



I have a site with a menu that needs a couple of sub-menus and I found this code on some site but the sub-menus have tables inside the UL and LI tags and I have noticed a few times that when I load my site it first loads all the content of my UL and it does not load any styles until the whole UL is loaded

Is it possible that the tables are causing a slow drop-down menu?

Is there any tableless CSS drop down? thank you.

5:03 am on Sept 26, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Aug 16, 2005
posts: 240
votes: 0


There is no reason why you should be using tables as part of a dropdown. Try this code:
<select name="fieldname" class="menu" id="mymenu" >
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="2">option 2</option>
</select>
6:59 am on Sept 26, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0


but isn't the SELECT tag for forms rather than making a navigation menu for my site?
9:01 am on Sept 26, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2001
posts:1185
votes: 16


>>Is there any tableless CSS drop down?

Yes, of course. There are thousands of sites using them and hundreds of sites offering sample code, as you will see using your phrase above to search your favourite engine.

Your tables shouldn't be affecting the display (although validate your code) but if you are using an external style sheet it may be loading slowly for some reason?

10:04 am on Sept 26, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 29, 2000
posts:12095
votes: 0


What if you want drop down menus across a top navbar for several categories? Like

Coffee ¦ Tea ¦ Soda

with options for things like decaf, flavored, herb tea, cola, root beer, etc., having a few options under each category. Would it take a separate div id= for each of the categories?

10:19 am on Sept 26, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


but isn't the SELECT tag for forms rather than making a navigation menu for my site?

That's exactly right,

select
is for forms.

Is there any tableless CSS drop down

You can have tableless navigation, you can achieve this with CSS, but you'll have to incorporate a little javascript.

As for the CSS part itself, you can search on Google for css dropdown.

5:08 pm on Sept 26, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0


Well I guess I will need to get back to using JavaScript since stupid IE isn't fully CSS compatible (as always).

Thanks guys.

5:26 pm on Sept 26, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Would it take a separate div id= for each of the categories?

No, at least not unless you actually want to format each dropdown differently (say color or background image icons)

you can target sublists of lists just by using the main parent list ID and specificity