Responsiveness using jQuery

JavaScript
,
1

Hi.

I’ve created this small fiddle in order to show what I’m trying to do. http://jsfiddle.net/tmrd/haxpff0b/3/

When the screen gets smaller, I want to hide menu and add it to the navbar (top). The menu will disappear from the left and will be added to the top navbar.

Feed will contain all the space left, but more div also will disappear and I’ll make it load at the top of the feed.

I should use jQuery (or JavaScript) to do the last part, right? Can it be using CSS? If it does, can you give me a hint?

I’m waiting for your replies, thank you!

2

Hi,

Generally you would design a site around the content and not the other way around because you never know how your content will fit until you see it in place.

You have floated the columns and given them a height so that means you layout can never grow. If you have done that just to get equal columns then you should use display:table and table-cell instead for automatic equal columns without having to fix the height.

Also when creating RWD you generally want to let things move naturally rather than forcing then into places where they really don’t want to go.

It’s easy to get the left column under the header but its not easy to get the right column to the top of the middle column. You can float it right but then you wil lose the equal column effect.

Here is about the best you can do but note that the right column is not an equalising column and relies on a magic number to create its height.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#container {
	width:100%;
	max-width:1000px;
	margin:auto;
}
#nav {
	height:50px;
	max-width:1000px;
	background-color:yellow;
}
.main {
	display:table;
	width:100%;
	height:400px;
}
#menu {
	display:table-cell;
	vertical-align:top;
	width:15%;
	max-width:150px;
	background-color:brown;
}
#feed {
	display:table-cell;
	vertical-align:top;
	background-color:yellowgreen;
}
#more {
	float:right;
	width:25%;
	min-height:400px;
	max-width:250px;
	background-color:blue;
}
@media only screen and (max-width: 767px) {
	#menu,#feed,#more{display:block;width:auto;max-width:none;float:none;min-height:25px;}
}
</style>
</head>

<body>
<div id="container">
		<div id="nav">Nav</div>
		<div class="main">
				<div id="menu">Menu</div>
				<div id="feed"><div id="more">More</div>Feed</div>
				
		</div>
</div>
</body>
</html>

Note that breakpoints should be based on the design and not where you believe an imaginary device to exist. There are so many devices at so many widths now that you really need to forget about them and concentrate on the points in the design that look awkward at certain widths and then create your breakpoint based on your design.

You don’t really want to do this with JS either as that is not the way forward.:slight_smile:

3

Thank you for your answer.

You have floated the columns and given them a height so that means you layout can never grow.

I did it in order to give an example.

It’s easy to get the left column under the header but its not easy to get the right column to the top of the middle > column. You can float it right but then you will lose the equal column effect.

The thing is, I already have a dropdown in the top nav. When the page gets small (<1024px), I will have to remove the left sidebar and add it to either a new menu (at the top) or to the existing top nav. What kind of approach is suitable for this? Image : http://i.imgur.com/59Onv4H.png

Coding a separate site for mobile users would do, but it isn’t recommended, so I will try to apply the modern techniques here.

There are so many devices at so many widths now that you really need to forget about them and concentrate on the points in the design that look awkward at certain widths and then create your breakpoint based on your design.

Absolutely. I put breakpoints based on my design. If the screen gets smaller and make my website unreadable or hard to navigate, I put a breakpoint there.

4

It depends on what you are asking exactly?

It’s hard to get a clear picture with coloured boxes but I’m wondering if you also have a nav in the left column and that you want to add that to the nav in the top menu at smaller screen sizes?

You can’t actually inject code into other elements with css alone but there’s nothing stopping you making 2 menus at the top. The top nav can be turned into the main hamburger menu and then you could have a subnav underneath which would be your side menu. The code I gave above will allow all that to happen in the right place along with your preferred column order.

If you want the left column links appended to the main top nav (all ass one nav) then you would need JS for that but unless there’s no other option its not an approach I would like to take. It means that you have to check for the media query change with js (matchmedia) and then append the html at that point.

The hamburger menu alone can be done in CSS but you would need to add a click effect in JS to open it (or use the checkbox hack).

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.