Всем здравствуйте. В этой статье поговорим об актуальной теме-меню для наших блогов. Сегодня хочу предложить простое горизонтальное и вертикальное меню с фоном градиента. Пример меню горизонтального:
Фон градиент каждый сможет оформить или выбрать под свой дизайн, и меню в Вашем блоге будет отличаться от всех других. А сейчас начнем создавать меню. Я буду использовать обычные ссылки в контейнере nav без маркированного списка ul и пунктов li: <a href = "#">Главная</a>
Для вертикального меню удалите с кода CSS свойство float: left; пример:
Как закрыть ссылки от индексации и открыть в новом окне читайте в статье Горизонтальное фиксированное многоуровневое меню для блоггер;
<nav>
<a href = "#">Главная</a>
<a href = "#">Контакты</a>
<a href = "#">Карта блога</a>
</nav>
Добавим оформление, используя стили CSS
<style>
nav a{
display:block;
}
nav a{
float: left; *// блочные свойства ссылок
font-size:14px; *// размер шрифта
text-decoration: none;
border-right: 1px solid #000; *// цвет разделителя справа
padding: 8px;
background:linear-gradient(to right, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); *// фон градиент
border-bottom:2px solid rgba(206,220,231,1); *// размер, форма и цвет нижней границы
border-radius:px; *//радиус скругления углов
}
nav a:hover{
background:rgba(167,199,220,1); *// фон при наведении
}
a:link{
color:#fff; *// цвет ссылок
}
a:link{
color:#fff; *// цвет ссылок
}
</style>
Для вертикального меню удалите с кода CSS свойство float: left; пример:
Цвет шрифта ссылок можно настроить в конструкторе тем (дизайнер шаблонов прежнее название). С кода CSS стилей удалить строку a:link{color:#fff;}
Для любителей плавающего меню, зафиксировать, добавим свойство fixed;
nav{
position: relative;
width:100%;
z-index: 5;
border:1px solid rgba(206,220,231,1);
position: fixed; top: 0px; left:0px;
}
Как закрыть ссылки от индексации и открыть в новом окне читайте в статье Горизонтальное фиксированное многоуровневое меню для блоггер;
При желании можете добавить другие эффекты оформления, нужно минимум знаний CSS. Также фоном градиент можно оформить фон шапки, сайдбар, основной фон и футер блога. Пример сходите посмотреть в тестовый блог.
Рекомендую посмотреть статью Как подобрать совместимость фонового цвета;
На выбор разные фоны градиент или настройте свой фон, тут уже зависит от фантазии. На этом у меня вся информация. Все вопросы в комментариях или работает форма контактов. Всего доброго.
Читайте также:
Рекомендую посмотреть статью Как подобрать совместимость фонового цвета;
Хороший сервис CSS градиент генератор
Ссылка на сайт www.colorzilla.com/gradient-editor
На выбор разные фоны градиент или настройте свой фон, тут уже зависит от фантазии. На этом у меня вся информация. Все вопросы в комментариях или работает форма контактов. Всего доброго.
Читайте также:
