SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 52
  1. #26
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    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.

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

  3. #28
    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.

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

  5. #30
    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!

  6. #31
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 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?

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

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

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

  10. #35
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything right now looks and behaves exactly how it should, thank you. Do you think it works and looks better if it is a "hover over" effect?

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

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

  13. #38
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol thanks, sorry, I went over it repeatedly and just didn't see it for some reason.

  14. #39
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    Everything right now looks and behaves exactly how it should, thank you. Do you think it works and looks better if it is a "hover over" effect?
    (1) Does "right now" mean with the "back" image commented out?

    (2) In my opinion, I would keep the :hover behavior exactly the way it is. If anyone of your friends uses a touch screen that requires click behavior, I would add that for them. I would not require desktop or laptop users who have a mouse, trackpad, or who can simulate :hover behavior to click on anything unnecessarily. In other words, I would not take away the :hover behavior and *require* a click to show the menu. Requiring seemingly unnecessary clicks is a put-off. That's just my opinion, though. I'm not a gamer .

  15. #40
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 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?

  16. #41
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I've uploaded the page to my server with the links updated and the image commented out, can you check it and see that everything is working right, and that it looks ok? Thanks! http://50.142.6.29/

  17. #42
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat,
    I replaced the hashes with the links but they still aren't redirecting to their respective pages.

  18. #43
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    ronpat,
    I replaced the hashes with the links but they still aren't redirecting to their respective pages.
    The problem is entirely with my code. This is gonna be embarrassing. Give me some time to work it out. Sorry.

  19. #44
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, you're fine, I was sure that I was making some stupid mistake. You all have been a great help and I really appreciate it!

  20. #45
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, finally redone. Again, I apologize for the first go-round of goofy code.

    This version "d" works as intended. The links have been tested and work properly.

    The code validates perfectly (but so did the previous two. )

    As a bonus, I optimized the background image for the "Movies" page. It's in the /imgs/ folder.
    abstract.jpg is 1,318 KB (the original 100% quality jpg)
    abstract40.jpg is only 96 KB (the optimized 40% quality jpg)

    *Seriously* think about routinely optimizing the images that you use for your site. These things are unnecessarily HUGE!

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

  21. #46
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its Working like a dream! Thanks so much, It's live here at 50.142.6.29

  22. #47
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    Its Working like a dream! Thanks so much, It's live here at 50.142.6.29
    Very good. Thanks for the feedback.

  23. #48
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And now I have to update the other pages lol.

  24. #49
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Crossfire0mega View Post
    And now I have to update the other pages lol.
    That's where using a tiny bit of PHP is advisable. Ideally, you just want the code for that menu in one place, and to have it pulled into each page. A nice way to do this is with PHP includes.

    I did test the menu on an iPad (which I'm using now) and the menu isn't triggered there, as it lacks hover functionality. That's one reason why I'm not keen on drop down menus. You have enough space on your page for the menu to be visible at all times. Anyhow, i guess this is where a click option would be good, if you care about accessing the site via tablets etc.

  25. #50
    SitePoint Enthusiast
    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How hard would it be to include a click option if I were to need it later on? Also, I had an Idea earlier this afternoon that I'd like to run by you guys to see if it's possible. I want to have a video player with a drop-down select box where you can pick a video to play, is that doable?


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
  •