• Gender: Male
  • Registered: 2009-07-30
  • Posts: 20

Topic: Expanding div width?

I would like to create a menu like the Joomla default menu in rhuk_milkyway.

The way this menu is set up, the two "endcaps" of the menu move out as the width of the menu content increases. This is done with the tables that Joomla generates through the menu manager. I understand that concept and how the table can grow.

My question is: can this be done with CSS and DIVs instead? I always thought you had to specify a width in a div otherwise it would expand the entire width of it's containing div.

I know I can create nested divs that hold the "endcaps" and ultimately the menu contents, but again, the div would expand without a width declaration.

Thanks!

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: Expanding div width?

This is the sliding doors method where you have one small image for the left end
http://www.cssplay.co.uk/menus/left_both.gif
and another for the middle with a right end
http://www.cssplay.co.uk/menus/right_both.gif
which slide over each other to whatever width you want. The images are large in the links above but reduced in size in the finished menu
http://www.cssplay.co.uk/menus/sliding_doors.html

CSSplay has hundreds of CSS menus, the sliding doors ones use the above principle.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: Expanding div width?

FYI, the two image links above don't seem to work... I get "403 Forbidden" errors.

This link explains the technique above in greater detail:
http://www.alistapart.com/articles/slidingdoors2/

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: Expanding div width?

falkencreative wrote:

FYI, the two image links above don't seem to work... I get "permission denied" errors.

This link explains the technique above in greater detail:
http://www.alistapart.com/articles/slidingdoors2/

That's strange, they work for me in Firefox if I right-click Open in new tab. If they don't work, you can look at the cssplay example and use Firefox Tools, Page Info, Media to see them.