Jump to content
Killersites Forums

Expanding div width?


joomlavideos
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...