Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JQuery - Top Bar Click

Discussion in 'Website Coding & Programming Forum:' started by Tony Hardy, May 9, 2013.

  1. Tony Hardy

    Tony Hardy Guest

    Hi everyone,

    Anyone who's following my Canny Creative website redesign thread will know that I'm making progress. Slow progress, but progress none the less ;)

    Yesterday I managed to create myself a responsive navigation menu. However, if you head over to my development site dev.canny-creative.com and resize the browser right down, you'll noticed that on the responsive navigation, the whole top bar is clickable.

    I only want the menu icon itself to respond to the click. This is my JQuery;
    <script> $(function() { var pull = $('#pull'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); </script>
    And the CSS and things you'd be able to get to in Firebug/Inspect Element.
    I was tempted to put a hover colour on the icon background too, but maybe it's not worth it with it being for touch devices. Could anyone advise how I would do that anyway as it doesn't appear to work how I would normally try it?

    Cheers,
    Tony
     
  2. Jonna Healey

    Jonna Healey Member

    Maybe try taking the width down from 100% to 50%, or even not at all and just float the menu right. You'd have to put a container around the nav though. Perhaps try putting a header container around the logo and nav?
    I wouldn't bother with a background colour for the nav icon. I personally wouldn't see it on my Galaxy Note II unless I held my finger on for a few seconds, so the time sorting it would be wasted I guess!
    EDIT: Why not have the logo img as an actual image rather than a background? I'd expect to click this to be taken to the homepage on any other site. Just a suggestion :)
     
  3. Tony Hardy

    Tony Hardy Guest

    Hi Jonna,
    Thanks for the assistance! I'll give that a whirl.

    In regards to having the logo as an actual image. I just couldn't get it to work! It was having to sit in the <nav> tags, which meant on smaller screens it was just disappearing. Then I couldn't get it to scroll down on the same line as the menu when the jQuery animates.
     
  4. Jonna Healey

    Jonna Healey Member

    Ah right, fair enough.
    In which case, sit your nav within a new div, have the background assigned to that div, and float right your nav within that div.
    #header { height:60px; width: 100%; font-size: 11pt; font-family: 'Ubuntu', Arial, sans-serif; font-weight: bold; background:#202020; background-image:url(../img/cannycreativelogo.png); background-repeat: no-repeat; background-position: 20px 5px; background-size: 50px 50px;}nav {float:right;width:50%;}
    Code:
    <div id="header">  <nav></nav></div>
    That *should* work, in theory!
     
  5. Tony Hardy

    Tony Hardy Guest

    Don't believe that worked ;) Haha! It might just need some tinkering with the Media Queries though!
     
  6. Jonna Healey

    Jonna Healey Member

    :eek: Never! Ha, yea blame it on the queries! ;)
     
  7. Levi

    Levi Moderator Staff Member

  8. That looks good Levi, think I'm going to pinch that too!
     
  9. Tony Hardy

    Tony Hardy Guest

    Cheers Levi.

    Any idea where it grabs that little menu icon and the X from though? Can't seem to find it anywhere! It works in the demo, then just disappears off the face of the earth.
     
  10. Levi

    Levi Moderator Staff Member

    honestly I haven't looked at it in too much detail yet....however if you follow the demo link on the website it's line 83 for the 'x' (basically the x is the letter x in a div by the looks of it)
    <body class="mean-container"><div class="mean-bar"><a href="#nav" class="meanmenu-reveal meanclose" style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;">X</a><nav class="mean-nav">Another site I've bookmarked explains more about the “≡”, it's in section 3 here. I'm sure you webbies can get it to work :)
     
  11. Jonna Healey

    Jonna Healey Member

    If you look in the jquery.meanmenu.2.0.min.js the query for it is in there - meanMenuClose:"X",meanMenuCloseSize:"18px"
    I think that's what you're looking for?
     
  12. Tony Hardy

    Tony Hardy Guest

    I've managed to get this sorted! However, can anyone else check it on an iPhone or other smartphone and see if it's working properly and whether there's a flicker on click? Any suggestions would be welcome!
     
  13. Levi

    Levi Moderator Staff Member

    checked it on my nexus 7 (I don't use no iPhone) and it works fine when you open it, when you close it the 'c' logo has a blue highlight like when you're selecting text/icon with a mouse.
    Portrait was the mini menu while landscape was the full menu
     
  14. Tony Hardy

    Tony Hardy Guest

    Cheers Levi. Sean's saying his HTC does something with a weird orange box.
     
  15. Yeah the menu doesn't work on my HTC Desire S, it just puts half of an orange box behind the logo, starting from the left edge.
     
  16. Levi

    Levi Moderator Staff Member

    Can't say I got that but pretty sure the HTC is running an older version of android and might even be running the old browser (or even custom one) instead of chrome like I am on my nexus 7
    edit: on my phone using firefox on a custom rom (beta and based on 4.1.2) I am getting the orange box when I press the mini menu. I'd guess thats a dimension thing, phones 480 wide, nexus 7 is 800
    edit 2: I get the orange box on firefox on my nexus 7 too....so it's not dimension.
    It's looking like it could be the same as the blue box I mentioned, just different choice of colours.
     
  17. Well I was using the firefox mobile browser, not the stock one. I've just updated it to the latest version but unfortunately I'm still getting the same issue.
     
  18. Tony Hardy

    Tony Hardy Guest

    Any suggestions?? I'm quite stumped as to what this could actually be.
     
  19. Levi

    Levi Moderator Staff Member

    ok remember I'm no webbie so I usually just muddle along, but we all seem to be with this one lol
    I'm thinking you need to just change things a little on the code. Pretty sure this might be the problem but I could be wrong. You've got the /div in front of the /nav, when it should be after it.
     
  20. Yup, that's certainly something that could cause this, good spot Levi.
     

Share This Page