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

¿Cómo agregar un menú de navegación vertical en el sitio Weebly?

6

Agregar un menú de navegación vertical en el sitio de Weebly es una manera fácil de proporcionar enlaces rápidos y útiles a los usuarios. Puede ser un widget colocado de forma coherente en todas las páginas como barra lateral o utilizado en páginas específicas donde desee o utilizado en la barra lateral de un blog. En este artículo, explicaremos el proceso paso a paso para agregar un widget de menú vertical a su sitio Weebly con submenús de varios niveles. Recuerde, el texto y el color del cursor pueden variar según su tema.

  • El widget del menú de navegación contiene código CSS y HTML simple.
  • Este no es un widget receptivo, por lo tanto, use varios niveles solo si es necesario. Si está orientado a usuarios móviles o a la barra lateral del blog, utilice solo el menú de un solo nivel que pueda caber en el área visible.
  • El color, el ancho y la altura del menú se pueden personalizar en CSS.
  • Se pueden agregar elementos de menú o submenú adicionales según lo necesite modificando CSS / HTML.
  • Puede colocar el widget en tantos lugares como desee.

Copie y pegue el siguiente código CSS en la sección "Páginas> Seleccionar una página> Configuración de SEO> Código de encabezado ". Si desea agregar el widget en muchas páginas, agregue el código en "Tema> Editar HTML / CSS> Activos> principal. menos".

ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 200px; /*For KHTML*/ list-style: none; } ul#navmenu:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu li { float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: #EEE; color: #666; font: 18px/40px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 200px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; }

Esto es para tres niveles de submenús y puede agregar tantos como submenús mediante la replicación de la tercera sección del menú en el código.

Agregue el siguiente código HTML dentro del elemento " Código incrustado " en una página donde desea agregar el menú:

<ul id="navmenu"> <li><a href="#">Web Design</a></li> <li><a href="#">Hosting Plans &nbsp ›</a> <ul> <li><a href="#">WordPress &nbsp ›</a> <ul> <li><a href="#">First Site</a></li> <li><a href="#">Second Site</a></li> <li><a href="#">Third Site</a></li> <li><a href="#">Fourth Site</a></li> </ul> </li> <li><a href="#">Weebly</a></li> <li><a href="#">Wix</a></li> </ul> </li> <li><a href="#">Site Builder &nbsp ›</a> <ul> <li><a href="#">WordPress &nbsp ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> <li><a href="#">Plan 4</a></li> <li><a href="#">Plan 5</a></li> </ul> </li> <li><a href="#">Weebly &nbsp ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Email Plans</a></li> <li><a href="#">Site Security</a></li> </ul>

Reemplace las descripciones del menú y elimine # con sus propios enlaces. También agregue o elimine elementos de menú y submenú según lo necesite.

Ahora publique su sitio para ver un elegante menú vertical como el siguiente.

¿Cómo agregar un menú de navegación vertical en el sitio Weebly?

Widget de menú de navegación vertical

Nota: Habrá una barra de desplazamiento horizontal si hay otro elemento colocado al lado del menú ocupando el ancho.

Fuente de grabación: 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