SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35

Thread: Non-Square Menu

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Non-Square Menu

    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.
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images
    Last edited by Williamr4j; Nov 17, 2010 at 07:30. Reason: Adding picture

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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/

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Enthusiast ghealy44's Avatar
    Join Date
    Sep 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that is what my issue is, I cant seem to get the whole blue arrow to be the current state.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Enthusiast ghealy44's Avatar
    Join Date
    Sep 2010
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Williamr4j View Post
    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.

    Code:
    /* 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;}

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Rayzur,

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

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  21. #21
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Williamr4j View Post
    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.

  23. #23
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by eruna View Post
    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.

  24. #24
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Williamr4j View Post
    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?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •