Monday 8 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Responsive Web Design for Menu, Image and Advertisements

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.


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

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

}
-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

No comments: