Jump to content

Left Side fold-out Navigation


Recommended Posts

Hello,

 

I am designing a website and the left side buttons are already created, and the ones I want to keep. But what the site is about is an online book, the site itself is going to have the 200 chapters book on it. The left side buttons are the categories of the Chapters and each category will have about 10 Chapters.

 

So what I need is a left side fold-out menu so that when you put your mouse over a button it would have a menu that folds out on which all the chapters would be to the right of the button where you could run your mouse over the menu. And I would like also to be able to change the font color and menu color to match the top navigation menu thats already on the site. In other words I want the left side navigation menu to end up matching the colors of the top navigation menu.

 

Does anyone know of a place online where I could get a code for that? And it would need to be free of cost too.

 

Also the buttons are 117 X 75 if that makes any difference.

 

Can anyone help me?

 

Claudia

Edited by claudiathompson
Link to comment
Share on other sites

It sounds as if you want a fly-out menu. Have a look at any fly-out menus here:-

http://www.cssplay.co.uk/menus/

like

http://www.cssplay.co.uk/menus/flyoutt.html

Look at the CSSplay page source code and copy a section from the head section style tag or in the case of the example above from a stylesheet called css/flyout.css and also the markup code in the body section, then edit as you want.

 

That example also has a conditional comment for IE6 so you also need

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]-->

and download ans save the file css/flyout_ie.css

Edited by Wickham
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...
×
×
  • Create New...