Hey guys im on my mobile trying to use jsbin and what a pain. Anyways is there a way to hide a select menu and on click of a button open the select menu and since mobile devices shows a popup box id want this for my navigation for mobiles (responsive)
My submenus just dont work with the ux and ui with the mobile responsive layout so I was thinking of using a select menu and those things are ugly so wanted your opinion on how to achieve this if at all possible. Ive tried this http://jsbin.com/narigudu/1/edit
This really is a fairly broad question and normally I'd vote to close it -- but I'm going to try to give you some usable pointers.
You have a few options at your disposal and they all have their pros and cons.
Media Queries Link
This is the "stock answer" to these kinds of questions. Put both the drop down list and the button to pop up the list. Use media query to check screen resolution and hide/unhide the proper one.
JavaScript viewport detection Link
This one is a little trickier since you have to also sit on the windowl.resize event for those pesky people who rotate their phones. Make sure you are getting the viewport and not the screen.
Device Detection Link
Um.. don't. Really. Device detection is bad and lists go stale. MUCH better to use the other methods and really, media queries are the right solution to this.
Related
So I am trying to achieve a responsive website.
Here is my navigation so far (Window is maximized):
What I am trying to achieve is that when the window is resized, a new tab will appear called menu. This will be a button which once clicked will show all the existing links I have.
I have two lists in two separate div's, ideally, when the window is resized, I would want the content from both lists to be view able in this new menu.
This is what it looks like when Chrome is resized to its lowest width:
As you can see, those links in the image (Stretches, posture etc), those should not be visible. They should dynamically show up once menu is clicked, which is another issue, clicking menu does nothing.
Everything I have can be found in this fiddle: https://jsfiddle.net/hudnybux/
This is quite a common use-case as im sure you can imagine. Googling it took me 5 seconds, this was the first one that popped up. It seems simple and straight forward to follow.
As a general rule at stack overflow, try looking around a bit before you ask a question...people will generally respond better to your answers. :)
I've been trying to analyse how this is done for the past few hours and just can't get it working.
Here's an example: http://vpthemes.com/preview/Modality/
If you go there, look at the 4 boxes under the text "CLEAN DESIGN & GREAT FUNCTIONALITY". If you resize your browser window, you'll notice that the boxes will go 2 side by side, and then if you go even smaller, they'll all go one under the other. The WHOLE website is like that; everything seems to resize perfectly depending on the size of the window.
How the HELL is that done? I've tried so many CSS styles it's boggling my mind.
Thanks!
As kumar said its done by media querys. You could take off the responsive css classes or overwrite it with '!important'
This is Bootstrap magic. You can configure each element in order to stay still, push right, left, etc. In the end, you have a layout that magically reorganize itself according to the size of the window and the configuration you've done. The mechanics of Bootstrap are partly in JS.
Amazing, isn't it?
But, wait. There will be a time at which you will be really pissed off of magic.
With #media rules and CSS3 possibilities, you can manage to reproduce Boostrap features in order to kill the magic with fire!
I have a website which has a navigation bar go across the page in the main header. For a handheld screen device, I want the navigation list ( <ul><li>) to collapse (using CSS to set display: none;) and for a new bar to appear allowing a click to expand the menu and change the display property to display: initial;
Using CSS #media queries I can adjust that just fine and the javascript code makes the menu expand and collapse.
But once collapsed, the CSS won't override the JavaScript for larger screen sizes.
How do I ensure the navigation is always there for the larger screen size but allow it to collapse for the mobile site?
Note that there are two aspects to what you are trying to achieve: CSS + Javascript. I believe your confusion is in how these two will work together, well then let's make things clear:
You will need to code two menu bars, one for the desktop widths (anything beyond 768px or whatever you decide), and one for mobile widths, which will be at a minimum of 320px. You can use CSS media queries to display or hide each, do not use Javascript for this task.
Use Javascript (...or jQuery since it has nice functions for the following) to control the behavior of the navigation bars, such as on click events and the like. It will be good for you to look into the fadeToggle function (and similar functions) to achieve the animation of the mobile nav bar (collapsable or not).
This way you can ensure navigation is always present. A word of advice in terms of user experience: if you will be using icons to represent certain nav bar elements, make sure to use icon + text, that way it is clear to anyone what the icon represents.
Let me know if this helped you. I can write code for you but I do not want to go along and implement it without seeing what you can achieve first, feel free to edit your question with some code... the above points should be enough to get you started in the right direction.
You will have to use the desktop first approach. Write the css for what you want the style for the desktop and override using media queries later.
I want to create a menu with some items, and at the end of this menu, it has a "Show More" dropdown. This "Show More" shows the rest of the items of menu, that could not be viewed because of the width of the browser. A classic responsive problem.
To illustrate:
And when the width is less than the image before, it happens:
So, my question is, what's the best way to do that? Is there any ready solution?
I am using Foundation, so I can't use any of another CSS module like Bootstrap. But, I can use jQuery, CSS3, HTML5. I don't have more limits than that - I guess =)
I got those images from Instantcart website, so, you can go there to see it working.
In IE 6 select control(combo box) is displaying on top of menus. I checked some Javascript menus, mmmenu, but all are getting under select control. It's not fixable by assigning Z-Index. Is there any other solution.
This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls.
There are workarounds involving iframe shims, but there is no good answer. The iframe shim answer is to place an iframe underneath whatever div you're trying to place above a select, with the iframe being the same size. Unfortunately, this is a huge pain in the ass.
I suggest using a javascript menu system which already uses iframe shims, such as YUI menus (and I assume jQuery).
Most of the major javascript libraries have easy to implement solutions to this problem. We use jQuery, and the bgiframe plugin is very easy-to-use and solves the problem.
Daniel is definitely right. This is an ugly issue.
However, there may be another solution. If you are using multi-tiered menus that pop open and closed, it is possible to write JavaScript code that literally hides the problematic SELECT elements when the popup is opened (style the element to have a visibility of hidden). Then when the menu closes you can unhide that same SELECT control.
Then you just have to write code that detects which SELECT objects get in the way of a particular menu before it opens. It's not trivial code, but it's definitely possible to write. Then I'd just wrap the entire chunk of code in a conditional that checks to see if the user is on IE as there's no need to run this on Firefox or Safari.
The problem is that SELECT are "windowed" elements in IE6, and their z-index is above all the other non-"windowed" components. If you absolutely must have something above a combox, you might want to put it inside another windowed compnent, such as an IFRAME, and set the component's z-index to be higher than that of the combobox.
I must admit, this isn't a pretty solution.