Blogs Hub

by AskGif | Aug 29, 2019 | Category :coding

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

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

<p>In this post, we want to explain how to design responsive collapsed navigation menu, images and advertisements grids for different media devices.</p> <p>&nbsp;</p> <p>Images</p> <p>Image responsive design is very simple, just give width and height 100%</p> <p>&nbsp;</p> <p>HTML Code</p> <pre class="language-markup"><code>&lt;div class="responsiveImage"&gt; &lt;img src="image.jpg" /&gt; &lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>CSS Code</p> <pre class="language-css"><code>.responsiveImage { width: 100%;clear: both;} .responsiveImage img{ max-width: 100%; max-height: 100%; } </code></pre> <p>&nbsp;</p> <p>Menu</p> <p>Collapsing navigation menu for mobile devices to reduce screen responsive.&nbsp;</p> <p>&nbsp;</p> <p>HTML Code</p> <pre class="language-markup"><code>&lt;div class="menubar"&gt; &lt;div class="responsive-menu"&gt; Menu &lt;a href="javascript:void(0);"&gt;&lt;span class="menuicon"&gt;&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt; ..... ..... &lt;/ul&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>CSS Code @media 768px +</p> <p>Here .menu &gt; li is float:left</p> <pre class="language-css"><code>a { text-decoration: none; } .menubar { width:100%; height:39px; background-color: #006699; } .menu { float: left; position: relative; padding: 10px; } .menubar .menu &gt; li { float: left; line-height: 20px; } .menu &gt; li &gt; a { color: #ffffff; font-size: 15px; padding:10px 15px 10px; } .menu &gt; li &gt; a:hover, .menu &gt; li &gt; 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%; }</code></pre> <p>&nbsp;</p> <p>CSS Code for menu dropdown arrow.</p> <pre class="language-css"><code>/* 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; }</code></pre> <p>&nbsp;</p> <p>JavaScript</p> <p>Contains javascipt code. $(".menuicon").click(function(){} - menuicon is the class name of the arrow. Using slideToggle $(".menu").slideToggle(); for drop down this list.</p> <pre class="language-javascript"><code>&lt;script src="jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $(".menuicon").click(function() { $(".menu").slideToggle(); }); // Window resizing function $(window).resize(function() { if($(this).width() &lt; 767) { $(".menu").hide(); } else { $(".menu").show(); } }); }); &lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>$(window).resize(function() is understand the screen resolution, based on width it will show and hide .menu part.&nbsp;</p> <p>&nbsp;</p> <p>Advertisement Blocks</p> <p>&nbsp;</p> <p>HTML Code</p> <p>I have created three horizontal DIVs are .ad_big 728px, .ad_medium 468px and .ad_small 300px.</p> <pre class="language-markup"><code>&lt;div class="ad_big"&gt;728px Ad&lt;/div&gt; &lt;div class="ad_medium"&gt;467px Ad&lt;/div&gt; &lt;div class="ad_small"&gt;300px Ad&lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>CSS Code</p> <p>Based on the media resolution system will show advertisement blocks.</p> <pre class="language-css"><code>.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; } }</code></pre>

read more...