CSS cascade buttons - need some help here please

Thanks for looking,

here's the deal:

i got this menu on left:
http://www.koalasurfshop.com/

and client wants some cascade in some of these buttons, example:

surfboards - retros
- rounds
- new
- fish


etc

here's the menu CSS:

.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
width: 150px;
height: 20px;
margin-bottom: 2px;
padding: 10px 0 0 15px;
display: block;
background-image: url(Images/button.jpg);
color: #36393d;
text-align: left;
}

.menu a {
background-image: url(Images/button2.jpg);
color: #36393d;
}

.menu:hover {
background-image: url(Images/button2.jpg);
color: #36393d;
text-align: left;
}



keeping the menu as is, how can i add the cascade?

Any ideas?

 

'cascade in' ??? Do you mean have them open up as an accordion, flyout like a normal pop-out menu, or just inline them indented?

 

hey deathshadow

something just as this, but done in the menu i have.

http://www.javascriptkit.com/script/script2/verticalmenu.shtml

I know it's possible to get there, but i dont know how to.

 

hey css masters,

can someone help me on this one please? If needed i can pay for this as long as it gets done and with existing menu.

thanks so much

 

Well, the first approach is going to be to recode those existing menus into a LIST - right now they are for some screwball reason marked up as a paragraph. (but then, there's a LOT of stuff on that page that are not paragraphs marked up as such)... I would also axe ALL of those unneeded 'menu' classes since those should be doing jack - that alone is a miserable /fail/ of programming 101.

For example, that first 'menu' should likely use the html:

<ul class="menu">
  <li><a href="LojaOnline/Promocoes/promocoes.html">Promo&ccedil;&otilde;es</a></li>
  <li><a href="LojaOnline/PranchasSurf/pranchasdesurf.html">Pranchas de Surf </a></li>
  <li><a href="LojaOnline/PranchasBodyboard/pranchasdebodyboard.html">Pranchas de Bodyboard </a></li>
  <li><a href="LojaOnline/Fatos/fatosdesurfbodyboard.html">Fatos</a></li>
  <li><a href="LojaOnline/Capas/capas.html">Capas </a></li>
  <li><a href="LojaOnline/Leashes/leashes.html">Leashes </a></li>
  <li><a href="LojaOnline/Quilhas/quilhas.html">Fins</a></li>
  <li><a href="LojaOnline/Decks/decks.html">Decks </a></li>
  <li><a href="LojaOnline/PesdePato/pesdepato.html">P&eacute;s de pato </a></li>
</ul>

Code (markup):

changing the CSS to:

.menu {
	list-style:none;
	width:150px;
	margin:0;
	padding:0;
	font:bold 10px/30px sans-serif;
}

.menu li {
	clear:both;
	float:left;
	width:150px;
	margin:0;
	padding:0;
	position:relative;
}

.menu a {
	display:block;
	position:relative;
	height:30px; /* trip haslayout */
	margin-bottom:2px;
	padding-left:15px;
	text-decoration:none;
	color: #36393d;
	background:#CCC url(Images/button.jpg) 0 0 no-repeat;
}

.menu li:active a,
.menu li:hover a {
	background-color:#EEE;
	background-position:0 -30px;
}

Code (markup):

You'll notice I set the background color - that way if images are turned off, the page still has visual cues - you'll also notice I use only ONE button image. That image should be 60px tall and have one button placed ATOP the other - which means you can take an axe to that stupid malfing macromedia mm_ javascript rubbish.

The LI is set to float so that the block inside it doesn't cause a wierd 'doubled' height effect in IE while allowing us to have position:relative work in all browsers. We'll be using this in a while. I'm also trapping the LI for the active and hover states instead of the anchor so that while you are in the submenu it will stay lit.

I'd also axe the stupid images as text headers and just use a H2 for those... and probably axe the 'separator' and just put that as a border using a class on one of the anchors.

... and after this cleanup, THEN you can start working on the flyout menu.

Which to start with, we need to add the submenu item - I used the second menu item as the parent:

  <li>
  	<a href="LojaOnline/PranchasSurf/pranchasdesurf.html">Pranchas de Surf</a>
  	<ul>
  		<li><a href="#">Test Item 1</a></li>
  		<li><a href="#">Test Item 2</a></li>
  		<li><a href="#">Test Item 3</a></li>
  	</ul>
  </li>

Code (markup):

Then we just need the CSS to control it. First, we need to set the list-style, width, etc - easiest way to do that is to just share what properties we can with it's parent thus:

.menu,
.menu ul {
	clear:both;
	list-style:none;
	margin:0;
	padding:0;
	width:150px;
	font:bold 10px/30px sans-serif;
}

Code (markup):

Now we need to set up that nested UL. First, we want it position:absolute and off the side of the screen where we can't see it.

.menu ul {
	position:absolute;
	display:inline;
	top:0;
	left:-1000em;
}

Code (markup):

on hover, focus and active (let's not leave keyboard folks out) we set left equal to our column width:

.menu li:active ul,
.menu li:focus ul,
.menu li:hover ul {
	display:block;
	left:150px;
}

Code (markup):

you'll notice the use of display:inline and display:block - for some borked up reason IE7 won't render the position change without changing the display state. Borked de borked de bork bork bork.

Now, because above we were trapping ALL anchors under a hovered LI, we need to 'unset' the ones nested in a LI. With more modern CSS we could just use child selectors, but for legacy sake (IE6/earlier) we have to do this instead.

.menu li:active li a,
.menu li:focus li a,
.menu li:hover li a{
	background:#CCC;
}

Code (markup):

of course, this too needs a hover state, so...

.menu li li:active a,
.menu li li:focus a,
.menu li li:hover a{
	background:#EEE;
}

Code (markup):

Which is pretty much the 'guts' of a simple flyout menu... just one problem... IE6/earlier don't :hover on anything but anchors. The solution? add this:

* html body {
	behavior:url(csshover2.htc);
}

Code (markup):

using the csshover2.htc by peterned.
http://www.xs4all.nl/~peterned/csshover.html

I've put together a little live demo of this here:
http://battletech.hopto.org/for_others/scubita/template.html

Which as with all my examples the directory:
http://battletech.hopto.org/for_others/scubita

Is unlocked so you can grab the bits and pieces. (like that new 294 byte button.png replacing the two images totalling 1.6k of the original). The code validates XHTML 1.0 strict meaning there's nothing to break in 'lesser' doctypes, and the CSS would validate if not for the inclusion of the behavior file for IE6/earlier. Page is tested as working in IE 5.5, 6 & 7, Opera 9.27 and 9.5 beta, FF 2.0.0.14 and 3 beta, and Safari 3 windows.

Any questions, fire away... and sorry for the delay in responding, I'm knee deep in a thousand dollar php project at the moment.

 

Hey, deathshadow, just saw all this info and i'm stunned Thanks so much for your help.

Tomorow i'll be looking at all code in ease and carefully and i'll get back to you for sure

thanks again, really aprecciated.

 

can you please tell me how did you make the left menu loads only one time?
I mean its not loading in every page , just one time and very fast
good luck

 

was made just in CSS, if you want the code, better grab the code deathshadow placed above cause its perfect, and mine, oh well, its full of errors etc...