Как добавить вертикальное меню навигации на сайт Weebly

Добавление вертикального меню навигации на сайт Weebly – это простой способ предоставить пользователям быстрые и полезные ссылки. Это может быть виджет, последовательно размещаемый на всех страницах в качестве боковой панели, или используемый на определенных страницах, где вы хотите, или используемый на боковой панели блога. В этой статье мы объясним пошаговый процесс добавления виджета вертикального меню на ваш сайт Weebly с многоуровневыми подменю.

Посмотреть демо

Цвет текста и наведения может отличаться в зависимости от вашей темы.

Особенности виджета

  • Виджет меню навигации содержит простой код CSS и HTML.
  • Это не отзывчивый виджет, поэтому используйте многоуровневый виджет только при необходимости. Если вы ориентируетесь на мобильных пользователей или боковую панель блога, используйте только одноуровневое меню, которое может поместиться в видимой области.
  • Цвет, ширину и высоту меню можно настроить в CSS.
  • Дополнительные элементы меню или подменю могут быть добавлены по мере необходимости путем изменения CSS / HTML.
  • Вы можете разместить виджет в любом количестве мест.

CSS для вертикального меню навигации

Скопируйте и вставьте приведенный ниже код CSS в раздел «Страницы> Выберите страницу> Настройки SEO> Код заголовка” раздел. Если вы хотите добавить виджет на многие страницы, добавьте код в раздел «Тема> Редактировать HTML / CSS> Активы> main.less«.

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;
}

Это три уровня подменю, и вы можете добавить столько подменю, копируя 3-й раздел меню в коде.

HTML для меню навигации

Добавьте приведенный ниже HTML-код внутри “Код для вставки»На странице, на которой вы хотите добавить меню:

<ul id="navmenu">
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Web Design</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Hosting Plans &nbsp ›</a>
<ul>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">WordPress &nbsp ›</a>
<ul>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">First Site</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Second Site</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Third Site</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Fourth Site</a></li>
</ul>
</li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Weebly</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Wix</a></li>
</ul>
</li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Site Builder &nbsp ›</a>
<ul>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">WordPress &nbsp ›</a>
<ul>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 1</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 2</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 3</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 4</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 5</a></li>
</ul>
</li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Weebly &nbsp ›</a>
<ul>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 1</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 2</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Plan 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Email Plans</a></li>
<li><a href="https://www.webnots.com/adding-vertical-navigation-menu-in-weebly-site/#">Site Security</a></li>
</ul>

Замените описания меню и удалите # своими собственными ссылками. Также добавьте или удалите пункты меню и подменю по мере необходимости.

Теперь опубликуйте свой сайт, чтобы увидеть элегантное вертикальное меню.

Будет горизонтальная полоса прокрутки, если рядом с меню есть другой элемент, занимающий ширину.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *