1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Header con buscador integrado responsive

Tema en 'Tutoriales de HTML y CSS' comenzado por RodrigoT, 23 de Agosto de 2015.

  1. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Hola a todos hoy os quiero traer un tutorial sencillo con el que podréis hacer un header con buscador integrado responsive. Mis agradecimientos a @AngelKrak y a @fede5426 sobre todo a @AngelKrak por haberme ayudado a corregir los problemas que tenia :)

    Lo primero es lo primero si queréis ver si os convence aquí tenéis http://codepen.io/RodrigoT98/pen/XbwNoX

    Vamos con el código html que es muy sencillo
    HTML:

    <header>

            <div class="movil">
                <div class="wrapper_movil">
                    <a href="#" id="un"><span class="icon-menu bt-menu no_link"></span></a>
                    <div class="logo-centrar">
                        <a href="#" class="logo-movil">N&V</a>
                   </div>
                   <form role="search" method="get" id="searchform" class="form_search_movil" action="">
                       <div class="flex_search_movil">
                           <a href="#" id="do"><span class="icon-arrow_back bt-menu no_link"></span></a>
                           <input type="text" value="" name="s" id="s" placeholder="Buscar..." class="input_search">
                           <button class="icon-search button_search_movil no_link"></button>
                       </div>
                   </form>
                   <a href="#" class="cerrar"><span class="icon-search phone_search no_link"></span></a>            
               </div>
           </div>

           <div class="wrapper">

               <div class="logo">
                   <h2><a href="#">N&V</a></h2>
               </div>

               <div class="uno_solo">
                   <nav>
                       <ul>
                           <li><a href="#">Item#1</a></li>
                           <li><a href="#">Item#2</a></li>
                           <li><a href="#">Item#3</a></li>
                           <li><a href="#">Item#4</a></li>
                           <li><a href="#">Item#5</a></li>
                           <li><a href="#"><span class="icon-search show_search no_link"></span></a></li>
                       </ul>
                   </nav>

                   <form role="search" method="get" id="searchform" class="form_search" action="">
                       <div class="flex_search">
                           <input type="text" value="" name="s" id="s" placeholder="Buscar..." class="input_search">
                           <button class="icon-search button_search no_link"></button>
                       </div>
                   </form>                
               </div>

           </div>

    </header>
    Como veis se compone de 2 partes la primera es para dispositivos móviles (class="movil") y la segunda para ordenadores (class="wrapper"). La primera se compone de 4 elementos que son el icono de menú, el logo, el formulario de búsqueda (esta oculto), y el icono de buscar. Y la segunda parte esta compuesta de un logo y de una clase llamada uno_solo que tiene dentro el nav y el formulario de búsqueda (esta oculto).

    Ahora os dejo los estilos en sass y css. Los estilos en sass no tienen los prefijos en css si que están. Es mas fácil de comprender el sass así que recomiendo ver el sass.
     
    Última modificación: 22 de Septiembre de 2015
    A angiee992, <Dan/> y AngelKrak les gusta esto.
  2. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    SASS
    Código (CSS):
    *
        padding: 0px
        margin: 0px

    body
        font-family: "Roboto", sans-serif
        padding-top: 60px

    header
        width: 100%
        background: $primario
        height: 60px
        z-index: 3000
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)
        position: fixed
        top: 0px

        .wrapper
            max-width: 1200px
            width: 90%
            margin: 0px auto

            /*FlexBox*/
            display: flex
            justify-content: space-between
            align-items: center

            .logo
                h2
                    a
                        color: #fff
                        text-decoration: none
                        font-size: 30px
                        font-weight: 400

            .uno_solo
                /*FlexBox*/
                display: flex
                flex-wrap: no-wrap

                nav
                    display: inline-block

                    ul
                        list-style: none
                        display: inline-block

                        li
                            display: inline-block
                            padding: 19px
                            cursor: pointer

                            &:hover
                               
    background: $hover

                            &:last-child
                               
    background: $primario
                                padding: 0px
                                margin-left: 15px

                            a
                                text-decoration: none
                                color: #fff
                                font-size: 17px

                .form_search
                    display: none
                    margin-left: -15px

                    .flex_search
                        display: flex

                        .input_search
                            border: none
                            padding: 10px 20px 10px 0px
                            margin: 12px 0px
                            width: 200px
                            background: transparent
                            color: #fff
                            outline-color: transparent

                            &::-moz-placeholder
                               
    color: #fff

                            &:-moz-placeholder
                               
    color: #fff

                            &::-webkit-input-placeholder
                               
    color: #fff
                         
                            &:-ms-input-placeholder
                               
    color: #fff

                        .button_search
                            border: none
                            background: transparent
                            color: #fff
                            font-size: 17px
                            cursor: pointer
                            outline-color: transparent
                            margin-bottom: 5px

        .movil
            display: none

    @media screen and (max-width: 1000px)
        body
            padding-top: 60px

        header

            .logo
                display: none

            .movil
                width: 100%
                z-index: 3000
                overflow: hidden
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)
                height: 60px

                /*FlexBox*/
                display: flex
                flex-wrap: nowrap

                .wrapper_movil
                    width: 95%
                    margin: 0px auto

                    /*FlexBox*/
                    display: flex
                    align-items: center              

                    a
                        text-decoration: none
                        color: #fff

                        .bt-menu
                            font-size: 35px
                            padding: 5px 10px
                            float: left
                            display: block
                            font-weight: 400

                        .phone_search
                            font-size: 25px
                            float: right
                            padding: 9px 10px
                            margin: 0px 5px
                            display: block

                    .logo-centrar
                        width: 86%
                        margin: auto

                        /*FlexBox*/
                        display: flex
                        justify-content: center

                        .logo-movil
                            box-sizing: border-box
                            text-decoration: none
                            font-size: 35px

                    .form_search_movil
                        display: none
                        width: 100%

                        .flex_search_movil
                            width: 100%

                            /*FlexBox*/
                            display: flex

                            #do
                                display: flex
                                align-items: center

                                .icon-arrow_back
                                    font-size: 35px
                                    padding: 5px 10px
                                    float: left
                                    display: block
                                    font-weight: 400

                            .input_search
                                border: none
                                padding: 10px 20px
                                margin: 12px 0px
                                width: 100%
                                background: transparent
                                color: #fff
                                outline-color: transparent

                                &::-moz-placeholder
                                   
    color: #fff

                                &:-moz-placeholder
                                   
    color: #fff  

                                &::-webkit-input-placeholder
                                   
    color: #fff
                             
                                &:-ms-input-placeholder
                                   
    color: #fff                      

                            .button_search, .button_search_movil
                                border: none
                                background: transparent
                                color: #fff
                                cursor: pointer
                                margin-left: 15px
                                font-size: 25px
                                padding: 9px 0px 9px 10px
                                margin: 0px 5px
                                outline-color: transparent

            .wrapper

                .uno_solo

                    nav
                        width: 80%
                        height: calc(100% - 60px)
                        position: fixed
                        right: 100%
                        margin: 0
                        overflow: scroll
                        background: $primario
                        z-index: 2000

                        /*FlexBox*/
                        display: flex
                        flex-wrap: nowrap

                        ul
                            width: 100%
                            display: block
                            box-shadow: inset 0 20px 10px -20px rgba(0,0,0,0.5)

                            li
                                display: block
                                border-bottom: 1px solid rgba(255,255,255,.5)

                                &:last-child
                                   
    display: none
                                    border-bottom: none

                                a
                                    text-align: left
                                    width: 100%
                                    display: block

                    .form_search
                        display: none
    Variables para SASS
    Código (CSS):
    //Mis Colores

    $body: #E0E0E0
    $primario: #1E1F1F
    $secundario: #191717
    $hover: #121111
    $verde: #8BC34A
     
  3. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    CSS
    Código (CSS):

    * {
      padding: 0px;
      margin: 0px; }

    body {
      font-family: "Roboto", sans-serif;
      padding-top: 60px; }

    header {
      width: 100%;
      background: #1E1F1F;
      height: 60px;
      z-index: 3000;
      -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      position: fixed;
      top: 0px; }
      header .wrapper {
        max-width: 1200px;
        width: 90%;
        margin: 0px auto;
        /*FlexBox */
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center; }
        header .wrapper .logo h2 a {
          color: #fff;
          text-decoration: none;
          font-size: 30px;
          font-weight: 400; }
        header .wrapper .uno_solo {
          /*FlexBox */
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-wrap: no-wrap;
              -ms-flex-wrap: no-wrap;
                  flex-wrap: no-wrap; }
          header .wrapper .uno_solo nav {
            display: inline-block; }
            header .wrapper .uno_solo nav ul {
              list-style: none;
              display: inline-block; }
              header .wrapper .uno_solo nav ul li {
                display: inline-block;
                padding: 19px;
                cursor: pointer; }
                header .wrapper .uno_solo nav ul li:hover {
                  background: #121111; }
                header .wrapper .uno_solo nav ul li:last-child {
                  background: #1E1F1F;
                  padding: 0px;
                  margin-left: 15px; }
                header .wrapper .uno_solo nav ul li a {
                  text-decoration: none;
                  color: #fff;
                  font-size: 17px; }
          header .wrapper .uno_solo .form_search {
            display: none;
            margin-left: -15px; }
            header .wrapper .uno_solo .form_search .flex_search {
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex; }
              header .wrapper .uno_solo .form_search .flex_search .input_search {
                border: none;
                padding: 10px 20px 10px 0px;
                margin: 12px 0px;
                width: 200px;
                background: transparent;
                color: #fff;
                outline-color: transparent; }
                header .wrapper .uno_solo .form_search .flex_search .input_search::-moz-placeholder {
                  color: #fff; }
                header .wrapper .uno_solo .form_search .flex_search .input_search:-moz-placeholder {
                  color: #fff; }
                header .wrapper .uno_solo .form_search .flex_search .input_search::-webkit-input-placeholder {
                  color: #fff; }
                header .wrapper .uno_solo .form_search .flex_search .input_search:-ms-input-placeholder {
                  color: #fff; }
              header .wrapper .uno_solo .form_search .flex_search .button_search {
                border: none;
                background: transparent;
                color: #fff;
                font-size: 17px;
                cursor: pointer;
                outline-color: transparent;
                margin-bottom: 5px; }
      header .movil {
        display: none; }

    @media screen and (max-width: 1000px) {
      body {
        padding-top: 60px; }

      header .logo {
        display: none; }
      header .movil {
        width: 100%;
        z-index: 3000;
        overflow: hidden;
        -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        height: 60px;
        /*FlexBox */
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap; }
        header .movil .wrapper_movil {
          width: 95%;
          margin: 0px auto;
          /*FlexBox */
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center; }
          header .movil .wrapper_movil a {
            text-decoration: none;
            color: #fff; }
            header .movil .wrapper_movil a .bt-menu {
              font-size: 35px;
              padding: 5px 10px;
              float: left;
              display: block;
              font-weight: 400; }
            header .movil .wrapper_movil a .phone_search {
              font-size: 25px;
              float: right;
              padding: 9px 10px;
              margin: 0px 5px;
              display: block; }
          header .movil .wrapper_movil .logo-centrar {
            width: 86%;
            margin: auto;
            /*FlexBox */
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
                -ms-flex-pack: center;
                    justify-content: center; }
            header .movil .wrapper_movil .logo-centrar .logo-movil {
              -webkit-box-sizing: border-box;
                      box-sizing: border-box;
              text-decoration: none;
              font-size: 35px; }
          header .movil .wrapper_movil .form_search_movil {
            display: none;
            width: 100%; }
            header .movil .wrapper_movil .form_search_movil .flex_search_movil {
              width: 100%;
              /*FlexBox */
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex; }
              header .movil .wrapper_movil .form_search_movil .flex_search_movil #do {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                    -ms-flex-align: center;
                        align-items: center; }
                header .movil .wrapper_movil .form_search_movil .flex_search_movil #do .icon-arrow_back {
                  font-size: 35px;
                  padding: 5px 10px;
                  float: left;
                  display: block;
                  font-weight: 400; }
              header .movil .wrapper_movil .form_search_movil .flex_search_movil .input_search {
                border: none;
                padding: 10px 20px;
                margin: 12px 0px;
                width: 100%;
                background: transparent;
                color: #fff;
                outline-color: transparent; }
                header .movil .wrapper_movil .form_search_movil .flex_search_movil .input_search::-moz-placeholder {
                  color: #fff; }
                header .movil .wrapper_movil .form_search_movil .flex_search_movil .input_search:-moz-placeholder {
                  color: #fff; }
                header .movil .wrapper_movil .form_search_movil .flex_search_movil .input_search::-webkit-input-placeholder {
                  color: #fff; }
                header .movil .wrapper_movil .form_search_movil .flex_search_movil .input_search:-ms-input-placeholder {
                  color: #fff; }
              header .movil .wrapper_movil .form_search_movil .flex_search_movil .button_search, header .movil .wrapper_movil .form_search_movil .flex_search_movil .button_search_movil {
                border: none;
                background: transparent;
                color: #fff;
                cursor: pointer;
                margin-left: 15px;
                font-size: 25px;
                padding: 9px 0px 9px 10px;
                margin: 0px 5px;
                outline-color: transparent; }
      header .wrapper .uno_solo nav {
        width: 80%;
        height: -webkit-calc(100% - 60px);
        height: calc(100% - 60px);
        position: fixed;
        right: 100%;
        margin: 0;
        overflow: scroll;
        background: #1E1F1F;
        z-index: 2000;
        /*FlexBox */
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap; }
        header .wrapper .uno_solo nav ul {
          width: 100%;
          display: block;
          -webkit-box-shadow: inset 0 20px 10px -20px rgba(0, 0, 0, 0.5);
                  box-shadow: inset 0 20px 10px -20px rgba(0, 0, 0, 0.5); }
          header .wrapper .uno_solo nav ul li {
            display: block;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
            header .wrapper .uno_solo nav ul li:last-child {
              display: none;
              border-bottom: none; }
            header .wrapper .uno_solo nav ul li a {
              text-align: left;
              width: 100%;
              display: block; }
      header .wrapper .uno_solo .form_search {
        display: none; } }
     
     
  4. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Y por ultimo pero no por eso menos importante el código jquery que es el que hace que nuestro menú sea interactivo. El codigo jQuery se compone de tres partes esencialmente la primera hace que aparezcan las cosas y cambien los iconos. La segunda se encarga de no hacer funcionar los enlaces y la ultima de desplegar el menu y cerrarlo.

    jQuery

    Código (Javascript):
    // JavaScript Document

    //Primera parte

    $(document).ready(function(){

      //Desaparece menu ordenador

      $('.show_search').on('click',function(){

          $('.form_search').toggle();

          $('.show_search').css("display", "none");

      })


      // //Aparece menu ordenador

      $('.button_search').on('click',function(){

          $('.form_search').css("display", "none");

      });


      $('.button_search').on('click',function(){

          $('.show_search').css("display", "flex");

      });



      //Aparece barra busquedas

      $('.phone_search').on('click',function(){

          //Desplegamos form_search_movil

          $('.form_search_movil').toggle();

          //Desaparece phone_search

          $('.phone_search').css("display", "none");

          //Desaparece logo

          $('.logo-centrar').css("display", "none");

          //Se cambia boton menu por flecha

          $(".bt-menu").addClass("icon-arrow_back");

          $(".bt-menu").removeClass("icon-menu");              

      })



      //Desaparece barra busquedas

      $('.button_search_movil').on('click',function(){

          //Cerramos form_search_movil

          $('.form_search_movil').toggle();

          //Aparece phone_search

          $('.phone_search').css("display", "flex");

          //Aparece logo

          $('.logo-centrar').css("display", "flex");

          //Cambiar icono flecha a menu dandole a buscar

          $('.bt-menu').css("display", "flex");

      })



      //Desaparece barra busqueda al darle a flecha

      //Ocultamos el Primer Menu

        $('.phone_search').on('click',function(){

        $("#un .bt-menu").addClass("icon-menu");

                $(".icon-menu").hide();

        });

        //Desaparece barra busqueda al darle a flecha

        $('#do .icon-arrow_back').on('click',function(){

            $('.form_search_movil').toggle();

            $('.phone_search').css("display", "flex");

            $('.logo-centrar').css("display", "flex");

            $("#do .icon-arrow_back").show();

        });

        //Mostramoms el Menu despues de Regresar

        $('.icon-arrow_back').on('click',function(){

            $(".bt-menu").show();

        });


    //Segunda parte

      //No hacer funcionar el enlace del boton menu

        $(".no_link").click(function(event){

        event.preventDefault();

        });

    });


    //Tercera parte

    //Desplegar menu

    $(document).ready(function(){


        var contador = 1;


        $('.icon-menu').click(function(){

            if (contador == 1){

                $('nav').animate({

                    left: '0'

                });

                contador = 0;

            }

            else{

                contador = 1;

                $('nav').animate({

                    left: '-100%'

                });

            }

        });


      //Cerrar solo el menu

      $('.uno_solo nav ul li, .cerrar').click(function(){

        if (contador == 0) {

          $('nav').animate({

            left: '-100%'

          });

          contador = 1;

        }

      });


    });
    Extra

    Os dejo la fuente que utilizo y las fonts
    Código (HTML5):
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>header</title>
        <link rel="stylesheet" href="sass/header.css">
        <link rel="stylesheet" href="fonts/fonts.css">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100' rel='stylesheet' type='text/css'>
    </head>
    Espero que os haya gustado ya se que no es muy complicado pero seguro que a alguien le ayuda cualquier duda dejarla en los comentarios y os intentare ayudaros en todo lo que pueda :)
     

    Archivos adjuntos:

    • fonts.zip
      Tamaño de archivo:
      226,5 KB
      Visitas:
      6
    • header.zip
      Tamaño de archivo:
      248 KB
      Visitas:
      13
    Última modificación: 22 de Septiembre de 2015
    A Yeff Kr, gammafp y AngelKrak les gusta esto.
  5. JSQO

    JSQO Nuevo Miembro

    Se incorporó:
    29 de Enero de 2015
    Mensajes:
    2
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Es funcional o hay q adaptarle php para q realice las busquedas, Solo lei x encima quiero ahorrarme tiempo
     
  6. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Le falta el codigo PHP, esta pensado para usarlo en los temas de wordpress
     

Comparte esta página