Implementing Responsive Web Design for Menu, Image, and Advertisements Using Javascript and CSS

In this post, we want to explain how to design responsive collapsed navigation menu, images and advertisements grids for different media devices.

Images

Image responsive design is very simple, just give width and height 100%

HTML Code

<div class="responsiveImage">
<img src="image.jpg" />
</div>

CSS Code

.responsiveImage { width: 100%;clear: both;}
.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>

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%; }

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;
}

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>

$(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>

CSS Code

Based on the 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;
}

}