This post is the continuation of my previous Responsive Web Design using CSS3. I had explained how to design a basic responsive web page using CSS3 and Modernizr for lower version browsers. In this post we want to explain how to design responsive collapsed navigation menu, images and advertisements grids for different media devices.
Download Script
Live DemoTry live demo with different screen resolutions.
Developer
Arun Kumar Sekar
Engineer, Plugin Expert
Chennai, INDIA
Engineer, Plugin Expert
Chennai, INDIA
Images
Image responsive design is very simple, just give width and height 100%HTML Code
<div class="responsiveImage">
<img src="image.jpg" />
</div>
<img src="image.jpg" />
</div>
CSS Code
.responsiveImage { width: 100%;clear: both;}
.responsiveImage img{ max-width: 100%; max-height: 100%; }
.responsiveImage img{ max-width: 100%; max-height: 100%; }
Menu
Collapsing navigation menu for mobile devices to reduce screen responsive. HTML Code
<div class="menubar">
<div class="responsive-menu">
Menu <a href="javascript:void(0);"><span class="menuicon"></span></a>
</div>
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
.....
.....
</ul>
</div>
<div style="clear:both;"></div>
<div class="responsive-menu">
Menu <a href="javascript:void(0);"><span class="menuicon"></span></a>
</div>
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
.....
.....
</ul>
</div>
<div style="clear:both;"></div>
CSS Code @media 768px +
Here .menu > li is float:left
a { text-decoration: none; }
.menubar { width:100%; height:39px; background-color: #006699; }
.menu { float: left; position: relative; padding: 10px; }
.menubar .menu > li { float: left; line-height: 20px; }
.menu > li > a { color: #ffffff; font-size: 15px; padding:10px 15px 10px; }
.menu > li > a:hover, .menu > li > a:active { background-color:#4682b4; border-radius:4px; }
.responsive-menu { display: none; color: #ffffff; font-weight: bold; padding: 5px; border-bottom: 2px solid #ffffff;width:100%; }
.menubar { width:100%; height:39px; background-color: #006699; }
.menu { float: left; position: relative; padding: 10px; }
.menubar .menu > li { float: left; line-height: 20px; }
.menu > li > a { color: #ffffff; font-size: 15px; padding:10px 15px 10px; }
.menu > li > a:hover, .menu > li > a:active { background-color:#4682b4; border-radius:4px; }
.responsive-menu { display: none; color: #ffffff; font-weight: bold; padding: 5px; border-bottom: 2px solid #ffffff;width:100%; }
CSS Code @media 767px -
Here .menu > li is width:100%
@media (max-width: 767px) {
.menubar{clear:left; height:auto !important; display: table; }
.menu{ float: none; width:100%; padding:0px !important; display: none; }
.menubar .menu > li { width:100%; border-bottom: 1px solid #dedede; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }
.menu > li:hover, .menu > li:active { background-color:#4682b4;}
.responsive-menu { display: inline-block !important; }
}
.menubar{clear:left; height:auto !important; display: table; }
.menu{ float: none; width:100%; padding:0px !important; display: none; }
.menubar .menu > li { width:100%; border-bottom: 1px solid #dedede; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }
.menu > li:hover, .menu > li:active { background-color:#4682b4;}
.responsive-menu { display: inline-block !important; }
}
CSS Code for menu dropdown arrow.
/* Down Arrow Icon */
.menuicon {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffffff;
position: absolute;
right: 8px;
top:11px;
}
.menuicon {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffffff;
position: absolute;
right: 8px;
top:11px;
}
JavaScript
Contains javascipt code. $(".menuicon").click(function(){} - menuicon is the class name of the arrow. Using slideToggle $(".menu").slideToggle(); for drop down this list.
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".menuicon").click(function()
{
$(".menu").slideToggle();
});
// Window resizing function
$(window).resize(function()
{
if($(this).width() < 767)
{
$(".menu").hide();
}
else
{
$(".menu").show();
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$(".menuicon").click(function()
{
$(".menu").slideToggle();
});
// Window resizing function
$(window).resize(function()
{
if($(this).width() < 767)
{
$(".menu").hide();
}
else
{
$(".menu").show();
}
});
});
</script>
$(window).resize(function() is understand the screen resolution, based on width it will show and hide .menu part.
Advertisement Blocks
HTML Code
I have created three horizontal DIVs are .ad_big 728px, .ad_medium 468px and .ad_small 300px.
<div class="ad_big">728px Ad</div>
<div class="ad_medium">467px Ad</div>
<div class="ad_small">300px Ad</div>
<div class="ad_medium">467px Ad</div>
<div class="ad_small">300px Ad</div>
CSS Code
Based on media resolution system will show advertisement blocks.
.ad_big,.ad_medium,.ad_small{ padding:5px;margin:5px; }
.ad_medium,.ad_small { display:none; }
/* Ads devices */
@media (min-width: 478px) and (max-width: 738px) {
.ad_medium{
display: block !important;
}
.ad_big,.ad_small {
display: none;
}
}
@media (min-width: 325px) and (max-width: 477px) {
.ad_small {
display:block !important;
}
.ad_big,.ad_medium {
display: none !important;
}
}
@media (min-width: 0px) and (max-width: 324px) {
.ad_small {
display:block !important;
}
.ad_big,.ad_medium {
display: none !important;
}
}
.ad_medium,.ad_small { display:none; }
/* Ads devices */
@media (min-width: 478px) and (max-width: 738px) {
.ad_medium{
display: block !important;
}
.ad_big,.ad_small {
display: none;
}
}
@media (min-width: 325px) and (max-width: 477px) {
.ad_small {
display:block !important;
}
.ad_big,.ad_medium {
display: none !important;
}
}
@media (min-width: 0px) and (max-width: 324px) {
.ad_small {
display:block !important;
}
.ad_big,.ad_medium {
display: none !important;
}
}
thanks :D that really helped :)
ReplyDelete:) <3 Good explanation
ReplyDeleteGoogle Ads lligal like that
ReplyDeleteThank you
ReplyDeleteit's really very usefull
The Responsiveness of Advertisement section will be very helpful for me!
ReplyDeleteie8 not supporting media sizes
ReplyDeleteVery nice post Arun. Responsive web designs are more useful than others.
ReplyDeletePerfect one what i always wanted to get!! Thanks a lot.
ReplyDeletenice move :)
ReplyDeleteyups, nice tutorial :D
ReplyDeleteawesome goog job buddy
ReplyDeleteWow! Nice tutorial and Happy New Year 2013!
ReplyDeleteHello Arun,
ReplyDeleteI have 2 level of Menu. What should i do to mange that ? Your example is for 1st level only. It will be helpful if you update this with 2-3 level menu.
Thank you
thanks
ReplyDeleteWhy your site 9lessons is not yet responsive..
ReplyDeleteIt's not working (I'm using the demo via my iPhone) but thanks for this post :)
ReplyDeletegreat love the responsive menu
ReplyDeletelove it !
ReplyDeleteNice tutorial;)
ReplyDeleteI have read your last post and read this also. keep sharing.
ReplyDeleteYou always did an awesome work!!
ReplyDeleteGrate...
ReplyDeleteThanks
ReplyDeleteI was looking forward that. Thanks for it.
ReplyDeleteI am looking forward for that and really a great thing you have explained here.
ReplyDeleteNice tutorial. I would like to use this thing on my private blog also. Thanks for sharing this.
ReplyDeleteNice Man,
ReplyDeleteI'm trying to implement this code on the blogger template to create a responsive Blogger template. Thank you Shrinivas.
thank you arun
ReplyDeleteuse display:inline-block and vertical-align:middle or top instead of float:left or right,
ReplyDeletelearned some responsive design here, thanks
Great man it helped me a lot...really good work
ReplyDeleteI was learning twitter bootstrap for creating responsive page. Your tutorial is also very helpful.
ReplyDeleteThanks.
is it poosibe to added a search bar to the menu, if yes how?
ReplyDeleteI used this in my blog and enjoyed over 1 month a responsive design. Thanks mate for a nice tutorial.
ReplyDeletehello sir, your contents supper useful
ReplyDelete