Cómo integrar una ventana emergente de búsqueda personalizada en un menu
Introducción
Era una tarea más grande de lo que esperaba, la integración de Google Búsqueda en sitios web con la barra de navegación Bootstrap o menu....
Este tutoriales en linea pretende ser una referencia completa de principio a fin adecuando el modo, incluso para un novato como yo.
Este tutorial muestra cómo crear una barra de navegación Bootstrap con un botón de búsqueda que aparece un cuadro de diálogo modal que aloja el Google motor de búsqueda personalizado para su sitio web.
Bootstrap es un Marco de Niza
Bootstrap es, obviamente, un marco de gran alcance. Si todo lo que hizo fue estandarizar una lista de nombres de clases CSS común, eso sería suficiente para que sea útil.
Pero tirar la ayuda para el diseño de respuesta y algunas de las golosinas de jаvascript (sin la necesidad de tocar el código jаvascript) y es una super estrella.
Hay una razón por la adopción del marco casi se ha duplicado en el último año y ahora se puede encontrar en el 10% de los 10.000 sitios web en Internet...
Motivación
Después de ver un cuadro de diálogo de búsqueda modal agradable en otro sitio web, decidí ver si podía implementar algo similar usando la barra de navegación de rutina de carga y gratuito de Google motor de búsqueda personalizado.
En este tutorial voy a trabajar con HTML5 y CSS3 puro que sea sencillo. Estoy seguro de que puede tomar desde aquí, si es necesario...
Paso # 1 - La Shell HTML
Lo primero que necesita para crear la página HTML básica e incluir Bootstrap junto con un par de cuñas recomendado por el sitio web de Bootstrap.
Bootstrap consiste en un archivo CSS y jаvascript a un archivo. Tendrá que incluir tanto en la página.
<!-- https://www.tutorialesenlinea.es -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="mainBodyContent" class="container-fluid">
<!-- Your content will go here. -->
</div>
<script type="text/jаvascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>Como se puede ver, hemos incluido la versión 3.3.5 de Manos a la Obra de un CDN. El enlace de CSS está en la cabeza y puso el Bootstrap jаvascript incluye en la parte inferior de la página junto con jQuery que se requiere. Versión 3.3.5 de Bootstrap requiere jQuery 1.9.1 o superior.
Paso # 2 - Barra de navegación de shell
A continuación, vamos a insertar una barra de navegación básica Bootstrap. Haremos esto con la nav elemento y aplicar las diferentes clases de archivos de inicio que indican a Bootstrap para aplicar su estilo barra de navegación.
Inserte el siguiente código donde dice "Su contenido será ir aquí.(Your content will go here)"
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- Your navbar header related stuff will go here. -->
</div>
<div>
<!-- Your menu items will go here. -->
</div>
</div>
</nav>He optado por aplicar la barra de navegación de fijo superior de clase en mi barra de navegación por lo que se bloqueará a la parte superior de la ventana del navegador, incluso cuando se desplaza por la página.
Dentro del nav elemento que tenemos una sola div que contendrá todos nuestros contenidos barra de navegación. En el interior que tenemos dos divs movimiento, un div de cabecera y uno que contendrá todos nuestros elementos de menú.
Esto es lo que nuestra barra de navegación se ve como hasta ahora. Es sólo una línea de color gris alrededor de 50 píxeles de alto.
Vamos a empezar añadiendo cosas.
Paso # 3 - Añadir el nombre del sitio
Empezamos por la adición de nuestra marca sitio. Esta es una entidad especial para arrancar y por defecto se coloca en el lado izquierdo de la barra de navegación.
Sólo tendremos que añadir nuestro nombre de sitio con un poco de estilo para un efecto agradable.
Agregue el siguiente código donde dice "Tus cosas relacionadas con la cabecera barra de navegación se ve aquí."
<a class="navbar-brand" style="font-weight: bold;" href="https://tutorialesenlinea.es">
<span >Tutoriales</span>
<span >En linea</span></a>Es sólo un enlace con un texto de color y la barra de navegación de la marca de clase aplicada. Esto es lo que nuestra barra de navegación se parece ahora.
Paso # 4 - Añadir algunos elementos del menú
Ahora, donde dice "Sus elementos del menú se ve aquí," copiar el código de seguimiento. Estamos añadiendo tres elementos del menú: Proyectos, Artículos de casa. Estos son sólo una lista de enlaces en los que las clases especiales Bootstrap NAV y la barra de navegación nav se aplican a la lista.
<ul class="nav navbar-nav">
<li><a href="https://tutorialesenlinea.es/tutorial/">Tutoriales</a></li>
<li><a href="https://tutorialesenlinea.es/cursos/">Cursos</a></li>
<li><a href="https://tutorialesenlinea.es/tutoriales-en-linea.html">Acerca De</a></li>
</ul>Ahora tenemos algunos elementos del menú ...
Nuestra barra de navegación después de añadir algunas opciones del menú
Si reduce el ancho de su navegador ahora, verá que el menú se convierte de horizontal a vertical de una manera sensible que es mejor para los dispositivos más pequeños. Este es un comportamiento fuera de la caja.
Nuestra barra de navegación sensible en las pantallas más estrechas
Paso # 5 - Agregar un botón de acceso en el lado derecho
Vamos a conseguir un poco más de lujo y añade un botón básico CONECTAR que sentarse en el lado derecho de la barra de navegación.
También incluiremos el log-in icono de glifo para hacer las cosas un poco más agradable visualmente.
Agregue el siguiente ul elemento de la lista debajo de la que acaba de añadir. Ahora vamos a tener dos listas dentro del div elemento de menú. La primera lista se alineará izquierda y esta lista va a alinear a la derecha. Bootstrap ofrece la barra de navegación derecha clase para que esto suceda.
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://tutorialesenlinea.es/index.php?do=login">
<span class="glyphicon glyphicon-log-in"></span> Login
</a>
</li>
</ul>Ahora tenemos un bonito botón Acceder a la derecha de nuestra barra de navegación.
Nuestra barra de navegación con un botón Login alineado a la derecha.
Bien, las cosas están tomando forma. Vamos a pasar ahora a nuestra funcionalidad de búsqueda.
Paso # 6 - Agregar un botón de búsqueda
Tenemos varias cosas que hacer para nuestra funcionalidad de búsqueda, pero vamos a empezar por la adición de un botón de búsqueda.
Para ello, sólo tendremos que insertar un cuarto punto en la lista de la primera lista.
Cuando haya terminado, la lista de HTML debe ser similar a la siguiente. Tenga en cuenta que todo lo que hemos hecho es poner el cuarto punto. Usted está reemplazando la lista existente con el código siguiente. (O supongo que usted podría copiar y pegar el cuarto punto. Las decisiones, las decisiones).
No hay ningún valor para el href sin embargo, porque ... bueno, porque no sabemos lo que apunte a todavía.
En teoría, se podría apuntar a una página alojada en Google la búsqueda de su sitio, pero vamos a hacer algo un poco más interactivo.
<ul class="nav navbar-nav">
<li><a href="https://tutorialesenlinea.es/tutorial/">Tutoriales</a></li>
<li><a href="https://tutorialesenlinea.es/cursos/">Cursos</a></li>
<li><a href="https://tutorialesenlinea.es/tutoriales-en-linea.html">Acerca De</a></li>
<li>
<a href="">
<span id="searchGlyph" class="glyphicon glyphicon-search"></span>
</a>
</li>
</ul>Aquí está la barra de navegación actualizada. Cómo se ve el icono de la lupa? Bien.
Nuestra barra de navegación con un icono de búsqueda.
Paso # 7 - Ocultar el menú en las pantallas pequeñas
No me molestaré para explicar demasiado aquí, pero en aras de la exhaustividad vamos a configurar Bootstrap para colapsar nuestro menú para un pequeño icono de menú para pantallas más pequeñas. Me encanta esta función.
En el div con la clase = " navbar-header " añada el siguiente código HTML. He insertado por encima del vínculo con class = " navbar-marca ".
Este botón nos servirá como icono de menú en las pantallas más pequeñas.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>Se puede ver que el botón contiene un atributo data-target = "# myNavbar".
Este selector tiene que apuntar a nuestro div barra de navegación principal que contiene todos nuestros elementos de menú. Por lo tanto, tenemos que añadir ID = "myNavbar" para que div. Además, necesitamos un par de clases de rutina de carga adicionales para apoyar el menú colapsado, colapso y la barra de navegación-colapso.
Usted tendrá que añadir los de la clase y la identificación de atributos para el div en el siguiente ejemplo de código. La lista ( ul ) sólo se muestra en contexto.
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="https://tutorialesenlinea.es/tutorial/">Tutoriales</a></li>
...
</div>Ahora, cuando la anchura de la pantalla es pequeña, nuestro menú convierte automáticamente se muestren todos los elementos de menú que sólo se muestra el icono de menú sencillo.
menú colapsado para pantallas pequeñas.
Menú ampliado en pantallas pequeñas.
Ahora el icono de búsqueda se ve rara existe por sí mismo. En este modo, lo que realmente necesita un poco de texto para equilibrar fuera contra el elemento de menú Inicio de sesión.
Vamos a añadir una etiqueta de texto para el icono de búsqueda que sólo aparece cuando se derrumbó el menú.
Podemos hacer esto mediante la adición de un palmo y algunas clases de archivos de inicio que ocultará el texto para todos los anchos de navegador excepto por el más pequeño, que es cuando se muestra el menú colapsado.
Bootstrap admite un conjunto de cuatro clases llamado "escondida, *" donde el * es XS , SM , MD o lg de extra pequeño, pequeño, mediano y grande. Vamos a aplicar todos, pero el más pequeño sólo para permitir que el texto que se mostrará cuando el ancho del navegador es extra pequeño.
Actualizar el hipervínculo para su búsqueda de iconos de la siguiente manera:
<a href="">
<span id="searchGlyph" class="glyphicon glyphicon-search"></span>
<span class="hidden-sm hidden-md hidden-lg">Search</span>
</a>Nótese que lo que hicimos fue poner el lapso que contiene el texto "Buscar".
Ahora tenemos un menú que tiene este aspecto:
Para anchos de navegador más amplio el icono de búsqueda no tiene una descripción en texto.
Para pantallas más estrechos, el menú emergente tiene ahora una descripción de texto junto al icono de búsqueda.
Paso # 8 - Diálogo de Shell modal
He decidido que me gustaría un diálogo modal que se mostrará cuando el usuario hace clic en el icono de búsqueda. Podemos usar Bootstrap de soporte incorporado para cuadros de diálogo modales, por lo que necesitaremos para crear el HTML básico que se utilizará para el diálogo modal.
Inserte el siguiente contenido HTML debajo de la nav elemento en su página.
<!-- Search Modal -->
<div id="modalSearch" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search Cambia Research</h4>
</div>
<div class="modal-body">
<!-- Add the modal body here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>Dado que esto no es un tutorial sobre el diálogo modal Bootstrap , no voy a entrar en mucho detalle aquí.
Sólo observa que hay varias clases de rutina de carga aplicados a la div incluyendo modal , desvanecimiento , modal contenido , modal-cabecera , modal-cuerpo , modal-pie de página .
Para un aspecto agradable y la sensación, he decidido incluir un encabezado y pie de página.
También he incluido algunos contenidos en esos divs cabecera y el pie que incluye un título, cerca icono y botón de cierre.
El aspecto de nuestra página no cambia con esta adición. Esto se debe a las clases de archivos de inicio ocultan el modal div hasta que se activa.
Paso # 9 - Hacer que el botón de búsqueda de abrir el diálogo modal
En este punto, estamos listos para cablear el botón de búsqueda. Encuentra el hipervínculo que representa el icono de búsqueda en la lista y sustituirlo por el siguiente código.
<a href="#modalSearch" data-toggle="modal" data-target="#modalSearch">
<span id="searchGlyph" class="glyphicon glyphicon-search"></span> <span class="hidden-sm hidden-md hidden-lg">Search</span>
</a>Las nuevas incorporaciones son los atributos del elemento hipervínculo. En primer lugar, se puede ver que nuestro href atributo contiene ahora un selector de estilo CSS ( #modalSearch ) que apunta al elemento con el ID = " modalSearch ". Ese es el HTML modal que acaba de añadir.
También se dará cuenta de la técnica de conmutación y de datos de destino atributos. Técnica de alternar simplemente indica que este debe ser un diálogo modal.
El valor de datos de destino es el mismo que para el href. Y sí, es básicamente dice Bootstrap lo mismo, que el contenido modal para activar. Este es redundante. Creo que parte de la razón es que el href no se admite en las versiones anteriores de Bootstrap. He probado tanto mediante la eliminación de cada uno y se encontró que el cursor del ratón no era correcto en un caso. Habiendo tanto funciona bien, así que recomiendo esto por ahora.
¡Estupendo! Ahora tenemos un diálogo emergente modal de funcionar cuando hacemos clic en el botón de búsqueda.
Esto es lo que parece.
Tenemos un cuadro de diálogo modal y que ni siquiera tiene que escribir ningún jаvascript
Paso # 10 - Añadir Google Custom Code Search de diálogo modal
En este punto, usted necesitará una cuenta de Google. Accede a google.com/cse y crear un nuevo sitio web de búsqueda. En la sección Look & Feel elegir el ancho total de la opción y obtener el código.
introduzca ese código donde dice: "Agregar el cuerpo modal de aquí."
Cuando haya terminado el modal cuerpo div debe ser similar a la siguiente. La totalidad de su contenido es la secuencia de comandos que se obtiene de Google. Mas Sobre Google Search
<script>
(function() {
var cx = '003830924462810119740:gdygbavfdwc';
var gcse = document.createElement('script');
gcse.type = 'text/jаvascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>Todo mejor.
Todo mejor
Paso # 11 - llevarlo a dar una prueba de manejo
Por último, vamos a tomar una prueba de manejo. Haga clic en el icono de búsqueda y escriba un término de búsqueda en el cuadro.
Cuando un usuario hace clic en un resultado de búsqueda que son llevados directamente a la página elegida en una nueva pestaña del navegador.
Google Custom Resultados de búsqueda en diálogo modal Bootstrap abrirse desde el menú de barra de navegación!
Bono # 1 - modal Ancho Ajustes (Opcional)
Si el diálogo modal estándar es demasiado estrecha, puede actualizar el ancho añadiendo sus propios estilos de cuadros de diálogo .modal .modal de la siguiente manera.
Este cambio de estilo funciona muy bien en todos los anchos de pantalla.
<style>
.modal .modal-dialog
{
width: 800px;
max-width: 95%;
margin-left: auto;
margin-right: auto;
}
</style>Si no te gusta el diálogo modal que se extiende a la anchura completa del navegador en las pantallas grandes, es posible que desee establecer un ancho fijo en las pantallas grandes y permitir que el diálogo se estreche para pantallas más pequeñas.
Supongamos que queremos la anchura sea 800px si una pantalla, puede apoyarla, pero estrecha a 95% de la anchura de la pantalla en pantallas más pequeñas. Intente lo siguiente.
Este CSS también es bien sensible como el ancho de pantalla estrecha.
<style>
.modal .modal-dialog
{
width: 800px;
max-width: 95%;
margin-left: auto;
margin-right: auto;
}
</style>Ver el resultado a continuación. La anchura de diálogo es 800px en una pantalla amplia, pero no más ancha. Y 95% de la anchura completa de pantallas más pequeñas.
Anchura limitada a 800 píxeles de ancho en las pantallas.
Escalas hasta 95% de la anchura en pantallas más pequeñas.
Bono # 2 - Que molesto Botón de búsqueda Esquema (Opcional)
Haga clic en el botón de búsqueda para abrir la ventana de diálogo modal. Ahora haga clic en el botón de cierre para cerrar. Echar un vistazo a el icono de lupa. Hay un borde alrededor.
Yo no sé ustedes, pero me parece que bastante molesto. Esta frontera es aún más prominente en el navegador Chrome.
Agregue el siguiente CSS para eliminarlo.
<!-- Prevents outline of search button when modal is closed -->
<style>
.modal-open .modal, a:focus
{
outline: none !important;
}
</style>Conclusión
Para mí, Ver Resultado esta solución de búsqueda emergente es un enfoque muy fácil de usar para la búsqueda del sitio que evite cargas de páginas adicionales de manera que el usuario puede descubrir lo que quieren más rápido.
Sin embargo, se puede ver que este tutorial fue un poco una caminata. Si bien era manera más fácil de codificar el código jаvascript y CSS a sí mismo, aún había varias trampas que no se hayan tratado adecuadamente por cualquier búsqueda en la web Yo buscando las respuestas.
Con suerte, esto hará que todo el proceso sea más fácil para usted. Y si lo que queremos es fijamos en el código, asegúrese de descargar el proyecto de ejemplo completado cerca de la parte superior de este artículo.
Si tienes alguna idea o adiciones, por favor, compartir en los comentarios a continuación.
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!