| Kosten | Четверг, 21 Июня 2018, 20:37 | Сообщение 1 |
| Думаю многие хотят создать свое оригинальное меню, что сейчас одно из многих вариантов разберем, как самостоятельно создать горизонтальное меню. Здесь главное будет показана стилистика, а точнее за какие элементы они отвечают. Где далее веб мастер может сделать на чистом стиле CSS, так как здесь в дизайн применим ссылки, которые можно в стилях заменить на оттенок цвета. Несомненно, что хорошие, удобные в навигации, простые навигационные панели очень важны для любого интернет проекта.
К счастью, у нас есть CSS для стилизации нашей навигации с цветами, шрифтами, изображениями и другими элементами, что пригодятся в создание навигаций. В этом мануале по CSS узнаем, как создать неорганизованный список, чтобы создать базовую навигацию с вкладками для вашего сайта. Где изначально начнем с базового неорганизованного списка с якорями, а затем добавим стиль к каждой части и элементу нашего списка.
Давайте начнем!
ПЕРВЫЙ ШАГ:
Начнем с написания базового списка HTML . Структура неорганизованного списка с использованием 4 или более элементов списка:
Код <ul >
<li>Главная</li>
<li>Скрипты</li>
<li>Шаблоны</li>
<li>CSS</li>
<li>PRICES</li>
<li>SEO</li>
</ul>
Теперь мы добавим теги привязки a - /a, чтобы преобразовать каждый элемент списка в ссылку, и мы собираемся указать неорганизованный список с уникальным идентификатором, под названием matolasqunta:
Код <ul id="matolasqunta"> <li><a href="#" title="">ZORNET.RU</a></li> <li><a href="#" title="" >ABOUT-ZORNET.RU</a></li> <li><a href="#" title="">GALLERY-ZORNET.RU</a></li> <li><a href="#" title="">SCHEDULE-ZORNET.RU</a></li> <li><a href="#" title="">PRICES-ZORNET.RU</a></li> <li><a href="#" title="">CONTACT</a></li> </ul>
Создан идентификатор, но на всякий случай вам нужно создать больше неорганизованных списков в вашем HTML- файле.
ШАГ ВТОРОЙ:
Первое, что нам нужно для стиля, это весь список, который следовательно мы собираемся добавить объявление для ul #matolasqunta и добавить к нему различные свойства.
Прежде чем приступить к написанию декларации, обязательно сохраните в папке с изображениями два изображения, один для основного фона навигации и один для текущей ссылки. Я использовал Photoshop CS5 для создания следующих изображений, но размещу сразу под ссылку в основном коде, здесь идут 2 картинки по дизайн.
Теперь, когда у нас есть готовые изображения, давайте напишем декларацию для нашего неорганизованного списка:
Код ul#matolasqunta {
width: 100%;
height: 43px;
font-size: 12pt;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(http://zornet.ru/ABVUN/sarunolas/zornet/w6DIpkVuQcqH-pARsR8qnA.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Как вы можете видеть, что наша ширина неорганизованного списка зависит от окна браузера пользователя, и высота нашей навигации будет иметь одинаковую высоту нашего изображения. Каждое слово в списке будет иметь размер в 12pt с жирным шрифтом без засечек.
Кроме того, мы не устанавливаем ни одного для каждого стиля элемента li, поэтому никакие патроны не будут добавлены. В конце мы указали свойства фонового изображения для нашего неорганизованного списка.
Если вы просматриваете файл в своем браузере, вы должны получить следующее:
ШАГ ТРЕТИЙ:
Затем мы исправим, как отображается каждая ссылка, что делаем их корректно. Мы собираемся добавить объявление для каждого тега li, написав ul #matolasqunta li.
Давайте используем свойство display, чтобы сгенерировать блок до и после каждой ссылки, и давайте поместим каждую ссылку влево с краем 5px между каждой ссылкой:
Код ul#matolasqunta li {
display: block;
float: left;
margin: 0 0 0 5px;
}
Предварительный просмотр в браузере:
ШАГ ЧЕТВЕРТЫЙ:
Каждой ссылке требуется больше места, и они также нуждаются в большем стиле. Мы исправим это, добавив объявление для привязки каждой ссылки a:
Код ul#matolasqunta li a {
height: 47px;
color: #236086;
text-decoration: none;
display: block;
float: left;
padding-top: 7px;
padding-right: 16px;
padding-bottom: 5;
padding-left: 16px;
}
Предварительный просмотр в браузере:
Теперь каждая ссылка имеет свое пространство и цвет. Нам нужно добавить еще два свойства, чтобы стиль их зависания и текущего состояния.
Впоследствии наше состояние наведения ссылок не нуждается в слишком большом стиле, где просто добавим им цвет:
Код ul#matolasqunta li a:hover {
color: #3487a7;
}
ШАГ ПЯТЫЙ:
Чтобы завершить нашу навигацию с вкладками, нам нужно указать, как будет выглядеть каждая выбранная ссылка. Здесь мы применяем наш образ картинки, под классом granipas, чтобы придать нашей навигации вкладку. Поскольку у меня нет связанных страниц для каждой ссылки, я собираюсь добавить класс к одной из ссылок, чтобы вы могли видеть, как работает текущее состояние.
Код <li><a href="#" title="" class="granipas">ZORNET.TU</a></li>
Где к основный стилям добавляем:
Код ul#matolasqunta li a.granipas{
color: #efebeb;
padding: 7px 18px 0;
background-image: url(http://zornet.ru/ABVUN/sarunolas/zornet/IhU5-s1IQQuoIFiIofvBMw.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Предварительный просмотр в браузере:
Вот и завершили создание горизонтальной навигаций. Здесь можно сказать она старая, так как на ссылках дизайн построен, но не в этом дело. Так как показано, как вообще выстраивается комплекция с функциями, что все работают. И теперь вы самостоятельно можете сделать свое меню, хоть на ссылках или подключить вместо их background: #3487a7; что будет отвечать за фон.
Примечание: Вы можете скачать архив, где уже полностью собрано меню, также идут файлы и остальные элементы.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 22 Июня 2018, 23:44 | Сообщение 2 |
|
| Одну ссылку убрал, где цвет поставил под стили, возможно кому то пригодится, здесь также выставляем ту палитру, которая подходит под дизайн. Но также можно заметить, что ссылка одна осталась, где показывает главную страницу, там дизайн ище на ссылке, но думаю можно оставить, здесь главное оформление самой панели сделать.
CSS
Код ul#matolasqunta {
width: 100%;
height: 37px;
font-size: 11pt;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0px;
padding: 0px;
background-repeat: repeat-x;
background-position: left top;
background: #c1c1c1;
text-shadow: 0 1px 0 #d8d8d8;
border: 2px solid #e0e0e0;
color: #c1b8b8;
} | | Страна: (RU) |
| |
