I've been investigating ways of creating a responive menu.
The standard technique would be to use a navicon on smaller devices which would trigger some kind of fly out/drop down menu.
I would like the most common options to show on screen, so I came up with the idea of a nav-bar, consisting of only a few important menu items, which would be visible on smaller devices. This would still need the navicon to display any additional items.
I then came across a menu which fulfills my requirements better in that it is more dynamic. The concept is that the menu grows as the screen size grows, but only displays an option when there is enough screen width to accomodate it fully. The remaining options are tucked beneath a dynamic navicon.
Here is the menu: http://www.money.co.uk/
As you will see changing the screen width changes the available options.
I could produce a semi-dynamic version using my media query breakpoints, but it would be good to be able to create a fully dynamic version. I'm guessing that it uses javascript - but as far as the techinque to be able to determine the available space and the space required, I don't know where to start.
I have some basic js/jquery knowledge, but would appreciate it if anyone could give me some guidance on how to go about approaching this one.
Thanks in advance.
Responsive menus are nothing, but its just a style manipulation as per screen size. You can go for CSS3 media queries to do it. It has inbuilt functionality to define the screen size.
#media (max-width: 912px) and (min-width: 681px)
Then, you need to manipulate the stylesheet. This is very common approach. Although, you can go with javascript as well by using window resize events and change your stylesheet accordingly. So whenever you will resize the window it will automatically overwrite the defined stylesheet.
Although, it is not recommended to manage it through javascript as it has lots of code complexity while managing the style. Use CSS media queries.
Hope this helps :)
Related
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 am looking to create an image that is responsive but also expandable. I need to do this all in HTML/CSS and utlize either Javascript or JQuery to make it expandable. I'm able to do either an expandable unit, or a responsive image - but having a hard time combining the two things. Could use some examples or guidance.
So the example scenario would be, on intial page load there is a 924x70 across the page (that is responsive). If you click that unit it expands to 924x250 (this unit also needs to be responsive) - is this even possible?
Thanks in advance!
You could use responsive design through media queries to control the initial image size. Then use jquery to adjust the size on click.
Here is a basic example that uses the mouse hover to change the image size. Adjusting the window size will trigger the media queries, but you will need to do this before mouse hover. It should be a straight forward task to adjust this base example to your needs.
basic html
<img src="theImage" />
media query
#media screen and (max-width:300px){
img{width:200px;}
}
jquery
see demo
hope this helps...
So I am pretty new to this but I am wondering for a web page that has a big image in the middle like github:windows page, how would do you work with the image inside that div/area depending on the screen size? is there a way to get images to resize or be cut off depending on either window size or screen size? is it typical practice to use media queries to change the picture based on the device? How is this done in css (can I reselect src in css for the img tag)? do you have to use a window resize js event to continually re-check like masonry?
I know these are quite a few questions (sorry) but I am really just looking for advice on best practice approach as again I am new to this....
always appreciated!
Adaptive Images may be what you are looking for. It offers dynamic resizing and caching of images based on screen size. It's very easy to implement and has very few dependencies.
I am developing an application where users will be able to open tabs. For your note, I am using the Bootstrap CSS framework, and it has a tab plugin as well. (In case I need a more flexible approach I can use a different library for this job.)
http://twitter.github.com/bootstrap/javascript.html#tabs
What I need is to have a flexible width for tabs. It should work like Chrome/Firefox's tabs. If the collective width of the tabs is less than the width of the bar, it should work as it is is. However if it is longer than the width of the bar, then the size of each tab width should reduce equally. (If you open 10-20 tabs using chrome/firefox, you'll understand what I mean)
Is there any easy way to do this, without using javascript? The only solution that comes up to my mind is to get the inner width of the bar using javascript and get the width of the other tabs and sum them up. If the sum is higher, then I can resize each tab.
I can implement this solution but I fear it will be hard to ensure cross browser compatibility. Is there any easier way to achieve this?
Thanks in advance,
You don't need JavaScript as long as you can rely on a CSS algorithm that adapt width to its content: the table layout algorithm :)
See http://jsfiddle.net/r9yrM/1/ from my previous answer for examples.
Don't forget to have a minimum padding on each "cell", text stuck to a border isn't very readable (and ugly).
With JS, you could decide of a maximum number of tabs (or a minimum "reasonable" width) and above (below) that number, add a class on the parent that will trigger each tab to render as float: left and block and not table-cell anymore. Then it'll occupy 2 or more lines (like the extension Tab Mix Plus on Firefox)
You could adjust the width of nav nav-tabs li elements after they are rendered.
Calculate how many tabs fit in the parent element at their normal size and reduce each tab by a percentage of a single tab width for each tab that exceeds the max number.
I've tried to solve the same problem today... maybe my solution helps you a little more: http://www.da3x.de/blog/flexible-tab-panel-with-overlapping-elements/
It uses HTML + CSS only... no JS so far. But I think I'd need some JS to react on the actual width of the browser window.