Is slanted left navigation possible

[Ninjakreborn]

I was presented with this layout

It's not too complicated, so I coded the actual layout itself www.thevirtualgolfsociety.com
with not too many problems.
I haven't yet done
* The headers
* Some footer alignment
* a few other small things

Right now, he asked me a question.  He asked if I Could slant the left navigation (Shown in the picture as opposed to what is on the website), but keep that specific rollover affect.  I really don't know if this is humanly possible, so I will have to ask, is this something that can be done with CSS/javascript at all, and still keep the same coloring/nature of the current rollover setup.  I went over all possible options, and the only answer seems to be advanced graphic design, if so I need to know whether to find another option, or if this is something that is easier to do than I thought??

[attachment deleted by admin]

[obsidian]

It's possible, but you're going to be falling back into 90's markup and design principles with hacked up image maps and rollovers, etc. It's definitely not something that's worth the time and trouble to do. If I had a client that was insistent upon having that done, I'd put it to them that the only way I'd spend the time required to get that to work would be using flash.

[Ninjakreborn]

Thank you, that's exactly what I was hoping for, a clear answer.  I was looking all morning for alternatives.  I will speak with him about it, and work it out, for additional pricing.  I won't do anything that isn't 100% validated, so it might be out of the question anyway.

Thanks obsidian, than helped a lot.

[Jtech]

it could be done all in css like make the background  u want with the slant .. and then add it to a div / span or table as a background  ... and then just use normal anchors ..and edit them with css to get the exact same roll over affect as u have .. tables would be best cause its less hassle cause they have the <td> to put the text over the image

[Ninjakreborn]

I know, but I don't want to ever have to use Tables again.  I was using tables for forms, up until today, when I went totally CSS on that too.  Much easier, I think it would just make it more difficult to update the links when needed, this might ba  rapidly changing site, having to add 3-4 links would require redoing the entire left navigation each time, instead of just chanigng the height and width and adding some links.  So I think I want to keep this one simple, however if it come's down to me HAVING To, then I will keep your suggestion in mind.  Thanks.

[obsidian]

[quote author=Jtech link=topic=122477.msg505294#msg505294 date=1168884164]
it could be done all in css like make the background  u want with the slant .. and then add it to a div / span or table as a background  ... and then just use normal anchors ..and edit them with css to get the exact same roll over affect as u have .. tables would be best cause its less hassle cause they have the <td> to put the text over the image
[/quote]

Actually, to get the effect he's after, it would be impossible with markup and CSS whether or not you're using tables. Look at how the hover effect is slanted, too. The [b]text[/b] and all is slanted. With the overlap that this causes, you don't have a simple hover effect since your block elements are now not going to behave properly.

[nogray]

If you want to keep it all CSS, the easiest way is to use a transparent png image on top of the navigation. For IE 6 and lower, you'll need to use "AlphaImageLoader" filter http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp

Here is how it works, you set you navigation as it is right now (the normal status for the link shouldn't have a background color). Use the gradient background behind the whole navigation.

the Hover status will have the background color as the darker version.

Finally, add the png image over the background to create the shape you want. You can use a taller version of the shape and just set it as a div background. This way, if the menu grow, you can just grow that div.

Attached is a small illustration on how to make it.

[attachment deleted by admin]

[ToonMariner]

have you considered making the menu a flash object and leaving the current html inside the object tag so that those without the plug-in or have flash switched off will see the current menu.

[obsidian]

@nogray - Once again, a good suggestion, but it doesn't solve the issue he's asked about. Not only are the borders of the navigation slanted, but the entire navigation itself -- text, borders, background, hover, etc -- is slanted. If you'll look carefully at the image he posted initially, the dark green "hover" color for the News item is not perfectly horizontal; it has a slight diagonal slant to it. This [b]cannot be done[/b] with simply markup and CSS.

@ToonMariner - thank you! Finally another that supports my suggestion. When it comes to this type of tweaking, you've got to use a tool designed for just that sort of customization, and in this case, Flash is probably going to be your best solution.

[Ninjakreborn]

Not sure now, spent like 2 hours on the phone arguing with him about it.

Still looking up viable options, I told him the downfalls of using flash for navigation, and he wants me to pursue other options, I am awaiting his current response.

[ToonMariner]

I repeat my post - you WILL need flash to achieve this. You can leave the current menu in for those who don't have/allow flash. (you simply put the html inside the <object></object> tags - if flash is available it will ignore the html.)