TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un widget de pestañas verticales en el sitio Weebly?

5

Discutimos cómo agregar pestañas horizontales en el artículo anterior y en este artículo discutiremos cómo agregar el widget de pestañas verticales en el sitio Weebly. Al igual que las pestañas horizontales, las pestañas verticales también se utilizan para agregar una gran cantidad de contenido dentro del espacio limitado. El widget está hecho solo con CSS y es fácil de agregar en su sitio Weebly.

¿Cómo se ve?

El widget se verá más abajo:

¿Cómo agregar un widget de pestañas verticales en el sitio Weebly?

Widget de pestañas verticales de Weebly

CSS para pestañas verticales

Básicamente, el widget contiene tres partes: contenedor completo, etiquetas de navegación vertical y contenido de la pestaña.

  • La lista desordenada se utiliza para la navegación con estilo de lista como ninguno y el atributo n-ésimo hijo se utiliza para definir cinco pestañas en el menú vertical. Puede modificar el CSS y agregar más o menos pestañas según lo necesite.
  • El tipo de entrada de radio se utiliza para ocultar todo el contenido de la pestaña inactiva y resaltar el contenido de la pestaña activa.
  • La sección de navegación está definida al 24% y el contenido de la pestaña se define como el 75%, que puede cambiar.
  • También puede cambiar los colores de fondo y el color flotante según lo necesite.

A continuación se muestra el CSS completo para el widget de pestañas verticales que se agregará en la sección "Código de encabezado" de su sitio Weebly.

<style> /* Start of Tab Container */ #tab-container{ position:relative; margin: 20px auto; width: 800px; border-radius: 10px; box-shadow: 1px 1px 5px #aaa; padding: 20px; background:#fff; } /* Start of Navigation Menu */ input[type=radio]{ display:none; } label{ cursor:pointer; padding-left: 20px; line-height: 2; } nav{ position:relative; display:inline-block; width: 24%; } nav ul{ list-style:none; margin:20px 0 0 0; padding:0; } nav ul li{ position:relative; height: 50px; font-size: 20px; padding-top:10px; font-weight:bold; line-height: 30px; border-style:solid; border-width:1px; border-color: gray transparent gray gray; border-radius: 10px 0 0 10px; background: #99CCCC; } nav ul li:hover{ background:#efefef; z-index:1; color: rgb(50, 50, 50); } nav ul li:nth-child(1):hover::before{ border-color: #e1e1e1; } nav ul li:nth-child(1)::before{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #aaa; top:-10px;right:-1px; } nav ul li:nth-child(1)::after{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #fff; top:-11px;right:0px; border-radius: 0 0 10px 0; box-shadow: 1px 1px 0px gray } nav ul li:nth-child(5):hover::before{ border-color: #e1e1e1; } nav ul li:nth-child(5)::before{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #aaa; bottom:-10px;right:-1px; } nav ul li:nth-child(5)::after{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #fff; bottom:-11px;right:0px; border-radius: 0 10px 0 0; box-shadow: 1px -1px 0px gray } /* Start of Tab Content */ #tab-content{ position:relative; display:inline-block; background: #e1e1e1; vertical-align:top; border-radius: 10px; width:75%; box-shadow: 0 -1px 4px #aaa; } #tab-content p{ padding: 15px; font-size: 20px; line-height: 30px; } #tab-content .div{ position:relative; display:none; padding: 20px; } /* Define Active Navigation Label and Tab Content */ #tab1:checked~ #tab-content .div:nth-child(1), #tab2:checked~ #tab-content .div:nth-child(2), #tab3:checked~ #tab-content .div:nth-child(3), #tab4:checked~ #tab-content .div:nth-child(4), #tab5:checked~ #tab-content .div:nth-child(5){ display:inline-block; } #tab1:checked~ nav ul li:nth-child(1), #tab2:checked~ nav ul li:nth-child(2), #tab3:checked~ nav ul li:nth-child(3), #tab4:checked~ nav ul li:nth-child(4), #tab5:checked~ nav ul li:nth-child(5){ background:#e1e1e1; z-index:1; } #tab1:checked~ nav ul li:nth-child(1)::before, #tab2:checked~ nav ul li:nth-child(2)::before, #tab3:checked~ nav ul li:nth-child(3)::before, #tab4:checked~ nav ul li:nth-child(4)::before, #tab5:checked~ nav ul li:nth-child(5)::before{ border-color:#e1e1e1; </style>

HTML para el widget de pestañas verticales

El contenido HTML completo está cubierto dentro de una etiqueta div con una clase "tab-content" y el contenido de cada cinco pestañas está cubierto por div individual usando la clase "div". Reemplaza el contenido con el tuyo y pégalo dentro del elemento " Código incrustado " en tu sitio Weebly.

<div id="tab-container"> <!-- Start of Navigation Labels --> <input type="radio" name="check" id="tab1" checked=checked> <input type="radio" name="check" id="tab2"> <input type="radio" name="check" id="tab3"> <input type="radio" name="check" id="tab4"> <input type="radio" name="check" id="tab5"> <nav> <ul> <li><label for="tab1">Tab 1 - Text</label></li> <li><label for="tab2">Tab 2 - Image</label></li> <li><label for="tab3">Tab 3 - Video</label></li> <li><label for="tab4">Tab 4 - Dummy</label></li> <li><label for="tab5">Tab 5 - Dummy</label></li> </ul> </nav> <!-- Start of Tab Content --> <div id="tab-content"> <!-- Content for 1 Tab --> <div class="div"> <h1>Text Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Content for 2 Tab --> <div class="div"> <h1>Image</h1> <img src="https://img.webnots.com/2015/11/parallax1.jpg" width="570" height="400"> </div> <!-- Content for 3 Tab --> <div class="div"> <h1>HTML5 Video</h1> <video width="570" height="400" controls autoplay> <source src="https://img.webnots.com/2015/06/Slider-Video.mp4" type="video/mp4"> </video> </div> <!-- Content for 4 Tab --> <div class="div"> <h1>TAB 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Content for 5 Tab --> <div class="div"> <h1>TAB 5</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div>

Puede agregar cualquier tipo de etiquetas HTML dentro del contenido de cada pestaña, como texto, imagen, video, etc., pero asegúrese de controlar el ancho y la altura de los elementos para ajustar la visualización dentro del área de contenido de la pestaña.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More