SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 52
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom Drop Down Menu Box

    Hello, I recently started working on my website, it's currently at 50.142.6.29 and I want to create a drop down menu box with links to my other pages from the small hexagon roll over image on the left. What I want it to do basically is when a user puts their cursor over the image it highlights and then below it fades in a custom shaped semi-transparent box with 4 link buttons inside that highlight when the user hovers over them. I currently have the hexagon image where it highlights but that is as far as i have gotten. If anyone knows how to code this or could help me in any way I would greatly appreciate it.
    I have created a rough illustration as to what I am looking to achieve. There is a link to it labelled illustration in the top left corner of my website.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Crossfire0mega. Welcome to the forums.

    Before you rush too far down this road, consider things like accessibility. For a start, touch devices (which are starting to dominate the market) don't respond well to hover, so how will those people access your links?

    Stuff like this is kind of cool, but it's also unnecessary and makes life more difficult for some users, so it's not really good web design. Anyhow, there are lots of free menu examples out there. I was just looking at these today: http://responsivenavigation.net/

    What is your skill level with HTML, CSS and JS?

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well What about having the menu box appear when the nav button is clicked?
    And I used to be pretty good with HTML a couple years back but kind of got out of the loop, as far ass CSS and JS, I'm fairly new.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    What about having the menu box appear when the nav button is clicked?
    That's a popular option, and there's a nice, simple example of that in the link I posted (you could use the example in all scenarios rather than just on small screens). My only concern with it on desktops is that it might not work with JS turned off, and also might not work for people navigating via keyboard. That's why this sort of fancy stuff just leads to problems for people ...

    An alternative I prefer is to have a single menu link that points to a menu further down the page—again, though, something more used on mobiles that in all scenarios. And it leaves the cool crowd folding their arms and shaking their heads, of course.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which example is like what I said? And I couldn't exactly see the difference between several of the examples, maybe I'm just missing something..
    But as for accessibility and such, I really am not worried about appealing to a wide audience nor am I worried about mobile devices so much, for a few reasons, one being that my site is only a personal site that I will be using and a few of my friends as well.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    I couldn't exactly see the difference between several of the examples
    They are a bunch of options for dealing with menus on small screens, so to see how they work on your desktop browser, you have to narrow your browser window quite a bit. But those same menu behaviors can be used on large layouts, too. (In the examples, the CSS only kicks in at small screen widths, but that limitation can be removed.)

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the menu overlay example looks to be what I'm looking for but my main concern is whether the overlay can be drawn into a custom shape like in my illustration? Is it possible?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    my main concern is whether the overlay can be drawn into a custom shape like in my illustration?
    Depends on what you mean. You can certainly replace the "Menu" link with the button image on your site, but are you talking about styling the actual dropdown box as a hexagon?

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah pretty much lol, is it possible? or if not could clicking the button reveal an image that would fade in or scroll down with the buttons overlayed on in

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    is it possible?
    Certainly you could do something like that. An easy way would be to have a transparent box that appears on hover, with a background image of a hexagon. Trying to align text with specific elements on a bg image isn't a good idea, though, so if you really want something like that, those elements of the image the links need to align with are better placed as bg images on the links themselves.

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, how would you code that?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    First work out exactly what you want it to look like. Can you post a visual?

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://50.142.6.29/ here's a quick photoshop sketch up of what id like it to look like once the hexagon button is clicked, I would either like it to fade in or scroll down from the top of the menu image and inside there will be the links to my other pages

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, what I really meant was what the whole thing would look like, images, links and all. It's easy enough to get something like that to appear on hover, but you mentioned a background image etc. How that plays with the links is important. If the background is just that single color, that makes things easier.

  15. #15
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so I made a more detailed version with the links included, I made it a roll over image.
    other than the whole fading in and out when the button is clicked and the links actually working, that's how I'd like for it to look.

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would also be great if I could make the links light up when the mouse was over them, like a rollover image effect.

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    TBH, I'm a bit busy ATM, so perhaps @ronpat might like to have a go at this?

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still kind of in the dark here about how to progress forward from here, can anyone help? Thank you.

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Crossfire0mega,

    If you are still working on this page, I will give it a go with you. I'll need to take a different approach to create the page because I don't speak JavaScript, but with your obvious JavaScript skill, you should be able to modify my styles to suit your needs.

    I need some more information about the page design and how the "buttons" are supposed to work, if you don't mind.

    The images are quite large and are being scaled down by JavaScript. Are the images supposed to be fixed sizes or will there be occasions when their sizes will change? I would like to scale them down to practical sizes while working on this with you, if that's possible. I can measure what I see at this time and scale to match, if that will work for you.

  20. #20
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat,

    Yes I am still working on it. So basically the 'nav' button is the primary button the page, and the idea behind it is that when you click it, the menu image with the 5 page options appears as seen here 50.142.6.29. At that point you can hover over the links and click whichever one to go to the respective page. Currently on the website all I have is the button which does nothing but light up when you hover over it and a rollover image that shows the menu with the links, but they arent really links yet because I'm not sure how to code that part.

    Also, thank you for helping me with this.

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And as far as the scale of the images, I have them fixed and wasn't planning on having them change size, mostly because I'm new to JS and HTML, and also I didn't see a reason for it either lol.

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    OK, cool. I'll go with approximately what you have on the page and get back with you when I have something useful.

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok great thanks, btw, the original scales of the images are as follows: Holographic menu: 2000px by 2000px
    Nav Button: 400px by 400px

    They are re-sized to: Holographic menu: 300px by 300px
    Nav Button: 50px by 50px

  24. #24
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just take a normal drop down menu and style it like that. Would be very easy. You need a drop down example?

  25. #25
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, how would I overlay my holographic styled image over a drop down menu?


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
  •