Non-Square Menu

[Williamr4j]

Maybe I am trying to do something way out of the ordinary but, to me it seems like there should be some sort of solution.



This is the menu image I have attached, with the on and off states I am trying to create. I would like to have this menu also activate a JavaScript slider that will slide the information underneath. The Javascript I can figure out, it is the menu that I am tearing my hair out about.

How do I make this image work without making a new page reload per click of the menu?

Have the blue images be the rollover state and the current state?

Thank you for your help.

[ralph.m]

I, for one, am not really sure what you are asking here. What is happening at the moment? What code are you using for the menu? It's not really clear how this menu is meant to function.

[Williamr4j]

Hello Ralph,

Sorry for not being to clear, I would like to make this menu with a css rollover effect, which I understand how to do, and have a state when clicked be a current state. Both the rollover and current states will be the Blue color.

The problem I am having is trying to figure out how to cut up the image or make this all work with the image I have now.

My question, in the simplest form, how would you code this menu to have a rollover and a current state being blue but, also leaving the others their "off" states? I run into issues with the ends of the arrows because of layering issues.

I would show you the code but, I was just about to move on with this idea and make a single page reload per item instead of it just controlling a javascript slider within the page and did not keep the code.

Let me know how to make this easier to understand, if it isn't.

Thank you for your quick response.

[ralph.m]

So you just want to know how to make the current button blue? If you want one big image like that, I would do 4 (or 5) rows, each with a different hover / current state. That's the easiest way.

So, if no button is active, you see the top (all gray) row. If the first button is current or hovered, pull the image up one row and show a row with the first item blue. Next row shows the second item blue... etc.

In case you are interested, here's a sexy tute on how to do it without images:
http://css-tricks.com/triangle-breadcrumbs/

[Williamr4j]

I think I had tried that idea before with the picture I attached but, I was having issues with the fact that when you rollover an image the left or right, depending on which is already a current blue state, would change to a gray just in the triangle part.

It is due to the fact that it is looking for a square image.

I will look at the website you have sent me and I should have see this in his stuff anyways, I look at his site all the time.

Thank you.

[Williamr4j]

On CSS-Tricks, the end of the tutorial has this link:

For browsers that don’t support :after/:before, use an image based system. This is my favorite image based breadcrumb tutorial.

I went there and it is a very simple design to use when I have more of a rollover change background situation. I will try it out with this but, I'm not sure it will work.

Thank you.

[ralph.m]

Yes, sorry, my solution was completely wrong. I see what you are saying. It's late here, so I'll stop babbling. Veerle should see you thought this, as it looks perfect for what you are doing.

[Williamr4j]

Thank you Ralph,

However, the way they are doing it there is just having the arrow image on the right and the middle able to expand depending on the text that is going to be put in.

I need something different.

Here is a mock page of the code with the javascript and the image I am using.

http://www.americanresults.com/videogenie/product2.html

[ghealy44]

If I were doing this, I would use the image you posted above with the 4 menu items and then move around the background position.

For an example, the first button would use the top 2 images, then the next button would use the 2nd image down as the regular state, then the 3rd image down for the hover. This way you have the gray side and blue in its correct state. does that make sense? lol.

Let me know if that doesnt make sense, I will try and do up an example really quickly if need be.

[eruna]

What menu issue?
It seems to work fine.

One way you could improve it is to use overlapping png's so that the entire arrow lights up.

[Williamr4j]

I think that is what my issue is, I cant seem to get the whole blue arrow to be the current state.

[Williamr4j]

Thank you ghealy44,

However I have tried that and I am still not finding a good solution, if possible can you mock it up with what I have so I can see it working?

Thank you.

[Williamr4j]

I also have tried to use this way:



But, could not figure it out that way either.

If you could help me with my code that would be great!

Thank you.

[ghealy44]

I will work something out tonight to show you.

basically create 1 image with all of you button states in it.

so create a menu with a standard, hover, active,etc for each menu item.

so, realistically you should have 1 image with like 12 menus on it. You have to take into account that when you hover over the capture button from the intro page, the intro button is blue, so you have to have a button showing that. Basically if you start out and think about it logically, it will work itself out.

Like I said, if you dont make any progress, when I get home this evening I will do a quick menu to show what I mean.

[Rayzur]

Thank you ghealy44,

However I have tried that and I am still not finding a good solution, if possible can you mock it up with what I have so I can see it working?

Thank you.

Hi,
Those are tough to do when an arrow is thrown into the mix.

I remember doing something similar once before.
http://www.css-lab.com/test/mossay/test-1.html

If you view the page source you will find the CSS as an internal stylesheet.

The trick was to increase the widths on hover to allow the arrow to show, at the same time I had to set a negative right margins so the other floats did not drop.

The width increase was the same as the length of the arrow, in that case it was 8px.

/* all the anchor widths change on hover */
#home a {width:102px;}
#news a {width:75px;}
#service a {width:114px;}
#store a {width:85px;}
#network a {width:106px;}
#about a {width:94px;}

/* increase widths by 8px on hover */
#home a:hover {width:110px; margin-right:-8px;}
#news a:hover {width:83px; margin-right:-8px;}
#service a:hover {width:122px; margin-right:-8px;}
#store a:hover {width:93px; margin-right:-8px;}
#network a:hover {width:114px; margin-right:-8px;}

[Williamr4j]

Thank you Rayzur,

Very interesting. I will try that and report back. Thanks again.

[Williamr4j]

Humm, maybe I am not understanding the process correctly so I'm going ask vs. spending a few more hours I dont have figuring it out.

I understand that you have the one image, sprite.png, and each time there is a :hover the image is moved left in -60px increments and up to it's corresponding hover state px amount.

I guess I get lost in my situation when you talk about resizing on :hover and negative right margin to move in the other menu items. I mean, I understand that process but, I don't understand why mine wont work like that, at least the ways that I have tried so far.

Could you possible pin point changes you would make in my code so I can see what I can do differently?

Thank you.

[Rayzur]

I don't understand why mine wont work like that, at least the ways that I have tried so far.

Well it looks like yours would work without that since you are not trying to tuck the neighboring anchors underneath the arrows.

Your sprite image seems a little skewed though. It looks like it has a black border on the top of the "Intro" and "Manage" states. That's throwing your BG positions off

When I click on (1. Capture) there is not a black border at the top

[Williamr4j]

Humm, I did not notice that before. That is an easy change of image and I really dont know what happened.

Thank you for catching that.

[dresden_phoenix]

this might be a more efficient sprite strategy ;I roughed it up, so it may not be pixel perfect but it should show the concept.



also I noticed that you have anchor tags wrapped around P tags... which is not valid.

[Williamr4j]

dresden_phoenix,

Thank you for working on this to help me out, I appreciate it very much.

With looking at the image that you modified, I can see it working for the "intro" button but, as soon the image for the rest of them are supposed to be blue arrows they are going to have those grey small triangles on the left.

Here is the on and off state of each in-case you did not look at my original posts:



Thank you again for helping me on this.

Also, the reason for wrapping the <p> tags in the <a> tags is so that I can have the text links with a display of none. Is there a better way to do that?

[ralph.m]

the reason for wrapping the <p> tags in the <a> tags is so that I can have the text links with a display of none. Is there a better way to do that?

It's better to keep the <a>s inside the <p>s and do something like text-indent: -9999px; That will get them out of the way.

[noonnope]

What menu issue?
It seems to work fine.

One way you could improve it is to use overlapping png's so that the entire arrow lights up.

A good idea. Overlapping elements to be more exact. But you need to rethink your sprite. One blue background, one gray background, ending with an arrow head and a transparent region. Perhaps you need a visual. Here it is. This is how elements should be manipulated. Sorry about the poor graphics




You control the overlap with position: relative; left:-25px;, or whatever, and, if necessary, use z-index to control the order.

[Williamr4j]

@Ralph- Thank you for that bit of information, I will do that.

Do you happen to know a solution to the bigger problem? If not, I am probably going to go to the client and tell them that each button will be a separate page with different image backgrounds for the menu.

(I still want to know how to do this, just in case they say it has to be like this or if another client down the line wants something like this.)

@noonnope, I will try that, thank you very much.

Thank you all for your help so far.

[ralph.m]

Do you happen to know a solution to the bigger problem?

Are you still pursuing Rayzur's solution? He's a genius at this stuff, so I thought that had set you on the right track. Do you have an online attempt at that code?