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 Programação Pular para comentários
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?

Exemplo de como ficará:

CSS: Design responsivo para menu, imagem e publicidade

Pensando nisso, darei sequência ao artigo anterior, quando mostrei como montar um layout responsivo. Hoje vou mostrar como criar o menu, as imagens e a publicidade. Vamos começar vendo como trabalhar com imagens em um layout responsivo. 

HTML


   
CSS: Design responsivo para menu, imagem e publicidade

CSS
.responsiveImage { width: 100%;clear: both;}
.responsiveImage img{ max-width: 100%; max-height: 100%; }

Quando definimos as dimensões de qualquer imagem com 100%, ela vai ocupar 100% do bloco em que está inserida. Vejamos agora como montar o menu responsivo.

HTML


CSS (@media 768px +)

a { text-decoration: none; }
.menubar { width:100%; height:39px; background-color: #006699; }
.menu { float: left; margin-right:15px; position: relative; padding: 10px; }
.menubar .menu > li { float: left; margin-right:15px; 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 (@media 768px -)

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

Para telas maiores que 768px, o menu ficará alinhado, por isso usamos "float:left", agora, se a tela for menor que 768px, então definimos o menu com uma largura de 100%, para que fique um item abaixo do outro.

CSS (Menu Dropdown)

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

Vamos precisar utilizar javascript para criar os efeitos do menu, para que sejam exibidos os demais itens.

JavaScript 


Passemos agora à publicidade. Vamos trabalhar nesse tutorial com 3 tamanho: 728px, 468px e 300px.

HTML

728px Ad

467px Ad

300px Ad

Para definirmos qual o bloco de publicidade será exibido, nós trabalharemos com base na resolução de tela do usuário. Usaremos apenas CSS para criarmos a rotina lógica de exibição. Não é necessário nenhum Javascript para isso.

CSS

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

}

Para ver uma versão demo desse artigo, acesse http://migre.me/d58pt.

Compartilhe com seus amigos:
Comentários:
Carregar comentários