Доброго часу, дорогі читачі. Сьогодні ми розберемо тему « як зробити горизонтальне менювикористовуючи HTML та CSS». Меню, як правило, знаходиться у шапці сайту і є переліком посилань на найважливіші сторінки, його також називають головному меню. Дані посилання користувачі постійно натискатимуть. Те, як ви їх розташуєте і який дизайн ви поставите меню буде впливати на поведінку користувачів, конверсію, їх загальне враження від вашого сайту і, звичайно, на .

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

Колись давно головне меню для сайту робили на картинках, таблицях, флеш і можливо на чомусь ще, але в наш час існує найпопулярніший і він же правильний метод створення меню використовуючи теги «списку».

Для створення меню використовують теги

,
• і .

Приклад використання html тегів для створення меню в коді нижче:

• Головна
• Послуги
• Ціни
• Контакти

Стандартні CSS стилі для горизонтального меню

ul ( list-style: none; /*прибираємо маркери списку*/ margin: 0; /*прибираємо відступи*/ padding-left: 0; /*прибираємо відступи*/ ) a ( text-decoration: none; /*прибираємо підкреслення тексту посилань*/ ) li ( float:left; /*Розміщуємо список горизонтально для реалізації меню*/ margin-right:5px; /*Додаємо відступ у пунктів меню*/ )

Ми отримуємо готове верхнє меню в шапку, без особливих стилів та наворотів це можна назвати каркасом вашого майбутнього красивого меню. Якщо ви скопіюєте і поставите в себе цей html і css це буде виглядати так.

Приклад каркасу (шаблону) вашого майбутнього меню

Вийшло все досить простенько, ви, звичайно ж, хочете відразу красиве головне меню, але без розуміння основ у вас просто не вдасться створити хороше меню без помилок у html і css.

Існує так само кілька інших CSS методів, що використовуються для того, щоб зробити меню горизонтальним крім float:left; наприклад, display:inline-block; або display:flex; , але рекомендується використовувати спосіб, описаний вище.

Давайте ж наповнимо наш шаблон меню різними стилями і зробимо його гарним.

Приклади гарного горизонтального меню для сайту

Зараз я наведу кілька готових прикладів із готовим дизайном горизонтального меню.

Усі «краси» ви можете створити для свого сайту самі, а не шукати в інтернеті. Найпростіше це зробити взявши за основу один із прикладів нижче

Просте меню синього кольору із роздільними пунктами

CSS стилі «верхнього» меню

Нижче розташовані стилі даного меню. HTML залишається тим самим, що й у «каркасі» меню.

Ul ( list-style: none; /*прибираємо маркери списку*/ margin: 0; /*прибираємо відступи*/ padding-left: 0; /*прибираємо відступи*/ margin-top:25px; /*робимо відступ зверху*/ ) a ( text-decoration: none; /*прибираємо підкреслення тексту посилань*/ background:#30A8E6; /*додаємо фон до пункту меню*/ color:#fff; /*міняємо колір посилань*/ padding:10px; /*додаємо відступ*/ font-family: arial;/*міняємо шрифт*/ border-radius:4px;/*додаємо скруглення*/ плавний перехід*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; ) a:hover ( background:#1C85BB;/*додаємо ефект при наведенні*/ ) li ( float:left; /*Розміщуємо список горизонтально для реалізації меню*/ margin-right:5px; /*Додаємо відступ у пунктів меню*/ )

Головне меню, розташоване на кольоровій лінії з червоним тлом

CSS стилі меню на кольоровій лінії

ul ( list-style: none; /*прибираємо маркери списку*/ margin: 0; /*прибираємо відступи*/ padding-left: 0; /*прибираємо відступи*/ margin-top:25px; /*робимо відступ зверху*/ background:#FF4444;/*додаємо фон усьому меню (замінивши цей параметр, ви поміняєте колір всього меню)*/ height: 50px; / background:#FF4444;/*додаємо фон до пункту меню (замінивши цей параметр, ви поміняєте колір усіх пунктів меню)*/ color:#fff; font-family: arial;/*змінюємо шрифт*/ line-height:50px;/*рівняємо меню по вертикалі*/ display: block; : all 0.3s 0.01s ease; /*робимо плавний перехід*/ -o-transition: all 0.3s 0.01s ease; *додаємо ефект при наведенні*/ ) li ( float:left; /*Розміщуємо список горизонтально для реал ізації меню*/ )

Випадаюче меню на HTML+CSS

Для реалізації додаткового меню, що випадає (розкривається) на сайтіу будь-якого пункту меню нам необхідно додати додатковий перелік пунктів HTML-код для будь-якого посилання з горизонтального меню і змінити стилі CSS. У стилях ми будемо застосовувати простий трюк - зміна відображення меню, що розкривається, за допомогою наведення на потрібний нам пункт в верхньому меню. Наприклад візьмемо пункт «послуги».

Приклад створення простого меню, що випадає

HTML код випадаючого меню

• Головна
• Послуги
  • Послуга 1
  • Довга послуга 2
  • Послуга 3
• Ціни
• Контакти

Стилі CSS випадаючого меню

ul ( list-style: none; /*прибираємо маркери списку*/ margin: 0; /*прибираємо відступи*/ padding-left: 0; /*прибираємо відступи*/ margin-top:25px; /*робимо відступ зверху*/ background:#819A32;/*додаємо фон усьому меню*/ height: 50px;/*задаємо висоту*/ ) a ( text-decoration: none; пункту меню*/ color:#fff;/*міняємо колір посилань*/ padding:0px 15px;/*додаємо відступ*/ font-family: arial; вертикалі*/ display: block; border-right: 1px solid #677B27;/*додаємо бордюр справа*/ 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; / position:relative; /*задаємо позицію для позиціонування*/ ) /*Стилі для прихованого меню* / li > ul (position:absolute; top:25px; display: none; ) /*Робимо приховану частину видимої*/ li:hover > ul ( display:block; width:250px; /*Задаємо ширину меню*/ ) li:hover > ul > li ( float:none; /*Прибираємо горизонтальне позиціонування* / )

А щоб зрозуміти, які саме у вас повинні бути послуги та категорії, рекомендую ознайомитися з матеріалом: .

Я постарався максимально коротко розповісти вам про те, як створити головне горизонтальне меню, зробити кілька шаблонів, як додати до нього прості стилі і зробити його симпатичнішим, як зробити меню, що випадає, для вашого сайту. Для зручності я зібрав все меню, представлені вище, в одному html-файлі, який ви можете завантажити нижче. Виглядає це як на скріншоті:

Дякую за увагу.

З оновленням все має бути адаптивним на сайті, не виключаємо горизонтальне меню, що аналогічно має бути доброзичливим на всі екрани. Де пропоную розглянути класичну навігацію, виконану на чистому стилі, без застосування JS. Де по своєму стиль може підійти на багато сайтів, так як створено в простому, стандартному вигляді, але з присутністю ефектів. Також якщо переглядати з мобільних носіїв, то автоматично з'явиться кнопка з правої сторони, де при натисканні не на всю ширину з'явиться під категорій, а все акуратно, з того ж боку, де візуально будуть переглядатися шрифтові кнопки.

Як можна побачити, то тут використовували найпростіші списки 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

1. Перейдіть у вкладку “Шаблон”, поставте курсор у редактор (у будь-яке місце),
2. Натисніть Ctrl + F для пошуку за кодом та знайдіть відрізок коду ]]>
3. Вставте перед цим кодом наступний код:
   ..
   

   /* The 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;)

4. Тепер перейдіть у вкладку "Дизайн",
5. Додайте новий елемент HTML / JavaScript та додайте код:

   
   

   Головна https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />

   
   

   завантажити https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

   
   

   MySql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />

   
   

   Html https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />

   
   

   Контакти https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

6. Внесіть у код, який додали до гаджету HTML / JavaScript необхідні зміни:

• Значок # змініть посилання на потрібну сторінку блогу (наприклад, сторінку мітки, сторінку “контакти”, головну сторінкублогу та ін)
• посилання на картинку, виділену помаранчевим, замініть на пряме посилання на іконку-картинку для відповідного пункту.
• Пункт, виділений синім, це назва сторінки меню CSS.

Перемістіть елемент HTML? JavaScript у потрібне місце у вкладці "Дизайн" блогу.

Для вашого меню ви можете використовувати іконки, логотипи та інші зображення png з прозорим фоном. Для того, щоб знайти потрібні картинки, краще використовувати пошук за іконками. Наприклад, iconsearch.ru

Це список посилань, що ведуть до різні сторінкисайту. Непогано виглядає, коли список посилань замість простих маркерів, доповнюється іконками і зовсім необов'язково використовувати графіку. Навіщо створювати зайві запити до бази даних?

HTML-код

Між тегами liпрописуємо посилання a(# тимчасова заглушка), всередині якої два блокові елементи span. У першому span - тег iз класом іконки, код якої було скопійовано з сайту Font Awesome. У другому span- Назва посилання, тобто текст.

• 
  
  
  Велосипеди
  
  


• 
  
  
  Мотоцикли
  
  


• 
  
  
  Автобуси
  
  


• 
  
  
  Автомобілі
  
  


• 
  
  
  Вертольоти
  
  

Після підключення між тегами headіконного шрифту Font Awesome- меню має такий вигляд.

CSS стилі

Для початку на Google Fontпідберемо привабливий шрифт за допомогою кирилиці, якщо вертикальне меню буде російською.

Копіюємо код підключення вибраного шрифту і вставляємо зверху в CSSфайл.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

У селекторі bodyпишемо назву вибраного шрифту і задаємо йому розмір.

Body (
margin: 0;
padding: 0;
font-family: "Marck Script", sans-serif;
font-size: 20px;
}

Позиціонуємо наше меню щодо вікна браузера, відступаючи зверху на 10% та зліва на 20%. Зрозуміло, що ці цифри взяті зі "стелі", у вас вони будуть свої.

Ul (
position: absolute;
top: 10%;
left: 20%;
}

Фіксуємо ширину меню на 200 пікселів.

Width: 200px;

Ми дійшли до пунктів меню списку. Забираємо маркери у пунктів li.

Ul li (
list-style: none;
}

Позначаємо рамки зверху та знизу, що відокремлюють пункти меню один від одного.

Border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
margin: -1px 0;

Не вистачає бічних рамок та роздільників між іконками та назвами посилань.

Малюємо праву рамку біля тега a, який є рядковим елементом, а навколо рядкового елемента рамку не можна зробити. Тому відображаємо тег aблоковий елемент.

Ul li a (
display: block;
}

Тепер можна рамку задати, прибрати підкреслення посилань і прописати колір посилань.

Border-right: 1px solid #131313;
text-decoration: none;
color: #131313;

Бракує ще лівої рамки.

Теги span- блокові елементи, всередині яких буде текст, тому spanвідобразимо рядково-блочним елементом.

Ul li a span (
position: relative;
display: inline-block;
}

Нам необхідно для першого span, всередині якого буде іконка, задати стилі, що відрізняються від другого span. Для цього перший spanпозначимо псевдокласом - span:nth-child(1)та стилізуємо його окремо. Встановимо праву та ліву рамку та ширину.

Ul li a span:nth-child(1) (
width: 30px;
border-left: 1px solid #131313;
border-right: 1px solid #131313;
}

Іконки стануть посередині з полями по 10 пікселів на всі боки.

Text-align: центр;
padding: 10px;

Іконки будуть темного кольору розміром 20 пікселів на червоному тлі.

Color: #131313;
font-size: 20px;
background: #f44336;

У другому псевдокласі треба задати тільки поля.

Ul li a span:nth-child(2) (
padding: 10px;
}

Тепер вертикальне менюнабрало свого остаточного вигляду. Дивіться весь код та результат.

Існує маса готових рішеньдля створення таких панелей з допомогою jQuery, окремі плагіни та модулі для різних систем керування сайтом.
Це все дуже добре, але чи можна, для реалізації бічних слайд-панелей обійтися виключно засобами CSS? Звичайно можна! Але обережно))) з огляду на те, що не всі браузери однаково добре підтримують сучасні властивості CSS3.

Нещодавно, «видав на-гора» рішення і приклад роботи. Один із перших коментарів був таким: «давайте її в бік перемістимо...». Чому б і ні? Давайте)).

Сьогодні розповім і покажу на прикладі, як за допомогою «магії CSS» можна забабахать, цілком функціональне, меню, по кліку.
Для початку, за заведеною традицією, дивимося живий приклад роботи панелі, далі, разом з тими комусь воно треба, розглянемо весь розклад, що, як і навіщо. Передбачаючи питання, приготував варіанти розташування меню, як ліворуч, так і праворуч:

HTML-розмітка

Почнемо розбір з перемикача панелі, в якості якого використовуємо стандартний прапорець ():

Маємо чекбокс у верхній частині документа, краще відразу після тега . Прописуємо атрибут hidden , безпосередньо вказуючи стан «прихований» у даного елемента, а також надамо унікальний ідентифікатор, id="nav-toggle" наприклад, для зв'язування з атрибутом for тега , який ми оформимо і будемо використовувати як кнопки перемикання панелі.

Як обгортка вмісту бічної панелі використовував тег