Diseño fijo de dos columnas. Menú superior fijo y barra lateral flotante en WordPress La forma más funcional
¿Cuáles son los requisitos de diseño?
- Diseño de dos columnas de goma
- barra lateral ancho fijo 300px
- el contenido se estira al resto del ancho.
- pie de página presionado hasta el fondo (en este tutorial no mostraré cómo se hace esto).
Qué problemas de CSS surgen al diseñar un diseño de este tipo:
1 manera
Si haces flotar bloques, hay que darles un ancho fijo(no puede establecer 1 barra lateral en 300 px y contenido en 100 %). En este caso, el contenido se desliza hacia abajo o aparece un desplazamiento horizontal de 300 px hacia la izquierda. Bueno, lo principal que hay que entender es que este método no nos conviene.
2 vías.
Muchos tipógrafos ofrecen este método, ¿en qué están pensando? La esencia del método es que puede configurar la barra lateral para que flote con un ancho de 300, y no flotar el contenido y configurar margin-left: 300px. Una buena manera y todo parece funcionar tan bien. Para ser honesto, pensé que esta era la mejor manera, pero este método tiene sus propias trampas. Las razones para abandonar este método son que si de repente inventamos en el contenido, por ejemplo, un menú con li flotante o cualquier otro bloque flotante y luego queremos borrarlos con clear:both, entonces el borde inferior de este bloque se desliza hasta el nivel del borde inferior de la barra lateral (Qué y no es extraño ya que se borra la fota, puede evitar esto si establecer un bloque flotante a una altura fija, pero no es en absoluto el caso de establecer una altura fija).
3 vías.
Se puede utilizar para posición absoluta de la barra lateral pero solo si tu estamos seguros de que el contenido será más grande que la barra lateral en altura de lo contrario, todo el contenido de la barra lateral cabrá en el pie de página (después de todo, el posicionamiento absoluto se sale del flujo general).
Pero en cuanto a mí, ¡esta tampoco es una muy buena manera!
4 maneras.
"Excelente manera, si tiene algún defecto, por favor comente. Pero creo que esta es la mejor manera".
- Ventajas de este método: en primer lugar, el contenido DOM irá antes de la barra lateral, lo que es bueno para los motores de búsqueda.
- nada cabe en el pie de página
- cualquier bloque se puede borrar y nada se deslizará hacia el borde inferior (así que superamos los problemas del segundo método).
En general, cómo funciona: Mire el código, primero viene el contenido seguido de la barra lateral. establecemos float en estos dos bloques (por supuesto, la barra lateral se desliza hacia abajo). después de eso, establecemos la propiedad de la barra lateral margin-left:-100%. genial, está de vuelta en su lugar, y sangra el contenido con margin-left:300px.
html
CSS
.barra lateral(ancho: 300px;
bloqueo de pantalla;
flotador izquierdo;
margen: 0 0 0 -100%;
}
.contenido(
ancho mínimo: 723px;
bloqueo de pantalla;
flotador izquierdo;
margen: 0 0 0 220px;
}
Se necesita un bloque flotante (o como también se le llama móvil, fijo, atascado) en el sitio para que el usuario vea un elemento fijo al desplazarse por la página, en el que se coloca con mayor frecuencia la publicidad (teasers, banners o contexto).
Por desgracia, las reglas de adsense nos prohíben esto. Sin embargo, muchos propietarios de sitios ignoran las reglas bajo su propio riesgo. Tal vez ni siquiera sean castigados por esto, pero no recomendaría correr riesgos.
Coloco YAN, mis teasers/banners en dichos bloques y, a veces, en lugar de publicidad, muestro publicaciones similares o alguna información útil para el visitante.
Vamos a decirle cómo puede hacer un bloque flotante en su sitio.
Tarea: hacer que el último bloque en la barra lateral (barra lateral) sea flotante. Además, para que se pegue solo en el momento en que el usuario llega haciendo scroll, y no inmediatamente cuando se abre la página. Además, el bloque debe "sobresalir", llegando al pie de página (es decir, sin superponerlo).
La forma más funcional
Hay muchas implementaciones del sticky block, pero no todas funcionan correctamente. Te lo diré por experiencia personal: el mismo método de instalación de bloques puede funcionar en un sitio y las jambas aparecerán en otro.
A continuación se muestra un ejemplo de un bloque flotante que ha funcionado en casi todos los sitios en los que lo he instalado. No había cabras. El motor tampoco es importante (DLE, WordPress, LiveStreet, etc.).
Pegue el siguiente código HTML en la ubicación deseada de la barra lateral:
$(ventana).scroll(función() (
var sb_m = 20; /* relleno superior e inferior */
var mb = 300 ; /* altura del sótano con margen */
varst = $(ventana).scrollTop() ;
var sb = $(".bloque pegajoso" );
var sbi = $(".sticky-block .inner" );
var sb_ot = sb.offset() .arriba;
var sbi_ot = sbi.offset() .arriba;
var sb_h = sb.altura () ;
If(sb_h + $(documento).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
si(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("rellenoTop" : h) ) ;
}
demás(
sb.css(( "rellenoTop" : 0 ) ) ;
}
}
}
)
;
En este código, puede configurar la parte superior, inferior y la altura de su pie de página, es decir, la altura a la que debe detenerse el bloque.
Ahora incluimos JS. Para ello, escribe en la sección HEAD: