• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

JQuery - Top Bar Click


T

Tony Hardy

Guest
#1
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
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 :)
 
T

Tony Hardy

Guest
#3
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
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!
 
T

Tony Hardy

Guest
#5
Don't believe that worked ;) Haha! It might just need some tinkering with the Media Queries though!
 

Levi

Moderator
Staff member
#10
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
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?
 
T

Tony Hardy

Guest
#12
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!
 

Levi

Moderator
Staff member
#13
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
 
S

Sean Lee-Amies

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

Levi

Moderator
Staff member
#16
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.
 
S

Sean Lee-Amies

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

Levi

Moderator
Staff member
#19
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.