JQuery - Top Bar Click

T

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
 
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 :)
 
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.
 
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!
 
Don't believe that worked ;) Haha! It might just need some tinkering with the Media Queries though!
 
That looks good Levi, think I'm going to pinch that too!
 
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 :)
 
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?
 
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!
 
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
 
Cheers Levi. Sean's saying his HTC does something with a weird orange box.
 
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.
 
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.
 
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.
 
Any suggestions?? I'm quite stumped as to what this could actually be.
 
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.
 
Yup, that's certainly something that could cause this, good spot Levi.
 
Back
Top