0

Estoy tratando de hacer que el imput-type de la barra de navegación para buscar sea solo una imagen de lupa, y una vez pinchando, toda la barra de navegación se transforme en el input-text, cambiando también de color y ligeramente la altura de toda la barra. Hasta ahora solo he conseguido lo que muestra mi código, en el cual ya me ayudaron (@Camilo Vasquez, @Pepo Gonzalez, @Alvaro Montoro), y revisando documentación de W3schools. Si alguien me puede dar alguna idea para continuar construyendo mi web. Gracias.

/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/
html, body {
    height:100%;
    margin:0px;
    color:#444444;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    font:400 16px/1.8 sans-serif;
    }
    
    .nav-navbar-nav{
        font-size: 5;
    
    }
    .bgimg-1, .bgimg-2, .bgimg-3 {
    position:relative;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    }
    .bgimg-1 {
    background-image:url("../imagenes/bg_01.jpg");
    height:100%;
    }
    .bgimg-2 {
    background-image:url("../imagenes/bg_02.jpg");
    height:100%;
    }
    .bgimg-3 {
    background-image:url("../imagenes/bg_03.jpg");
    height:100%;
    }
    .caption {
    position:absolute;
    left:10%;
    top:48%;
    width:80%;
    margin:auto;
    color:#FFFFFF;
    font-size:24px;
    text-align:center;
    letter-spacing:10px;
    background-color:#444444;
    }
    h2 {
    text-transform:uppercase;
    font:20px sans-serif;
    letter-spacing:4px;
    color:#444444;
    }
    a {
    text-decoration:none;
    letter-spacing:3px;
    }
    .navbar-nav{
      margin-left: 5% !important;
    }
    
    #center{
      padding-right:2%;
   }

    #header{
      position: fixed;
      width: 100%;
      z-index: 1000;
      font-size: 6
    }
    
    .navbar{
      margin-bottom: 0px !important;
    }

    .navbar ul li a{
      font-size: 12px
    }

    .col-md-6{
      padding-left: 5%;
    }

    .col-md-6{
      padding-right: 5%;
    }
<!DOCTYPE html>
<html lang="es">

<head>
    <title>PRINCIPAL</title>
    <meta charset="utf-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width">

    <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/todo.css" type="text/css" rel="stylesheet">
    <style> 
        input[type=text] {
            width: 130px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('#');
            background-position: 10px 10px; 
            background-repeat: no-repeat;
            padding: 3px 20px 12px 40px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }
        
        input[type=text]:focus {
            width: 50%;
        }
        </style>
</head>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<body>
    <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <!-- Logo and responsive toggle -->
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">
                        <span class="glyphicon glyphicon-fire"></span>
                      MIGUEL ESPESO
                    </a>
                </div>
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a target"_blank" href="Contacto.html">CONTACTO</a>
                        </li>
                        <li>
                            <a href="#">TUTORIALES</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE MI
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a target="_blank" href="curriculum.html">CURRICULUM</a>
                                </li>
                                <li>
                                    
                                    <a target="_blank" href="proyectos.html">LOGROS</a>
                                </li>
                                <li>
                                    <a href="#">Diseño</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <!-- busqueda -->
                    <!--<form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>-->
                    <form>
                        <input type="text" name="search" placeholder="Buscar...">
                      </form>

                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>

    <!-- AKI EMPIEZA ELCONDUMIO-->


    <div class="bgimg-1">
        <div class="caption">
            <span>CREAMOS LA APLICACION QUE NECESITE PARA SU NEGOCIO</span>
        </div>
    </div>

    <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
        <h2 style="text-align:center;">CURRICULUM</h2>
        <h1>BIENVENIDOS A MI SITIO WEB...</h1>
        <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. 
         En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que 
         vaya adquiriendo en el curso. </p>
    </div>

    <div class="bgimg-2">
        <div class="caption">
            <span>EMPEZANDO EN DESARROLLO WEB</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
            <p>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
        </div>
    </div>

    <div class="bgimg-3">
        <div class="caption">
            <span>MAS IMAGENES</span>
        </div>
    </div>

    <div style="position:relative;">
        <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
            <p>AQUI PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
        </div>
    </div>

    <div class="bgimg-1">
        <div class="caption">
            <span>¡DIVERTIDO, EH!</span>
        </div>
    </div>
</body>

</html>

1 respuesta 1

1

buenas amigo espero esto sea lo que buscas !!

Aqui te dejo el CodePen para que lo veas mejor saludos

CodePen

var activo = false
$("#buscar").click(function() {
  if (!activo) {
    $(this).parent("div").css({
      "width": "100%"
    });
    $(this).find("img").attr("src", "http://svgshare.com/i/44D.svg")

  } else {
    $(this).parent("div").css({
      "width": "40px"
    });
    $(this).find("img").attr("src", "http://svgshare.com/i/42h.svg")
  }
  activo = !activo
})
/* LA VERDAD ES QUE FUNCIONA CASI TODO GRACIAS A LOS RETOQUES DE Camilo Vasquez, Alvaro Montoro*/


/*codigo nuevo*/

.buscar {
  position: absolute;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  right: 0px;
  transition: all .3s ease;
  z-index: 100;
}

.buscar input {
  height: 100%;
  width: 100%;
  padding:10px;
}

.buscar span {
  position: absolute;
  right: 0px;
  padding: 15px;
  background: rgb(245, 245, 245);
}

.buscar span img {
  width: 18px
}


/*codigo nuevo*/

html,
body {
  height: 100%;
  margin: 0px;
  color: #444444;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font: 400 16px/1.8 sans-serif;
}

.nav-navbar-nav {
  font-size: 5;
}

.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("../imagenes/bg_01.jpg");
  height: 100%;
}

.bgimg-2 {
  background-image: url("../imagenes/bg_02.jpg");
  height: 100%;
}

.bgimg-3 {
  background-image: url("../imagenes/bg_03.jpg");
  height: 100%;
}

.caption {
  position: absolute;
  left: 10%;
  top: 48%;
  width: 80%;
  margin: auto;
  color: #FFFFFF;
  font-size: 24px;
  text-align: center;
  letter-spacing: 10px;
  background-color: #444444;
}

h2 {
  text-transform: uppercase;
  font: 20px sans-serif;
  letter-spacing: 4px;
  color: #444444;
}

a {
  text-decoration: none;
  letter-spacing: 3px;
}

.navbar-nav {
  margin-left: 5% !important;
}

#center {
  padding-right: 2%;
}

#header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 6
}

.navbar {
  margin-bottom: 0px !important;
}

.navbar ul li a {
  font-size: 12px
}

.col-md-6 {
  padding-left: 5%;
}

.col-md-6 {
  padding-right: 5%;
}
<head>
  <title>PRINCIPAL</title>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width">

  <!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="css/todo.css" type="text/css" rel="stylesheet">
  <style>
    input[type=text] {
      /*width: 130px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      background-color: white;
      background-image: url('#');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      padding: 10px;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
    }
    
    input[type=text]:focus {
      width: 50%;
    }*/
  </style>
</head>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->

<body>
  <header id="header">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container">
        <!-- Logo and responsive toggle -->
        <div class="navbar-header">

          <a class="navbar-brand" href="#">
            <span class="glyphicon glyphicon-fire"></span> MIGUEL ESPESO
          </a>
          <!-- codigo Nuevo -->
          <div class="buscar">
            <span id="buscar"><img src="http://svgshare.com/i/42h.svg">            </span>
            <input placeholder="Buscar" type="text" name="" value="">
          </div>
          <!-- codigo Nuevo -->
        </div>
        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">PRINCIPAL</a>
            </li>
            <li>
              <a target "_blank" href="Contacto.html">CONTACTO</a>
            </li>
            <li>
              <a href="#">TUTORIALES</a>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE MI
                                <span class="caret"></span>
                            </a>
              <ul class="dropdown-menu">
                <li>
                  <a target="_blank" href="curriculum.html">CURRICULUM</a>
                </li>
                <li>

                  <a target="_blank" href="proyectos.html">LOGROS</a>
                </li>
                <li>
                  <a href="#">Diseño</a>
                </li>
              </ul>
            </li>
          </ul>
          <!-- busqueda -->
          <!--<form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>-->
          <form>
<!--             <input type="text" name="search" placeholder="Buscar..."> -->
          </form>

        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /

-->
    </nav>
  </header>

  <!-- AKI EMPIEZA ELCONDUMIO-->


  <div class="bgimg-1">
    <div class="caption">
      <span>CREAMOS LA APLICACION QUE NECESITE PARA SU NEGOCIO</span>
    </div>
  </div>

  <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
    <h2 style="text-align:center;">CURRICULUM</h2>
    <h1>BIENVENIDOS A MI SITIO WEB...</h1>
    <p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate. En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que vaya adquiriendo
      en el curso. </p>
  </div>

  <div class="bgimg-2">
    <div class="caption">
      <span>EMPEZANDO EN DESARROLLO WEB</span>
    </div>
  </div>

  <div style="position:relative;">
    <div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
      <p>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
    </div>
  </div>

  <div class="bgimg-3">
    <div class="caption">
      <span>MAS IMAGENES</span>
    </div>
  </div>

  <div style="position:relative;">
    <div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
      <p>AQUI PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
    </div>
  </div>

  <div class="bgimg-1">
    <div class="caption">
      <span>¡DIVERTIDO, EH!</span>
    </div>
  </div>
</body>

4
  • Gracias compañero por tu apoyo, eso es justo lo que quiero, pero no se porque cuando lo hago en pantalla grande no funciona. Y al poner en mi web tampoco. Intentare resolver el problema por el cual no me funciona, pues cuando ejecuto tu código pantalla pequeña, si que funciona. Gracias por la molestia. Commented el 26 nov. 2017 a las 19:36
  • 1
    Listo @MiguelEspeso ya lo acomode espero ahora si te funcione Commented el 26 nov. 2017 a las 20:01
  • Gracias compañero, ya estudiare como lo has echo, no me queda muy claro. Commented el 26 nov. 2017 a las 20:51
  • 1
    bueno no es tan complicado solo le agregue un div al menu que contiene un span y un input con javascript pongo el contenedor al 100% y al segundo click a 40 px que es el tamaño del boton inicial espero te ayude saludos Commented el 26 nov. 2017 a las 20:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.