Cómo hacer tu propia barra de encabezado adhesivo como MakeUseOf

Anuncio

Hace aproximadamente un mes, presentamos un nuevo elemento de interfaz para MakeUseOf: una barra de navegación y búsqueda flotante. Los comentarios que hemos estado recibiendo son casi totalmente positivos, el tráfico de búsqueda interna se ha disparado y algunos lectores han estado preguntando cómo crear uno para su propio sitio, así que pensé en compartirlo.

Usaremos jQuery para pegar la barra en la parte superior de la pantalla, pero solo más allá de cierto punto. Haré todo esto en el tema predeterminado de WordPress: Twenty Eleven, aunque, por supuesto, se puede aplicar a cualquier tema o sitio web que comprenda lo suficiente como modificar.

El HTML

En primer lugar, abra los temas header.php e identifique la barra de navegación que haremos pegajosa. Como dije, el siguiente código es para el predeterminado veintiocho; el tuyo puede variar.

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

Además, vamos a mover esa barra de búsqueda predeterminada aquí. Notará que se agrega de forma predeterminada en la parte superior derecha del tema; encuentra la línea

php get_search_form (); y pégalo en nuestra sección de navegación. Elimine todas las demás instancias de este en este archivo.

Si guarda y actualiza ahora, verá que el formulario de búsqueda en realidad no aparece en la barra de navegación, todavía se muestra en la esquina superior derecha. Eso se debe a que se ha posicionado absolutamente con CSS, y eliminaremos todo eso en un segundo.

El CSS

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

#branding #searchform {... }

Reemplace lo que esté dentro de eso (debería poder aproximadamente cuatro líneas, incluido un posicionamiento absoluto) con esto:

#branding #searchform { flotador izquierdo; fondo: blanco; margen: 7px; }

Siéntase libre de ajustar el color o el margen. Cambia el flotador si prefieres que aparezca a la derecha de la barra. En este tema, la búsqueda está configurada para expandirse cuando el usuario hace clic dentro de ella; eso está fuera del alcance de este tutorial, pero puede ver un efecto similar en nuestra Búsqueda MakeUseOf.

jQuery

Si se pregunta por qué estamos usando jQuery para hacer esto, es simple: CSS es fijo y no se puede ajustar dinámicamente. Si bien podríamos usar CSS para hacer un encabezado adhesivo, debería ser el elemento superior de la página. El problema que tenemos es que nuestro menú no es el elemento principal, por lo que no podemos comenzar con que sea pegajoso. Aquí es donde se usa jQuery; podemos verificar cuando el usuario pasa un cierto punto; entonces, y solo entonces, hazlo pegajoso.

Comience agregando jQuery a su tema. Su tema ya puede tenerlo cargado; si no, no te preocupes. Puede ponerlo en cola agregando el siguiente código a su functions.php, de esta manera:

php. function my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

O simplemente puede omitir WordPress por completo y poner esto en el archivo de encabezado. En algún lugar de la sección de tu cabeza, solo agrega esta línea:

Si usa el primer método, se cargará en no conflicto modo, lo que significa que deberá usar "jQuery" en su código para acceder a las funciones de jQuery. Si usa el segundo método para agregarlo directamente a su encabezado, puede usar el descriptor de acceso jQuery estándar de $. Asumiré el segundo método en el código a continuación.

Entonces, para agregar un código jQuery real, coloque lo siguiente en algún lugar al final de su header.php - He colocado el mío justo antes de la

Lo primero que hace el script es averiguar dónde comienza la barra de navegación y recordar ese valor. En segundo lugar, adjuntamos al evento de desplazamiento, esto significa que cada vez que el usuario se desplaza por la página, podemos ejecutar este bloque de código. Cuando se ejecuta el código, hay dos formas de hacerlo:
1. Si la ventana se ha desplazado más allá de la barra de navegación, la convertiremos en un CSS fijo (esta es la parte "fija").
2. Si la parte superior de la ventana es más alta que la posición original de la barra de navegación (es decir, el usuario volvió a desplazarse hacia arriba), la volvemos a colocar en la posición estática predeterminada.

Hay dos puntos sobre los que quiero llamar su atención:

• El +288 está allí para corregir el error de obtener una posición incorrecta; sin ella, la barra está activando su estado pegajoso demasiado pronto; retírela para ver a qué me refiero. Esto no será necesario en todos los temas, y probablemente pueda encontrar una mejor solución.
• Para solucionar el problema de que la barra de navegación cambie de ancho cuando pasa al estado fijo, edite el style.css, línea 550, para leer 1000px en vez de 100%

Eso es todo, su barra de navegación ahora debería estar bastante pegajosa.

Resumen:

El reemplazo completo header.php el código para este tutorial se puede encontrar en este pastebin; y el reemplazo style.cssaquí. Espero que hayas disfrutado este pequeño tutorial; si tiene problemas, publique los comentarios, pero recuerde hacer que su sitio sea de acceso público para que yo pueda seguir y echar un vistazo. Si eres nuevo aquí, asegúrate de revisar todos nuestros otros artículos de blogger y desarrollo web.