Javascript菜单不同的屏幕尺寸

Question

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?

Answer 1

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.

Answer 2

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:

1. 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.

2. 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.