Tenho um conjunto de links (que possuem uma estilização que faz com que pareçam botões) em meu site, eles funcionam adequadamente quando em um browser de computador ou tablet porém quando em smartphones gostaria de transformar estes links (botões)
em Slide Down Responsive
como é feita esta mudança de layout (por conseguinte o html)?
Código HTML:
<header>
<div class="container">
<div class="row">
<div id="profile_information" class="col-md-8 col-md-offset-2">
<img id="profile_image" src="assets/images/misc/Tio-Sam.png">
<div id="profile_content">
<h1 class="nome"><strong>Nome</strong></h1>
<h2 class="desc">Descrição</h2>
<a href="#" class="social" id="email" target="_blank"></a>
<a href="#" class="social" id="linkedin" target="_blank"></a>
<a href="#" class="social" id="curriculum" target="_blank"></a>
<a href="#" class="social" id="github" target="_blank"></a>
<a href="#" class="social" id="sopt" target="_blank"></a>
</div>
<img id="claws" src="assets/images/misc/Claws.png">
<div id="menu">
<a class="btn btn-xs btn-info gray" href="index.html">Sobre mim</a>
<a class="btn btn-xs btn-info gray" href="conhecimentos.html">Conhecimentos</a>
<a class="btn btn-xs btn-info gray" href="#">Aprender e Atualizar</a>
<a class="btn btn-xs btn-info gray" href="contato.html">Contato</a>
<a class="btn btn-xs btn-info gray" href="experiencia.html">Experiência</a>
<a class="btn btn-xs btn-info gray" href="portfolio.html">Portfólio</a>
</div>
</div>
</div>
</div>
</header>
Imagem de como esta no computador:
Imagem de como esta no browser (portrait):
Imagem de como deveria ficar (portrait):
Slide down aberto:
@media
mas o problema não se restringe somente a isto osslide down menu responsive
que construi tinham uma estrutura de html diferente e não eram compostos por botões.slide down
e quando passa da resolução o inverso.