Create slide down menu Responsive

Asked

Viewed 214 times

0

I have a set of links (which have a stylization that makes them look like buttons) on my site, they work properly when on a computer browser or tablet but when on smartphones would like to transform these links (botões) in Slide Down Responsive how this layout change is made (so html)?

HTML code:

<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>

Picture of how this on the computer:

inserir a descrição da imagem aqui

Screenshot of how this is in the browser (Portrait):

inserir a descrição da imagem aqui

Image of how it should look (Portrait):

inserir a descrição da imagem aqui

Open slide down:

inserir a descrição da imagem aqui

html css

  • If I understand what you want, you will need it http://www.w3schools.com/cssref/css3_pr_mediaquery.asp When x resolution is displayed one way and by default another

  • Ta using Bootstrap? Can you set it to emulate there?

  • @Yes I’m wearing bootstrap.

  • @Maiconcarraro I’ve seen this @media but the problem is not restricted to this alone slide down menu responsive that I built had a different html structure and were not composed of buttons.

  • @Ricardohenrique I say when your resolution is x you hide your buttons div and display the div slide down and when it passes the resolution the reverse.

  • I understand more so the html would get kind of big correct.

  • @bfavaretto would like you to give me feedback on the tag wiki that I propose some are accepted and some are not, there are few but I would like to know why I can improve.

Show 2 more comments

1 answer

1

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.