Як можна побачити, то тут використовували найпростіші списки HTML, все для того, щоб вивести всі списки, які знаходяться під посиланнями на перехід тієї чи іншої категорії. Концепція полягає в тому, це гарно впорядкувати навігаційний список у горизонтальному вигляді, але при мобільності він стане автоматично вертикальним положенням, як показано на зображеннях, що закріплені за матеріалом.
Що спочатку закріплені за кожним запитом, де сам розробник може змінити ту тематику, або ті фігури, що більше тематично підходять. Саме меню створено у темно-зеленому кольорі, просто вибраний цей відтінок, який рідко можна зустріти. Але все можна кардинально змінити, це зайшовши в стилістику CSS, і там виставити той стиль дизайну, який вам потрібен, а найбільше, щоб добре списався в основу інтернет ресурсу.
1 . Так за замовчуванням йде або під час заходу на портал.
2 . Вже дивимося з мобільного апарату, але поки що не викликали під меню.
3 . Тут зробили клік, що з'явилися всі запити, що запитуються.
Приступаємо до встановлення:
ZORNET.RU
CSS
section(
width:100%;
max-width:1198px;
margin:0px auto;
display:table;
position:relative;
}
Header(
width:100%;
display:table;
background-color: #175812;
margin-bottom:50px;
}
#kamtukagnpos(
float: left;
font-size: 25px;
text-transform: uppercase;
color: #fffab2;
font-weight: 600;
padding: 19.8px 0px;
}
#kamtukagnpos:hover (
text-shadow: 0px 0px 6px rgba (255, 250, 250, 0.67);
}
Nav(
width:auto;
float:right;
}
Nav ul(
display:table;
float:right;
}
Nav ul li(
float:left;
}
Nav ul li:last-child(
padding-right:0px;
}
Nav ul li a (
color: #e4f2ff;
font-size: 19px;
padding: 24px 19px;
display: inline-block;
text-shadow: 0 1px 0 #2e2f2e;
}
Nav ul li a:hover (
background-color: #143a06;
color: #fff9c8;
transition: all 0.7s ease 0s;
text-shadow: 0 1px 0 #282b28;
}
Nav ul li a:hover i (
color: #fdf7c9;
transition: all 0.7s ease 0s;
text-shadow: 0 1px 0 #1c1d1c;
}
Nav ul li a i (
padding-right: 9px;
color: #f4faff;
transition: all 0.7s ease 0s;
text-shadow: 0 1px 0 #202120;
}
Navigation-menusaita ul(
display:table;
width:24px;
}
Navigation-menusaita ul li(
width:100%;
height:3px;
background-color: # e9f0f7;
margin-bottom:4px;
}
Navigation-menusaita ul li:last-child(
margin-bottom:0px;
}
Input, label(
display: none;
}
@media only screen and (max-width: 1440px)(
section(
max-width:95%;
}
}
@media only screen and (max-width: 980px)(
header(
padding:20px 0px;
}
#kamtukagnpos(
padding:0px;
}
Input(
position: absolute;
top: -9999px;
left: -9999px;
background:none;
}
Input:fous(
background:none;
}
Label(
float:right;
padding:8px 0px;
display:inline-block;
cursor:pointer;
}
Input:checked ~ nav(
display:block;
}
Nav(
display: none;
position:absolute;
right:0px;
top:53px;
background-color: #174810;
padding:0px;
z-index:99;
}
Nav ul(
width:auto;
}
Nav ul li(
float:none;
padding:0px;
width:100%;
display:table;
}
Nav ul li a (
color:#f7f2f2;
font-size:15px;
padding:10px 20px;
display:block;
border-bottom: 1px solid rgba (204, 197, 197, 0.1);
}
Nav ul li a i(
color:#f9f5d5;
padding-right:13px;
}
}
@media only screen and (max-width: 480px) (
section (max-width: 90%;)
}
@media only screen and (max-width: 360px) (
label(padding:5px 0px;)
#kamtukagnpos(font-size: 20px;)
nav(top:47px;)
}
Перед тим як ставити, то важливо подивитися на Demo сторінку, і реально оцінити, як все працює, але за фактом нічого такого немає, хіба тільки до назви ресурсу доданий ефект, де при наведенні всі знаки йдуть під тінню, що набагато яскравіше відображаються.
Хороша навігація сайтом дуже важлива блогерів. За її допомогою відвідувач швидко знаходить потрібну сторінку блогу. Цінують зрозумілість сайту та пошукові системи. У цій статті ви дізнаєтесь як зробити горизонтальне меню для Blogger зі спливаючими іконками.
Меню зі спливаючими кнопками-іконками створено на CSS. Щоб переглянути меню, натисніть на кнопку нижче:
Як вставити горизонтальне меню css з іконками на Blogger
- Перейдіть у вкладку “Шаблон”, поставте курсор у редактор (у будь-яке місце),
- Натисніть Ctrl + F для пошуку за кодом та знайдіть відрізок коду ]]>
- Вставте перед цим кодом наступний код:
../* CSS Code для menu starts here bloggertrix.com */ #btrix-nav (margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;)
#btrix-nav li (float: left;)
#btrix-nav li (display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb; border-bottom: 1px solid #555;)
#btrix-nav li a span.aname (font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);)
#btrix-nav li a img (position: relative;top: 0;transition: top .5s ease;)
#btrix-nav li a:hover (cursor: pointer;)
#btrix-nav li:hover img (top: -85px;)
#btrix-nav li a:hover .aname (top: 85px;)
#btrix-nav li:nth-child(1) a (background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;)
#btrix-nav li:nth-child(2) a (background: #9bc704;)
#btrix-nav li:nth-child(3) a (background: #0dc3ff;)
#btrix-nav li:nth-child(4) a (background: #51a2ec;)
#btrix-nav li:nth-child(5) a (background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;) - Тепер перейдіть у вкладку "Дизайн",
- Додати новий елемент HTML/ JavaScript та додайте код:
- Головна
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
- завантажити
- MySql
- Html
- Контакти
- Головна
- Внесіть у код, який додали до гаджету HTML / JavaScript необхідні зміни:
- Значок # змініть посилання на потрібну сторінку блогу (наприклад, сторінку мітки, сторінку “контакти”, головну сторінкублогу та ін)
- посилання на картинку, виділену помаранчевим, замініть на пряме посилання на іконку-картинку для відповідного пункту.
- Пункт, виділений синім, це назва сторінки меню css.
Для вашого меню ви можете використовувати іконки, логотипи та інші зображення png з прозорим фоном. Для того, щоб знайти потрібні картинки, краще використовувати пошук за іконками. Наприклад, iconsearch.ru
Вертикальне менюробиться на основі списку, маркованого чи нумерованого. За замовчуванням всі елементи списку розташовуються вертикально, займаючи ширину всю ширину елемента контейнера , який у свою чергу займає всю ширину його блоку-контейнера.
Елементи списку можуть містити як посилання, але й заголовки, іконки, картинки. За допомогою вертикального меню можна оформляти коментарі на веб-сайті, перелік категорій і т.д.
1. Вертикальне меню із заголовком
Простий елегантний варіант оформлення. Підходить для стилізації категорії на сайті. При наведенні елемент списку змінює колір посилання.
* (box-sizing: border-box; margin: 0;) .widget ( padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) letter-spacing: 2px; color: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; -style: none; ). 6px 0; letter-spacing: 1px; font-weight: 300; color: #444; transition: .3s linear; ).
2. Вертикальне меню у стилі «схема метро»
Цікаве рішення для оформлення вертикального меню, передбачено додавання вкладеного меню. "Гілка метро" - ліва межа списку, маркери генеруються перед кожним посиланням.
- Елемент списку
- Елемент вкладеного списку
- Елемент вкладеного списку
- Елемент вкладеного списку
- Елемент списку
- Елемент списку
3. Вертикальне меню з ефектами при наведенні
Іконка та фонова заливка, що виявляються при наведенні на елемент списку, допоможуть урізноманітнити дизайн елементів вертикального меню.
.category-wrap ( padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; h3:after ( content: ""; width: 6px; height: 6px; background: #80C8A0; position: absolute; right: 5px; bottom: 2px; box-shadow: -8px -8px #80C8A0, 0 -8p0 #80C , -8px 0 #80C8A0; ) .category-wrap ul ( list-style: none; margin: 0; padding: 0; wrap li (margin: 12px 0 0 0px;) .category-wrap a ( text-decoration: none; display: block; font-size: 13px; position: relative; transition: .3s linear; ) .category-wrap a:after (content:"\f18e"; font-family: FontAwesome; ; ) .category-wrap a:hover ( background: #80C8A0 ; color: white; )
4. Вертикальне меню з іконками
Іконки в меню створюють візуальний якір, доповнюючи словесний опис кожної категорії. Для відображення іконок необхідно підключити . Ви також можете використовувати будь-який інший шрифт іконки або іконки-картинки.
* (box-sizing: border-box; margin: 0;) .widget ( padding: 20px; border: 5px solid #f1f1f1; serif; ). -style: none;width:250px;) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) margin-bottom: 0; padding-bottom: 0;) .widget a (text-decoration: none; : 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; . 2):before (content:"\f0d0";) .widget li:nth-child(3):before (content:"\f0cd";) .widget li:nth-child(4):before (content:" \f028";) .widget li:nth-child(5):before (content:"\f03d";)
5. Вертикальне меню з картинками
Даний приклад можна використовувати для оформлення блоків з новинками, схожими товарами тощо. сайт інтернет-магазину.
Jpeg">
