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
  • 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
  • Torrent
  • 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. Algebra
    2. Android
    3. Adobe
    4. Bricolaje
    5. Bachillerato
    6. Cursos
    7. Criptomonedas
    1. Criptografia
    2. Diseño Web
    3. Encuestas
    4. Empleo
    5. Electricidad
    6. Electronica
    7. Forex
    1. Fisica
    2. Google
    3. Hardware
    4. Herramientas Ofimaticas
    5. Herramientas
    6. Internet
    7. Idiomas
    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
  • Smartphone
    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    ¿Qué es un rastreador de teléfono y cómo usarlo?

    ¿Qué es un rastreador de teléfono y cómo usarlo?

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Kerish Doctor 2022 - Licencia gratis

    Kerish Doctor 2022 - Licencia gratis

    GNU/linux

    GNU/linux

    TrueCrypt

    TrueCrypt

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    Descripción general de la refrigeración líquida Thermalright Turbo Right 240 C

    Descripción general de la refrigeración líquida Thermalright Turbo Right 240 C

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    TrueCrypt

    TrueCrypt

    El ABC de la detección y prevención del phishing

    El ABC de la detección y prevención del phishing

    Protocolos de seguridad en redes inalambricas

    Protocolos de seguridad en redes inalambricas

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

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

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    QuantumScape envía el primer prototipo de celdas de batería de estado sólido de metal de litio de 24 capas a los OEM automotrices

    QuantumScape envía el primer prototipo de celdas de batería de estado sólido de metal de litio de 24 capas a los OEM automotrices

    Descripción general de la refrigeración líquida Thermalright Turbo Right 240 C

    Descripción general de la refrigeración líquida Thermalright Turbo Right 240 C

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Actividades en pareja para salir de la rutina

    Actividades en pareja para salir de la rutina

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Nunca estás demasiado joven para pensar en un envejecimiento saludable

    Nunca estás demasiado joven para pensar en un envejecimiento saludable

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Cómo remover las uñas de acrílico en casa

    Cómo remover las uñas de acrílico en casa

    Voluminizadores de Labios naturales para hacerlos tu misma

    Voluminizadores de Labios naturales para hacerlos tu misma

    Beneficios del Té de manzanilla

    Beneficios del Té de manzanilla

    La grasa corporal y la salud del corazón: una reflexión de su estilo de vida

    La grasa corporal y la salud del corazón: una reflexión de su estilo de vida

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    El progreso del Yoga antes y ahora

    El progreso del Yoga antes y ahora

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

    Tendencia en 2023 es el cabello largo

    Tendencia en 2023 es el cabello largo

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK Facebook

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


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

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

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.

Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Google Búsqueda Personalizada
Articulo siguiente Bootstrap
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: Los cursillos o tutoriales son sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algun procedimiento o los pasos para realizar determinada actividad....
Un tutorial normalmente consiste en una serie de pasos que van aumentando el nivel de dificultad y entendimiento. Por este motivo, es mejor seguir los tutoriales en su secuencia logica para que el usuario entienda todos los componentes

Post 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.

Google lanza cursos online y gratuitos

Google lanza cursos online y gratuitos

Nuevas Oportunidades En Google Adsense

Nuevas Oportunidades En Google Adsense

Google esta regalando almacenamiento extra en Google Drive

Google esta regalando almacenamiento extra en Google Drive


Comentarios



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

Destacados

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

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

12-Octubre
Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

10-Octubre
Herramienta de analisis de tus problemas de SEO

Herramienta de analisis de tus problemas de SEO

18-Mayo
Como activar Windows 10 con KMSAuto

Como activar Windows 10 con KMSAuto

14-Junio

Últimas publicaciones

Lista IPTV con canales para India

Lista IPTV con canales para India

Por Tutoriales En Linea 29-01-2350
Lista IPTV con canales para Chile

Lista IPTV con canales para Chile

Por Tutoriales En Linea 29-01-2334
Lista IPTV con canales para Ecuador

Lista IPTV con canales para Ecuador

Por Tutoriales En Linea 29-01-2328

Etiquetas

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





Sobre nosotros

Tutoriales En Linea

Es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad. 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.