En mi odisea de ignorancia de programación (un poquito, lo justito) he estado buscando durante bastante tiempo una barra de búsqueda desplegable de buen ver para que los foreros menos cercanos al tema del internet no tuvieran que verselas con una pagina de busqueda con 50 opciones, y flipando con la poca informacion que existe en español sobre este tema y sobretodo de MyBB, he logrado "programar" y adaptar una en completo CSS para MyBB.
Explicacion:
Basicamente es una pequeña barra de busqueda, que de normal es un boton, y cuando lo pulsas se expande hacia la izquierda, con efecto de transicion, el boton desaparece al abrirse y deja a la vista el texto de ayuda (se escribe y se pulsa intro, no hay boton para devolver la busqueda), y al hacer click en cualquier parte del foro que no sea la barra, esta vuelve a su forma de boton. Aclaro que el ejemplo y codigos que yo doy es para un menu pequeñito, comunmente donde estan los enlaces principales, pero se puede adaptar.
Imagenes:
Cerrado:
![[Imagen: HfTien1.png]](http://i.imgur.com/HfTien1.png)
Abierto:
![[Imagen: GgGSJXF.png]](http://i.imgur.com/GgGSJXF.png)
Tutorial:
Como siempre, no todos los temas son iguales, pero normalmente los menus se componen con un HTML simple, <ul><li>... etc, asi que lo que haremos sera incrustar la barra de busqueda en su lugar.
Busca tu menu y pon este codigo donde creas conveniente, comunmente en la plantilla header:
Luego añade este codigo CSS a tu global.css:
Nota 1:
El codigo #007ABE es el color de mi ejemplo, cambialo al gusto.
Nota 2:
El codigo #eee es el color de la barra de busqueda, cambialo al gusto.
Nota 3:
Este es el tamaño que cogera al al desplegarse, cambiarlo al gusto, por defecto 400px.
Nota 4:
El color del texto cuando escribas, cambialo al gusto, por defecto #000.
Nota 5:
El color del texto de la ayuda, cambialo al gusto, por defecto #999.
Luego tienes que colocar la imagen que adjunto en la carpeta /images/, y listo.
Como veis, no requiere javascript ni demas, asi que es totalmente modificable, si necesitais ayuda, por aqui estare.
¡Saludos!
Explicacion:
Basicamente es una pequeña barra de busqueda, que de normal es un boton, y cuando lo pulsas se expande hacia la izquierda, con efecto de transicion, el boton desaparece al abrirse y deja a la vista el texto de ayuda (se escribe y se pulsa intro, no hay boton para devolver la busqueda), y al hacer click en cualquier parte del foro que no sea la barra, esta vuelve a su forma de boton. Aclaro que el ejemplo y codigos que yo doy es para un menu pequeñito, comunmente donde estan los enlaces principales, pero se puede adaptar.
Imagenes:
Cerrado:
Abierto:
Tutorial:
Como siempre, no todos los temas son iguales, pero normalmente los menus se componen con un HTML simple, <ul><li>... etc, asi que lo que haremos sera incrustar la barra de busqueda en su lugar.
Busca tu menu y pon este codigo donde creas conveniente, comunmente en la plantilla header:
Código:
<li>
<form class="forma-busqueda cf" action="/search.php" method="post">
<label for="search_box">
<span> </span>
</label>
<input name="keywords" id="search_box" type="text" placeholder="Escribe aqui lo que quieres encontrar y pulsa Intro" >
<input type="hidden" name="action" value="do_search" class="boton44"/>
</form>
</li>Luego añade este codigo CSS a tu global.css:
Código:
.forma-busqueda {
margin-left: -2px;
}
.forma-busqueda input {
color: transparent;
width: 30px;
height: 32px;
float: left;
border: 0;
background: #007ABE url(/images/search-icon.png) no-repeat center; /* Nota 1 */
-webkit-transition:all 0.5s linear; /* Chrome y Safari */
-o-transition:all 0.5s linear; /* Opera */
-moz-transition:all 0.5s linear; /* Mozilla Firefox */
-ms-transition:all 0.5s linear; /* Internet Explorer */
transition:all 0.5s linear; /* W3C */
}
.forma-busqueda input:focus {
padding-left: 5px;
font: 14px 'didact gothic';
color:#000; /* Nota 4 */
background: #eee url(/images/search-icon.png) no-repeat 9px center; /* Nota 2 */
-webkit-transition:all 0.5s linear; /* Chrome y Safari */
-o-transition:all 0.5s linear; /* Opera */
-moz-transition:all 0.5s linear; /* Mozilla Firefox */
-ms-transition:all 0.5s linear; /* Internet Explorer */
transition:all 0.5s linear; /* W3C */
width: 400px; /* Nota 3 */
outline: 0;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.forma-busqueda input::-webkit-input-placeholder {
color: #999; /* Nota 5 */
font-weight: normal;
font-style: italic;
}
.forma-busqueda input:-moz-placeholder {
color: #999; /* Nota 5 */
font-weight: normal;
font-style: italic;
}
.forma-busqueda input:-ms-input-placeholder {
color: #999; /* Nota 5 */
font-weight: normal;
font-style: italic;
}Nota 1:
El codigo #007ABE es el color de mi ejemplo, cambialo al gusto.
Nota 2:
El codigo #eee es el color de la barra de busqueda, cambialo al gusto.
Nota 3:
Este es el tamaño que cogera al al desplegarse, cambiarlo al gusto, por defecto 400px.
Nota 4:
El color del texto cuando escribas, cambialo al gusto, por defecto #000.
Nota 5:
El color del texto de la ayuda, cambialo al gusto, por defecto #999.
Luego tienes que colocar la imagen que adjunto en la carpeta /images/, y listo.
Como veis, no requiere javascript ni demas, asi que es totalmente modificable, si necesitais ayuda, por aqui estare.
¡Saludos!
- Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
- Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)
un gran aporte a Mybb