0

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:

inserir a descrição da imagem aqui

Imagem de como esta no browser (portrait):

inserir a descrição da imagem aqui

Imagem de como deveria ficar (portrait):

inserir a descrição da imagem aqui

Slide down aberto:

inserir a descrição da imagem aqui

7
  • Se eu entendi o que você quer, você vai precisar disso w3schools.com/cssref/css3_pr_mediaquery.asp Quando for até x resolução exibir de um jeito e por padrão outra 6/06/2015 às 12:56
  • Ta usando Bootstrap? Consegue colocar pra emular ai?
    – KaduAmaral
    6/06/2015 às 12:57
  • @Sim estou usando bootstrap.
    – Ricardo
    6/06/2015 às 12:58
  • @MaiconCarraro já vi este @media mas o problema não se restringe somente a isto os slide down menu responsive que construi tinham uma estrutura de html diferente e não eram compostos por botões.
    – Ricardo
    6/06/2015 às 12:59
  • @RicardoHenrique Eu digo de quando sua resolução for x você oculta sua div de botões e exibe a div slide down e quando passa da resolução o inverso. 6/06/2015 às 13:00

1 Resposta 1

1

Eu fiz diferente do seu menu mais e só você modificar http://jsfiddle.net/xuw84x1s/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .