Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
    8. Post promocionado
  • Smartphone
    Las Ventajas De Los Auriculares Inteligentes Con Cancelación De Ruido

    Las Ventajas De Los Auriculares Inteligentes Con Cancelación De Ruido

    ¿Por Qué La Honor 90 Es Una Combinación De Innovación y Ahorro?

    ¿Por Qué La Honor 90 Es Una Combinación De Innovación y Ahorro?

    Cómo Encontrar El Mejor Smartphone Durante El Black Friday

    Cómo Encontrar El Mejor Smartphone Durante El Black Friday

    Los últimos celulares para que estés a la última

    Los últimos celulares para que estés a la última

    Review del Honor 90 - Características de la cámara 200 MP + 50 mp

    Review del Honor 90 - Características de la cámara 200 MP + 50 mp

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    Las Ventajas De Los Auriculares Inteligentes Con Cancelación De Ruido

    Las Ventajas De Los Auriculares Inteligentes Con Cancelación De Ruido

    ¿Por Qué La Honor 90 Es Una Combinación De Innovación y Ahorro?

    ¿Por Qué La Honor 90 Es Una Combinación De Innovación y Ahorro?

    Cómo Encontrar El Mejor Smartphone Durante El Black Friday

    Cómo Encontrar El Mejor Smartphone Durante El Black Friday

    Los últimos celulares para que estés a la última

    Los últimos celulares para que estés a la última

    Soluciones profesionales para la reparación de dispositivos electrónicos

    Soluciones profesionales para la reparación de dispositivos electrónicos

    How to clean up and optimize your MacBook

    How to clean up and optimize your MacBook

    Cómo crear un USB de arranque para instalar Windows 10 y 11

    Cómo crear un USB de arranque para instalar Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Automatización de procesos en la asesoría

    Automatización de procesos en la asesoría

    Descubre Windows Copilot, el asistente de IA de Windows 11 y Soporte para RAR y 7-Zip

    Descubre Windows Copilot, el asistente de IA de Windows 11 y Soporte para RAR y 7-Zip

    Cómo migrar de Wix a Shopify [Actualización 2023]

    Cómo migrar de Wix a Shopify [Actualización 2023]

    Libérate de las tareas rutinarias: aprovecha el Software de gestión AgendaPro

    Libérate de las tareas rutinarias: aprovecha el Software de gestión AgendaPro

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    La ciberseguridad: Vital Para Las Apuestas Online en España

    La ciberseguridad: Vital Para Las Apuestas Online en España

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Generador de Video IA: La Revolución en la Creación Audiovisual

    Generador de Video IA: La Revolución en la Creación Audiovisual

    Los últimos celulares para que estés a la última

    Los últimos celulares para que estés a la última

    Aprovecha la tecnología para una experiencia de adoración más profunda

    Aprovecha la tecnología para una experiencia de adoración más profunda

    Cómo Microsoft cambiará el juego con la Xbox Series X sin disco

    Cómo Microsoft cambiará el juego con la Xbox Series X sin disco

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Desarrolla un cuerpo fuerte y saludable

    Desarrolla un cuerpo fuerte y saludable

    ¿Qué es la forma física?

    ¿Qué es la forma física?

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Consejos para maximizar las caminatas diarias

    Consejos para maximizar las caminatas diarias

    Consejos para aplicar pestañas postizas

    Consejos para aplicar pestañas postizas

    ¿Por qué es importante preparar la piel antes de maquillarla?

    ¿Por qué es importante preparar la piel antes de maquillarla?

    La nutrición y un cabello saludable

    La nutrición y un cabello saludable

    Consejos para una piel perfecta este invierno

    Consejos para una piel perfecta este invierno

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteinas - Una guía para principiantes

    Batidos de proteinas - Una guía para principiantes

    Recetas de batidos Herbalife

    Recetas de batidos Herbalife

    Inspiración de traje de otoño

    Inspiración de traje de otoño

    La dura verdad sobre las modelos de talla grande

    La dura verdad sobre las modelos de talla grande

    Razones por las que las marcas de moda de lujo son tan caras

    Razones por las que las marcas de moda de lujo son tan caras

    Cuales son las mejores frutas para adelgazar

    Cuales son las mejores frutas para adelgazar

    Como enseñar a leer y a escribir

    Como enseñar a leer y a escribir

    Como generar cuentas premium Disneyplus

    Como generar cuentas premium Disneyplus

    Calcular porcentajes con la Calculadora de Windows 10

    Calcular porcentajes con la Calculadora de Windows 10

    Cómo conectar un televisor a un ordenador a través de Wi-Fi

    Cómo conectar un televisor a un ordenador a través de Wi-Fi

    ¿Por qué es importante preparar la piel antes de maquillarla?

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Consejos de belleza para lucir fresca en el verano

    Consejos de belleza para lucir fresca en el verano

    Bricolaje para la decoración del hogar

    Bricolaje para la decoración del hogar

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

  • Marketing
    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Qué es un Link Dofollow?

    ¿Qué es un Link Dofollow?

    ¿Qué es Nofollow?

    ¿Qué es Nofollow?

    ¿Qué es el remarketing?

    ¿Qué es el remarketing?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

  • Juegos
    Para qué se pueden usar las Gafas VR PS4

    Para qué se pueden usar las Gafas VR PS4

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Sony prohíbe cuatro juegos de terceros en Xbox

    Sony prohíbe cuatro juegos de terceros en Xbox

    Prepárate para el futuro: Project Trinity llega a finales de 2024

    Prepárate para el futuro: Project Trinity llega a finales de 2024

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Google » Cómo integrar una ventana emergente de búsqueda personalizada en un menu

Cómo integrar una ventana emergente de búsqueda personalizada en un menu


omegayalfa Por omegayalfa En: Google, Google Desarrolladores, Diseño Web, Bootstrap, CSS3, html5, WebSite, webmasters, Noticias, Tutorial 0 Septiembre 19, 2018

9.1К
VISTO
Twitter Facebook Pinterest VKontakte LinkedIn Tumblr WhatsApp Email
Compartir
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte

Cómo Integrar Una Ventana Emergente De Búsqueda Personalizada (Google Custom Search) En un Menu (Bootstrap) | Descargar 
Atención! Usted no tiene permiso para ver este texto.... Primero debes Registrate!
 - Esta descarga contiene un único archivo HTML Comprimido en rar que representa el resultado final y completo del trabajo a través de este tutoriales en linea.

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.

Cómo Integrar Una Ventana Emergente De Búsqueda Personalizada En un Menu

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.

Ver los resultados.


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.

Síguenos en Síguenos en Google News
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Articulo anterior Google Búsqueda Personalizada
Articulo siguiente Bootstrap
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: ¡Aprende los trucos de tutoriales online y cursos gratis con Tutoriales En Linea! Con manuales paso a paso para desarrollar tu conocimiento, Tutoriales En Linea te ayudará a mejorar tus habilidades y lograr tus metas.
Un tutorial está diseñado con pasos secuenciales que aumentan gradualmente el entendimiento. Por lo tanto, es importante que se sigan los pasos en su orden lógico para que el usuario comprenda todos los elementos. Para optimizar los resultados, se recomienda seguir de forma profesional las instrucciones del tutorial.

Artículos Relacionados


Ayudar a 1 millón de estudiantes a construir mejores aplicaciones

Ayudar a 1 millón de estudiantes a construir mejores aplicaciones

Las mejoras en el Aula botón para compartir (Classroom Share Button)

Las mejoras en el Aula botón para compartir (Classroom Share Button)

Google lanza el nuevo programa de certificación de socio editorial.

Google lanza el nuevo programa de certificación de socio editorial.


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Como podemos conseguir proxies

Como podemos conseguir proxies

Jun 21 8 475
Historia de los sistemas operativos

Historia de los sistemas operativos

Mayo 16 24 756
Como proteger su sitio web de piratería

Como proteger su sitio web de piratería

Oct 23 4 308
Cómo crear un USB de arranque para instalar Windows 10 y 11

Cómo crear un USB de arranque para instalar Windows 10 y 11

Jul 07 118 542

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2023

Herramientas SEO para posicionamiento de nuestra web 2023

Por administrador 27-09-22
Las 7 mejores páginas para descargar películas en .torrent en español

Las 7 mejores páginas para descargar películas en .torrent en español

Por administrador 05-11-21
Anunciate Aqui

Anunciate Aqui

Por Tutoriales En Linea 21-06-23

Etiquetas

GoogleGoogle SearchGoogle Custom SearchBootstrapArticulosPostNoticiasTutoriales En LineaWebsiteDiseñoWebDiseñadores WebDiseño web adaptativoResponsiveMenuCSS3HTML5CSSHTML





Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.