5

Então, sou uma iniciante na área de Web Design, e estou tendo alguns problemas com css num site que estou desenvolvendo.

Eu tenho que fazer um menu fixo, que nada mais é que uma barra normal, mas que tenha uma figura de um trapézio no seu centro e dentro dele, uma caixa de pesquisa, como na foto. Minha dúvida é a seguinte:

Como eu poderia fazer isso da forma mais certa, para ficar responsivo? Inicialmente, eu deixei o menu fixed, e criei uma div pro trapézio e deixei como absolute, mas se for diminuindo a tela, o input da pesquisa "foge" do centro do trapézio. Alguém poderia me ajudar ou me dar uma dica de como eu poderia fazer?

Menu

       <html>
    <head>
        <meta charset="utf-8"/>
        <title>Site</title>
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
        <script type="text/javascript" src="dist/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
        <style>
            header {
                background-color: #017338;
                height: 60px;
                padding: 0.5em;
                position: fixed;
                top:0;
                width: 100%;
            }

            header p {
                color: #fff;
            }

            .navbar-brand img {
                margin-top: 5px !important;
            }

            #navbar li, #navbar a, .navbar-brand img {
                padding:0 !important;
                line-height: 60px;
                color: #fff;
            }

            #navbar li input {
                line-height: 10px;
                width:15em;
                margin-top:1.5em;
                border:0;
            }

            #jogos button {
                margin-top:5em;
            }

            #thumbs {
                margin-top:11em;
            }

            #thumbs img {
                height:200px;
                width:300px;
            }


            @media (min-width: 1000px) {
                #trapezio {
                    background-image:url('../img/trapezio.png');
                    width: 350px;
                    height:100px;
                    position:absolute;
                    left: 550px;
                }
                .nav input[type=search] {
                    height: 2em;
                    margin-left: 9.5em;
                }

                #bemvinda a {
                    margin-left:10em;
                }
            }

        </style>
    </head>
    <body>
        <header>
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <span id="trapezio"></span>
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="logo.png" alt="SENAI BLUMENAU"/></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">


                            <li>Slogan</li>
                            <li><input type="search" placeholder="pesquise um jogo"/></li>
                            <li id="bemvinda"><a href="#contact">Bem vinda, Beatriz</a></li>
                    </div><!--/.nav-collapse -->
                </div>
            </nav>
        </header>
    </body>
</html>
2
  • Obrigado pelas sugestões, Renan! Olha, no site, eu estou usando o Bootstrap, a parte do trapézio eu estou fazendo por mim mesma. Digamos que quando a tela diminui, eu dou um "display: none" no trapézio (estou usando media queries pra isso), aí no menu só fica a logo e um botão, que quando clicado mostra um menu dropdown que tem a input de pesquisa. 18/12/2014 às 23:23
  • 2
    Melhor ainda. Coloque o código html e o CSS do que for relacionado ao menu na pergunta. 18/12/2014 às 23:29

2 Respostas 2

7

Montei esse exemplo seguindo a estrutura do bootstrap.

Analise e coloque de acordo com a sua necessidade.

Criei uma div chamada .trapezoid-search e dentro um input[type=text]

<header>
  <nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="trapezoid-search">
        <input type="text" class="form-control" placeholder="Pesquise um Jogo">
      </div>

    </div>
  </nav>
</header>

Removi os links/menu para melhor representar.

header {
  background-color: #017338;
  height: 60px;
  padding: 0.5em;
  position: fixed;
  top:0;
  width: 100%;
}

header .trapezoid-search {
  margin:0 auto;
  width:30%;
  padding:20px;
  background:#017338;
  position:relative;
}

header .trapezoid-search:after,
header .trapezoid-search:before {
  content: " ";
  width: 0;
  height: 0;
  position:absolute;
  top:-47px;
  background:#017338;
  z-index:-1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow:0 0 5px -1px rgba(0,0,0,0.5);
  width:100px;
  height:100px;
}

header .trapezoid-search:after {
  right:-50px;
}

header .trapezoid-search:before {
  left:-50px; 
}

Não entendi muito bem o que você quer que aconteça "por ele ser responsivo" mas de qualquer forma tenta adaptar ao seu código.

DEMO - BOOTPLY

1
  • 1
    Adaptei seu código pro meu site e ficou exatamente do jeito que eu queria. Obrigado, Diego! 20/12/2014 às 1:07
3

Você pode criar um trapézio da seguinte forma

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

Neste link aqui possui outras formas geométricas, só posicionar como desejar.

1
  • A duvida dela não é como fazer e sim como adaptar o trapézio (já feito) em telas menores. 19/12/2014 às 12:54

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 .