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

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

Стиль 1
Стиль 2
Стиль 3

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

Он имеет простой неупорядоченный список, а свойство «list-style: none» используется для скрытия маркеров. Сначала давайте создадим несколько стилей для списка меню, это необходимо, чтобы стили CSS не мешали стилям списка по умолчанию Weebly.

#menu {
line-height: 30px;
}

#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#menu li {
display:inline;
margin:0;
padding:0;
}

Затем у нас есть еще несколько определений стилей для элементов ссылок и спама:

#menu a {
float:left;
background: #FF9933;
border: 1px solid #33CCCC;
border-radius:8px 0px 0px 0px;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#menu a span {
float:left;
display:block;
background: #FF9933;
padding:5px 15px 4px 6px;
color: #000033;
font-weight: 600;
box-shadow: 10px 10px 5px #888888;
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

# a:hover span {
color:#FFF;
}

Ниже приводится полный CSS-код, который необходимо добавить в раздел «Код заголовка» вашей страницы Weebly.

<style>

#menu {
line-height: 30px;
}

#menu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#menu li {
display:inline;
margin:0;
padding:0;
}

#menu a {
float:left;
background: #FF9933;
border: 1px solid #33CCCC;
border-radius:8px 0px 0px 0px;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#menu a span {
float:left;
display:block;
background: #FF9933;
padding:5px 15px 4px 6px;
color: #000033;
font-weight: 600;
box-shadow: 10px 10px 5px #888888;
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

# a:hover span {
color:#FFF;
}

</style>

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

Замените ссылки и якорные тексты в приведенном ниже HTML-коде и вставьте его в элемент «Вставить код» на своей странице Weebly:

<div id="menu">
<ul>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>WordPress</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Weebly</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Wix</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Squarespace</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Yola</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Webs</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Drupal</span></a></li>
<li><a href="https://www.webnots.com/add-horizontal-navigation-menu-in-weebly-site/#"><span>Joomla</span></a></li>
</ul>
</div>

Параметры настройки

Поскольку CSS для этого виджета очень прост, его можно настроить по своему усмотрению. Например, для изменения внешнего вида можно настроить высоту линии, цвета фона и радиус границы. Ознакомьтесь с демонстрацией, показывающей различные меню навигации с небольшими изменениями в базовом CSS.

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

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

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