CSS: Design responsivo para menu, imagem e publicidade

Você já viu um site que não possui nenhuma imagem? E portal que não tenha publicidade? E menu, acessou algum site que não possua menu de navegação? Pensando nisso, darei sequência ao artigo anterior, quando mostrei como montar um layout responsivo.

Por | @jonathanlamimkt Programação
<p>Voc&ecirc; j&aacute; viu um site que n&atilde;o possui nenhuma imagem? E portal que n&atilde;o tenha publicidade? E menu, acessou algum site que n&atilde;o possua menu de navega&ccedil;&atilde;o?</p> <p><strong>Exemplo de como ficar&aacute;:</strong></p> <p><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9799/css.jpg" alt="" /></span></p> <p>Pensando nisso, darei sequ&ecirc;ncia ao artigo anterior, quando mostrei como montar um layout responsivo. Hoje vou mostrar como criar o menu, as imagens e a publicidade.&nbsp;Vamos come&ccedil;ar vendo como trabalhar com imagens em um layout responsivo.&nbsp;<br /><br /><strong>HTML</strong></p> <p><code><div class="responsiveImage"><br />    <img src="image.jpg" /><br /></div></code></p> <p><span style="font-weight: bold;">CSS</span><br /><code>.responsiveImage { width: 100%;clear: both;}<br />.responsiveImage img{ max-width: 100%; max-height: 100%; }</code></p> <p>Quando definimos as dimens&otilde;es de qualquer imagem com 100%, ela vai ocupar 100% do bloco em que est&aacute; inserida.&nbsp;Vejamos agora como montar o menu responsivo.</p> <p><span style="font-weight: bold;">HTML</span></p> <p><code><div class="menubar"><br />    <div class="responsive-menu"><br />    Menu <a href="javascript:void(0);"><span class="menuicon"></span></a><br />    </div><br />    <ul class="menu"><br />        <li><a href="#">Link</a></li><br />        <li><a href="#">Link</a></li><br />        <li><a href="#">Link</a></li><br />        .....<br />    </ul><br /></div><br /><div style="clear:both;"></div></code></p> <p><strong>CSS (@media 768px +)</strong></p> <p><code>a { text-decoration: none; }<br />.menubar { width:100%; height:39px; background-color: #006699; }<br />.menu { float: left; margin-right:15px; position: relative; padding: 10px; }<br />.menubar .menu > li { float: left; margin-right:15px; line-height: 20px; }<br />.menu > li > a { color: #ffffff; font-size: 15px; padding:10px 15px 10px; }<br />.menu > li > a:hover, .menu > li > a:active { background-color:#4682b4; border-radius:4px; }<br />.responsive-menu { display: none; color: #ffffff; font-weight: bold; padding: 5px; border-bottom: 2px solid #ffffff;width:100%; }</code></p> <p><strong>CSS (@media 768px -)</strong></p> <p><code>@media (max-width: 767px) {<br />.menubar{clear:left; height:auto !important; display: table; }<br />.menu{ float: none; width:100%; padding:0px !important; display: none; }<br />.menubar .menu > li { width:100%; border-bottom: 1px solid #dedede; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }<br />.menu > li:hover, .menu > li:active { background-color:#4682b4;}<br />.responsive-menu { display: inline-block !important; }<br />}</code></p> <p>Para telas maiores que 768px, o menu ficar&aacute; alinhado, por isso usamos "float:left", agora, se a tela for menor que 768px, ent&atilde;o definimos o menu com uma largura de 100%, para que fique um item abaixo do outro.</p> <p><span style="font-weight: bold;">CSS (Menu Dropdown)</span></p> <p><code>/* Down Arrow Icon */<br />.menuicon {<br />width: 0;<br />height: 0;<br />border-left: 10px solid transparent;<br />border-right: 10px solid transparent;<br />border-top: 10px solid #ffffff;<br />position: absolute;<br />right: 8px;<br />top:11px;<br />}</code></p> <p>Vamos precisar utilizar javascript para criar os efeitos do menu, para que sejam exibidos os demais itens.</p> <p><span style="font-weight: bold;">JavaScript</span><span style="font-weight: bold;">&nbsp;</span></p> <p><code><script src="jquery.min.js"></script> <br /> <script type="text/javascript">// <![CDATA[ <br />$(document).ready(function()<br />{<br /><br />    $(".menuicon").click(function()<br />    {<br />        $(".menu").slideToggle();<br />    });<br />    // Window resizing function<br />    $(window).resize(function()<br />    {<br />        if($(this).width() < 767)<br />        {<br />            $(".menu").hide();<br />        }<br />        else<br />        {<br />            $(".menu").show();<br />        }<br /><br />    });<br />});<br /> // ]]></script> </code></p> <p>Passemos agora &agrave; publicidade. Vamos trabalhar nesse tutorial com 3 tamanho: 728px, 468px e 300px.</p> <p><span style="font-weight: bold;">HTML</span></p> <p><code><div class="ad_big">728px Ad</div><br /><div class="ad_medium">467px Ad</div><br /><div class="ad_small">300px Ad</div></code></p> <p>Para definirmos qual o bloco de publicidade ser&aacute; exibido, n&oacute;s trabalharemos com base na resolu&ccedil;&atilde;o de tela do usu&aacute;rio. Usaremos apenas CSS para criarmos a rotina l&oacute;gica de exibi&ccedil;&atilde;o. N&atilde;o &eacute; necess&aacute;rio nenhum Javascript para isso.<br /><br /><strong>CSS</strong></p> <p><code>.ad_big,.ad_medium,.ad_small{ padding:5px;margin:5px; }<br />.ad_medium,.ad_small { display:none; }<br /><br />/* Ads devices */<br />@media (min-width: 478px) and (max-width: 738px) {<br />.ad_medium{<br />display: block !important;<br />}<br />.ad_big,.ad_small {<br />display: none;<br />}<br />}<br /><br />@media (min-width: 325px) and (max-width: 477px) {<br />.ad_small {<br />display:block !important;<br />}<br />.ad_big,.ad_medium {<br />display: none !important;<br />}<br /><br />}<br />@media (min-width: 0px) and (max-width: 324px) {<br />.ad_small {<br />display:block !important;<br />}<br />.ad_big,.ad_medium {<br />display: none !important;<br />}<br /><br />}</code></p> <p>Para ver uma vers&atilde;o demo desse artigo, acesse <a title="Design responsivo para menu, imagem e publicidade" rel="nofollow" href="http://migre.me/d58pt" target="_blank">http://migre.me/d58pt</a>.</p>

Mais sobre: css css3 html
Share Tweet
Recomendado
Comentários
Destaquesver tudo