I am building a menu for a responsive website - my query is what people think is the best solution for showing / hiding the menu.
I have setup the menu in this jsfiddle - http://jsfiddle.net/paul_dance/5z7rvvn4/2/
The menu is hidden at 768px and a button is show - I was thinking of adding a simple js script
$('.menu-btn).click(function(){
$('nav ul').slidetoggle();
});
or similar..
which toggles the menu on click - but my fear is if the user hides it again then expands their screen beyond 768 the menu will remain hidden and no button present to re-show.
Is there a better cross browser / device solution available? Or a CSS only solution? This needs to work on IE8 also.
Instead of using slideToggle, just toggle an open class on the #nav element.
Then in your "mobile" sized media query, have #nav.open display the menu (i did this by setting #nav.open > ul to display:block;).
example:
http://jsfiddle.net/rally25rs/5z7rvvn4/3/
The example isnt animated, but you could add a CSS3 transition on height instead of just changing the display:none; of the element. CSS3 transitions wont work in IE 8 or 9, the menu will just appear, but no mobile devices run IE8 or 9, so that really shouldn't be an issue.
Well, there are a couple of solutions to your problem, like this:
*instead of slidetoggle, use a toggleClass, that only works on 768px or bellow like this;
*or use a css only approach with a checkbox and a label on top of your code, replacing the button tag with a label tag; when the checkbox will be checked the menu will be shown, like this;
Related
I am currently developing a site that is almost done, however I am having an odd issue with the navigation on mobile.
The menu is collapsed using Bootstrap 3's collapse js. Everything works great, except when you open the menu it does not render my custom css immediately. It seems to open the menu, then jumps to the correct position and coloring. When you open the menu it starts on the right side, with the incorrect background color, then jumps to the correct positioning/color.
You can view the site here: http://brookmanville.com/
This issue happens regardless of browser or mobile device.
These fixes will make your menu more mobile proof:
Remove float: right; from .navbar-nav if it's the mobile version of your website. This behavior sorts out the sudden right to left movement.
Remove the margin on .navbar-nav, and give it a width of 100%.
I am new to web development and now i am faced with this problem of handling hover on devices like ipad. First i thought of removing css for hover and making it on click but, customer is insisting on having hover.
Heres the problem, I have bootstrap navbar with few menus that dropdown on hover.
But on ipad the menu drops down after clicking on the menu (ex: learn) but doesnt disappear until i click on another navigation menu say "teach".
I want to do following things using javascript/jquery.
Keep existing hover behavior on desktop and laptop
On devices like iPad, i would like the menu to disappear under following circumstances
(a) when clicked on the same menu item again
(b) When clicked on submenu
(c) When clicked outside the menu
Any sort of help here is appreciated.
Here is the fiddle http://jsfiddle.net/em656522/2/
Bootstrap's defaults are best web practices, so I would suggest staying closer in line with what's already there. The only thing you should do to customize your menu's behavior is perhaps add the hover dropdowns for desktop only. Bootstrap's responsive utility classes are also available for you to use.
You may want to read this question for some ways to approach your desktop dropdown menu.
The brilliant amateur that I am I decided to make a website responsive. My website has a sidebar and I figured I would use a media query to hide that sidebar and show a button to make the side bar toggle-able. I used jpanelmenu http://jpanelmenu.com/ to do this.
The problem is if you do the following it all breaks apart
shrink down browser width to mobile size
the sidebar disappears
the button to toggle the sidebar appears
press the button and the sidebar appears
expand the browser window to normal side
now I have two fricken sidebars (the one from the jpanel menu) and the original sidebar that has now reappeared because the browser window has grown and my media-query unhides it
to top it off the mobile sidebar toggle button has disappeared because we are back to normal width
clearly this won't work, so should I use modernizer and a javascript media query ala Triggering jquery with css media queries
to fix it or is there a more elegant solution my amateur mind is not seeing?
I want a menu hidden at the top of the page, that slides down after clicking a button so it shifts the other content bellow it down. What I have is the hidden menu and I use jQuery functions slideDown() and slideUp() to toggle it. The problem is that eg. on iPhone the slide is not fluent, so I would like to use some acceleration.
I wanted to just add -webkit-trasnform: translate3d as described here, but this seems not working with jQuery slide functions. Also I tried to use jQuery('.menu').animate({height: ..}) but it didn't work also (I think jQuery toggle uses the same). So I found out, that probably the transform3d works only for moving elements by adjusting its coordingates (left, top ..) but not width and height.
I found out this jQuery plugin https://github.com/benbarnett/jQuery-Animate-Enhanced , that should help accelerate width and height changes also, but it didn't work at all in my case.
So I managed to move the menu by adjusting the Top property and adding translate3d, which finally makes the menu move fluently, but now I cannot force the content bellow it to move down when the menu slides - if the menu has position:relative and is moved out of the screen, there is still a hole of its height at the top of the content. If it has position:absolute , it doesn't influence content bellow. If position:static, Top: property has no influence.
Am I missing something or what is the "recommended" way to implement this ? You can see the current implementation on http://www.huureenkerstboom.nl (please downsize your browser window to see the mobile implementation).
I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks.
Heres my fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so.
I could:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..it works but it not ideal when you have more than a few tabs.
I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.
Any ideas on how I could do this? Thanks in advance..
http://www.zurb.com/playground/off-canvas-layouts
Here's a few ideas...
Also I would say with what you have at the moment, floating that menu to the right on the mobile version isn't going to work. at the mobile size, those nav items should be 100% width, and the nav should be above the content, or should be another "slide panel".
Jquery mobile also has some very useful, very common design patterns built right in:
http://jquerymobile.com/