Cómo hacer su propia barra de encabezado pegajoso como makeuseof

Hace aproximadamente un mes, hemos introducido un nuevo elemento de la interfaz de MakeUseOf - un sistema de navegación y la barra de búsqueda flotante. La retroalimentación que hemos estado recibiendo es casi del todo positiva, el tráfico de búsqueda interno se ha disparado, y algunos lectores que tienen estado preguntando acerca de cómo hacer uno para su propio sitio, así que pensé que me gustaría compartir.

Vamos a utilizar jQuery para pegar la barra a la parte superior de la pantalla - pero sólo hasta un cierto punto. Voy a hacer todo esto en el tema de WordPress por defecto - veinte once, aunque por supuesto se puede aplicar a cualquier tema o página web que usted entiende suficientemente cómo modificar.

el HTML

En primer lugar, abrir los temas header.php e identificar la barra de navegación que estaremos haciendo pegajosa. Como ya he dicho, el código de abajo es para el valor por defecto suyo veintiuno de once pueden variar.

En primer lugar, añadir un nuevo contenedor DIV que rodea toda esta sección NAV.

Además, vamos a pasar esa barra de búsqueda predeterminado en aquí. Se dará cuenta de que éste se agrega de manera predeterminada a la parte superior derecha de la theme- encontrar la línea ? Lt; php get_search_form () - gt?; y pegarlo en nuestra sección de navegación. Eliminar todas las demás instancias de ella en este archivo.

Vídeo: Como hacer botones Flat usando iconos con CSS

Si guarda y actualiza ahora, verá el formulario de búsqueda en realidad no aparece en la barra de navegación - que todavía muestra en la parte superior derecha. Eso es porque se ha posicionado absolutamente con CSS, y vamos a estar suprimiendo todo lo que en un segundo.

el CSS

Abre el archivo style.css principal y busque la sección para la búsqueda:

#searchform #branding {...}

Reemplazar todo lo que es el interior que (debería ser capaz sobre cuatro líneas, incluyendo algunos posicionamiento absoluto) con esto:

Vídeo: Adobe Muse | Crear menús scrolling / estáticos

#branding #searchform {float: left-fondo: blanco-margen: 7px -}

Siéntase libre para ajustar el color o el margen. Cambiar el flotador si prefiere que apareció en la derecha de la barra. En este tema, la búsqueda se establece para expandir cuando el usuario hace clic en el interior de IT que está fuera del alcance de este tutorial, pero se puede ver un efecto similar en nuestra MakeUseOf búsqueda.

jQuery

Si usted se pregunta por qué estamos usando jQuery para hacer esto, es muy sencillo: CSS es fijo y no se puede ajustar de forma dinámica. Aunque podríamos usar CSS para hacer una cabecera pegajosa, que tendría que ser el elemento superior de la página. El problema que tenemos es que nuestro menú no es el elemento superior, por lo que no puede empezar con él que es pegajosa. Aquí es donde el jQuery es utiliza- podemos comprobar cuando el usuario va más allá de un cierto punto- entonces, y sólo entonces, que sea pegajosa.

Comience por la adición de jQuery para su tema. Su tema puede tener ya que loaded- si no, no se preocupe. Usted puede poner en cola que, añadiendo el siguiente código a su functions.php, así:

lt;? my_scripts_method phpfunction () {wp_deregister_script ( `jquery`) -wp_register_script ( `jquery`, `https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js`)- wp_enqueue_script ( `jquery`) -} add_action ( `wp_enqueue_scripts`, `my_scripts_method`) - gt?;

O simplemente puede omitir por completo y WordPress incondicional esto en el archivo de cabecera. En algún lugar de su sección de la cabeza, sólo tiene que añadir esta línea:

Si se utiliza el primer método, que va a ser cargado en no conflicto el modo, lo que significa que tendrá que utilizar “jQuery” en el código para acceder a las funciones de jQuery. Si se utiliza el segundo método de añadir directamente a su cabecera, puede utilizar el método de acceso estándar de jQuery ps. Vamos a suponer el segundo método en el código de abajo.

Por lo tanto, para añadir algo de código real jQuery, coloque el siguiente en algún lugar al final de su header.php - He colocado la mina justo antes de la

Lo primero que el script hace es averiguar donde la barra de navegación comienza en, y se acuerda de ese valor. En segundo lugar, que atribuimos a la evento scroll - esto significa que cada vez que el usuario se desplaza a la página, podemos ejecutar este bloque de código. Cuando se ejecuta el código, hay dos formas en que puede ir:
1. Si la ventana se haya desplazado más allá de la barra de navegación, que lo convierten en un CSS fijo (esta es la parte “pegajosa”).
2. Si la parte superior de la ventana es mayor que la posición original de la barra de navegación (es decir, el usuario desplazado de nuevo otra vez), se puso de nuevo a la posición estática por defecto.

Hay dos puntos que quiero llamar su atención:

• El 288 es ahí reparar el fallo de conseguir una posición- incorrectos sin ella, la barra está desencadenando su estado pegajoso demasiado pronto - quitarlo para ver a qué me refiero. Esto no será lo necesite en todos los temas, y es probable que pueda llegar a una solución mejor.
• Para solucionar el problema de la anchura de la barra de navegación de cambiar cuando se entra en el estado pegajoso, editar el style.css, línea 550, para leer 1000px en lugar de 100%

Eso es todo, la barra de navegación debe ser ahora muy bien pegajosa.

Resumen:

La sustitución completa header.php código para este tutorial se puede encontrar en este pastebin- y la sustitución style.css aquí . Tenía la esperanza de que haya disfrutado de este pequeño tutorial- si usted está teniendo problemas, no publicar en los comentarios o preguntar a distancia Respuestas MakeUseOf, pero por favor recuerde que debe hacer su sitio accesible al público para que pueda ir a lo largo y tienen un mismo buscar. Si eres nuevo aquí, asegúrese de revisar todos nuestros otros blogger y artículos de desarrollo web.