Dropdown Menu Question
- Started
- Last post
- 16 Responses
- OSFA0
Thanks guys!
- OSFA0
- do you have a link we can use to alter the css?bulletfactory
- OSFA0
- zr0
stu nicholls has endless variations:
http://www.cssplay.co.uk/menus/
- OSFA0
Bump?
- OSFA0
Really d_rek? so... would you happen to have any samples, code or tutorials to achieve this? Thanks!
- Gordy220
OSFA - jQuery is your best bet. Have a gander on Smashingmagazine and noupe - both have sections on them there
- BattleAxe0
I would go with a pure CSS one , no need for jQuery if you just want drop downs
http://www.devinrolsen.com/pure-…
use jquery if you are looking for smooth transitional animations like fade in , fade out
- ckentish0
pure CSS all the way - no need for javascript
- seeessess0
here's a super simple one I threw together for you in 6 minutes, it'll not work in IE6 (but can with some jiggery pokery).
- OSFA0
Ok, another question, specially for you seeessess.... I have a menu bar and it needs to fit within 760pxls. The issue is that some menu categories are short like HOME and others longer like SPECIALS & PACKAGES ... and I have 8 categories.
How could I make them all fit and distribute their width evenly? Thanks!
- make each of the top level <li> 95px and the nested ul li whatever width you want subnav to bebulletfactory
- OSFA0
but what if they are wider than 95px? I was talking about the actual Main nav having to fit...
- d_rek0
@ckentish,
you're correct - this can be achieved pretty easily w/ pure css. Javascript/jquery if you want to get fancy with transitions/animations.And yes I know spry is javascript but i can remember trying to tool around with it and having no luck with it. Again... it's WHACK I SAY WHACK.
- bulletfactory0
setting a specific width will allow titles to wrap (increasing the height of your menu).
you could try reducing the size of the type via CSS (which might get tiny)
or make the menu in photoshop ensuring that each item is 95px. This solution will necessitate using something like the text-indent property to hide the HTML text so it's not on top of your image.