SitePoint Sponsor

User Tag List

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

Hybrid View

  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
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 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
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 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
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 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 Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 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.

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

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

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 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.

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

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,626
    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?

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

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,626
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    Well, how would I overlay my holographic styled image over a drop down menu?
    The ul ul would hold the image. The ul ul li would hold the buttons.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Where do you want the holographic menu positioned on the page?

    At this time, it is absolutely positioned a fixed distance from the top and left of the page. If the window is narrowed enough, the menu will flow beneath the logo.png image.

    At this time, the logo.png remains centered horizontally and vertically on the page.

    Do you want the holographic menu to be vetically centered to the left of the logo.png? (It will still flow beneath logo.png at narrow widths.)
    Or do you want the holographic menu to remain absolutely positioned as it is now?
    Or do you have another idea in mind?

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so I don't know what a 'ul ul' is I'm sorry, I'm still new to all this. and for the position of the menu, I don't care where it is as long as it is the distance it currently is from the nav button, other than that I don't care.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The files in the link below are a complete web page. Download the folder to your PC and double-click CrossfireOmega-1a.html to try it out.

    The nav images are slightly larger than your draft. Barely noticable

    The navigation menu behaves like this:
    1. hover over the blue area - nothing happens
    2. hover over the "nav" button, the menus appear over the blue area.
    3. hover over each menu item, a white border appears that turns red on mouse-down.
    4. leave the menu area and the menu disappears.


    All of the images are new. Why? To save a ton of bytes.
    The new images have new names as shown in the following list.
    The difference between your original images and the cropped and resized images is:
    Code:
           originals                      remakes
    --------------------------    -----------------------
            logo.png    891 KB          logo3.png  115 KB
         grunge2.jpg  2,082 KB       grunge40.jpg  163 KB
      navcluster.png    514 KB     nav-back-6.png    9 KB
     navcluster1.png    514 KB      nav-top-6.png    9 KB
     menuoverlay.png    649 KB    menu-back-3.png   82 KB
    menuoverlay2.png    786 KB     menu-top-3.png   96 KB
                     ---------                   --------
      TOTALS          5,436 KB                     474 KB
    The compact images result in much faster page loading time and faster menu transitions.

    https://www.dropbox.com/sh/axyk8bns96ga4hl/yIfI4M6646

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, It looks amazing! I love the outline you did on the second one. It works exactly how I envisioned it, except I was wanting the blue holo menu to disappear until you clicked on the nav button, other than that it's perfect!

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    Wow, It looks amazing! I love the outline you did on the second one. It works exactly how I envisioned it, except I was wanting the blue holo menu to disappear until you clicked on the nav button, other than that it's perfect!
    Yes, because the holo menu is made of two images, a "front" image overlaying the "back" image, I wasn't really clear about how it was supposed to work, so I gave it a guess.

    Let's try this...

    Go to line 39 on the page and comment out the "back" image line like this:
    Code:
    #menubox {
        width:300px;
        height:307px;
    /*    background:url('imgs/menu-back-3.png') no-repeat;  /* */
        position:relative;
        margin-left:29px;
        margin-top:169px;
    }
    Except that the menu is still responds to "hover" instead of "click" to show the menu, is that the effect that you desire?

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    It works exactly how I envisioned it, except I was wanting the blue holo menu to disappear until you clicked on the nav button, other than that it's perfect!
    With line 39 commented out, both "holo" images disappear (including the "back" image) until the "nav" button is :hovered, then the "top" holo image appears.

    Is that the "look" that you wish?... nothing "holo" (not even the empty "back" image), then "holo" menus?

    I am asking your to confirm the the way the images should look/behave. Nothing then everything, instead of "placeholder" then "menu items" (the way my first guess was coded).

    Quote Originally Posted by Crossfire0mega View Post
    Well preferably I would like it to respond to "click" if possible.
    I got that... several times.

    Changing the "nav" button from CSS :hover to JavaScript click to effect the desired behavior will happen after the desired look is determined and the correct CSS and images are in place to allow that to happen efficiently.

    Consider the :hover action to be a temporary substitute for the click action because I do not code JavaScript.

    BTW - the click action can be coded in CSS, but I am not sure how widely supported it is; it is not supported in older browsers. I am more confident that most gamers keep JavaScript turned ON, so I recommend going with a JavaScript solution AFTER we make sure we have the sequence of events understood and right images in place.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    The op mentioned that this is just a small site mainly aimed at friends, so I think it should be safe enough to use :target for the click. Is that what you were thinking of, Ron? We had a member here a few years ago who did his whole navigation with target, and I think he worked out a fallback for older browsers, too.

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and sorry, but where in the code to I put the links for the link buttons?

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    Oh, and sorry, but where in the code to I put the links for the link buttons?
    Inside the anchor tags:
    Code:
            <ul id="menu">
                <li class="home"><a href="#"></a><p>home</p></li>
                <li class="music"><a href="#"></a><p>music</p></li>
                <li class="movies"><a href="#"></a><p>movies</p></li>
                <li class="images"><a href="#"></a><p>images</p></li>
                <li class="contact"><a href="#"></a><p>contact</p></li>
            </ul>
    Just replace the hash with the URL or path to the target page.

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,226
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I think it should be safe enough to use :target for the click. Is that what you were thinking of, Ron? We had a member here a few years ago who did his whole navigation with target, and I think he worked out a fallback for older browsers, too.
    Yes, that is what I was thinking of, thanks. I would be interested in seeing how those fallbacks were designed. Are there any of old member's posts around that would include that code?

  25. #25
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well preferably I would like it to respond to "click" if possible.


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
  •