SitePoint Sponsor

User Tag List

Results 1 to 25 of 35

Thread: Non-Square Menu

Hybrid View

  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,319
    Mentioned
    462 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,319
    Mentioned
    462 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
    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.

  8. #8
    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.

  9. #9
    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.

  10. #10
    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.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    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.

  12. #12
    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?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 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.

  14. #14
    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.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 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?

  16. #16
    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)
    I used relative position to make the OP better understand what eruna initially meant by overlapping. It's intuitive. But your point is why I added "or whatever".

    I agree negative margins could prove to be better. But they are not so intuitive. I was trying to be clear about a technique, rather than about an implementation.


    ******************


    All that said, now, just for the sake of argument:


    Sometimes "the thing" can prove to be a feature.

    True about accounting for the black hole plus the visual position. But an overflow:hidden; on the parent will take care of the... overflow.That would be div id="mc_mid" in our case.



    ***********************


    In the end, I'm happy we all provided options for William

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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?
    You could use<a><span>, and either give a negative indent ( which might allow you an extra tag to use in the hover) or continue with the display:none IR technique. You could also position the make the span contain the image and use AP so that it covers up the text ( this has the advantage that when images are turned off, your navigation will still b visible)

    as far as the sprites ( or any images actually) are concerned .. the problem is that you navigation REQUIRES overlap. The tip of the arrow has to change when #1 hovered and the fin when #2 is hovered.. but they both occupy the same space...

    Noonnope is right.

    you could also use a gif ( assuming that soft shadow outside the menu is not vital . you can regain it with CSS3 and PIE, BTW)

    at this point your sprite would begin to look something like this:

    Note the size of the buttons (anchor/ LIs) have change to, to account for the overlap

    so 4 x length - (3*overlap) would be your UL width....

    OR
    you could add padding-left that's equal to the overlap, and then just give each LI margin-left:-overlap...

    hope this helps

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, you guys are all amazing. Just when I was about to tell the client, "too bad, so sad" and look like a dumb-dumb, you guys saved the day.

    I understand about the black hole and I am using a negative margin instead.

    Thank you, thank you, thank you.

  19. #19
    SitePoint Zealot bopjo1's Avatar
    Join Date
    Jun 2007
    Location
    Tampa, FL
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope I'm not too late to this party

    I'm attempting the same procedure here:

    http://bopjodesign.com/xactlyit/netaffinity/stages.html

    ...But the "tails" of my 2nd, 3rd, and 4th "arrows" are not showing up. I used Rayzur's code as a guide.

    I've been wracking my brains all night on this and just can't figure it out. I code PHP and javascript but nothing is more aggravating and difficult to me than CSS!

    I hope someone can help me please....

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Let's answer this in the new thread here:

    http://www.sitepoint.com/forums/showthread.php?t=735441


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
  •