Как сделать меню в css: Меню для сайта html и css горизонтальное — 11 вариантов меню

Как сделать горизонтальное меню для сайта в HTML и CSS

Главная » HTML-CSS-JQUERY

HTML-CSS-JQUERY

На чтение 5 мин Просмотров 2.7к. Опубликовано Обновлено

В этой статье мы расскажем как сделать горизонтальное меню для сайта с помощью HTML и CSS. Обычно данное меню располагается в шапке на всех страницах сайта. Итак начнем)

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

Общепринятым считается создание меню с помощью стандартного списка с помощью тега <ul> обрамленного тегом <nav>. И так, создадим файл index. html и запишем в него следующий код:

 
<nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
 </nav>

Тег <nav> (от англ. Navigation перевод: Навигация), который обрамляет наш список и в HTML верстке и указывает на блок с навигационным меню сайта.

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Элементы меню стандартно расположились вертикально и у каждого элемента <li> появилась точка слева (так называемая маркером).

Давайте оформим меню согласно нашим условиям.

Стилизация menu с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Sample</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> <!-- Путь до нашего файла style.css -->
</head>
<body>
  <nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
  </nav>
</body>
</html>

Для начала нам необходимо добавить голубой фон нашему меню и сделать внутренние отступы по вертикали и горизонтали, чтобы текст ссылок не прилипал к краям нашего блока с меню. Открываем файл style.css и записываем следующий код:

 
nav {
  padding: 16px 0;
  background-color: #199BCA;
}

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.


Далее убираем маркеры в виде точек у тега <ul>, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.



nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}


Ну и наконец выравниваем список меню по горизонтали с помощью display: inline-block. Делаем отступы слева для каждого элемента <li> с помощью margin-left: 10px. Для первого элемента <li> используем псевдокласс :first-child со значением margin-left 0px. Для более четкого восприятия ссылок сделаем все буквы и цифры строчными с помощью text-transform со значением uppercase.



nav ul li {
display: inline-block;
  margin-left: 10px;
  text-transform: uppercase;
}
nav ul li:first-child {
  margin-left: 0px;
}


А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу <a> применим следующие CSS свойства:



a {
  color: #fff;
  text-decoration: none;
}


В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

В следующей статье мы рассмотрим как сделать мобильное меню с помощью CSS и JQUERY

Меню навигации с выпадающим списком на чистом CSS

Чтобы сделать меню навигации с выпадающим списком на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked.

Этот псевдосласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение “включено”. Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.

Разметка

<nav>
	<div>Website</div>
	<ul>
		<li>
			<input type="radio" name="nav-group">
			<label for="home">Home</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<input type="radio" name="nav-group">
			<label for="css">CSS</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<input type="radio" name="nav-group">
			<label for="dropdown">Dropdown</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
	</ul>
	
	<input type="radio" name="nav-group">
</nav>

Стили

. nav-main {
	width: 100%;
	background-color: #222;
	height: 70px;
	color: #fff;
}
.nav-main .logo {
	float: left;
	height: 40px;
	padding: 15px 30px;
	font-size: 1.4em;
	line-height: 40px;
}
.nav-main > ul {
	margin: 0;
	padding: 0;
	float: left;
	list-style-type: none;
}
.nav-main > ul > li {
	float: left;
}
.nav-option {
	display: none;
}
.nav-option:checked ~ .nav-content {
	max-height: 400px;
	-webkit-transition: max-height 0.4s ease-in;
	-moz-transition: max-height 0.4s ease-in;
	transition: max-height 0.4s ease-in;
}
.nav-option:checked + label {
	background-color: #444;
}
.nav-option:checked ~ .nav-close {
	display: block;
}
.nav-item {
	display: inline-block;
	padding: 15px 20px;
	height: 40px;
	line-height: 40px;
	margin: 0;
}
.nav-item:hover {
	background-color: #444;
	cursor: pointer;
}
.nav-content {
	position: absolute;
	top: 70px;
	overflow: hidden;
	max-height: 0;
	background-color: #222;
	color: #fff;
}
.nav-content a {
	color: #fff;
	text-decoration: none;
}
.nav-content a:hover {
	text-decoration: underline;
}
.
nav-sub { padding: 20px; } .nav-sub ul { padding: 0; margin: 0; list-style-type: none; } .nav-sub ul a { display: inline-block; padding: 5px 0; } .nav-close { display: none; position: absolute; top: 70px; left: 0; height: 100%; width: 100%; } .nav-close-option { display: none; }

Результат:

Смотреть результат

Теги: css

Редактировать

Панель навигации CSS

❮ Предыдущая Далее ❯


Демонстрация: Панели навигации

Вертикальная

  • Главная
  • Новости
  • Контакт
  • О

Горизонтальный

  • Домашний
  • Новости
  • Контакт
  • О

  • Дом
  • Новости
  • Контакт
  • О

Панели навигации

Удобная навигация важна для любого веб-сайта.

С помощью CSS вы можете превратить скучные HTML-меню в красивые панели навигации.


Панель навигации = Список ссылок

В качестве основы для панели навигации требуется стандартный HTML.

В наших примерах мы создадим панель навигации из стандартного HTML-списка.

Панель навигации — это, по сути, список ссылок, поэтому использование элементов

    и
  • идеально подходит для смысл:

    Пример

    Попробуйте сами »

    Теперь давайте удалим маркеры, поля и отступы из списка:

    Пример

    ул. {
      тип-стиля-списка: нет;
    маржа: 0;
    заполнение: 0;
    }

    Попробуйте сами »

    Объяснение примера:

    • тип-стиля-списка: нет; — Удаляет пули. Панель навигации не требует маркеров списка
    • Установить поле: 0; и заполнение: 0; удалить настройки браузера по умолчанию

    Код в приведенном выше примере является стандартным кодом, используемым как в вертикальных, так и в горизонтальных панелях навигации, о которых вы узнаете больше в следующих главах.

    ❮ Предыдущий Следующий ❯


    ВЫБОР ЦВЕТА



    Лучшие учебники
    Учебник по HTML
    Учебник по CSS
    Учебник по JavaScript
    Учебник How To
    Учебник по SQL
    Учебник по Python
    Учебник по W3.CSS
    Учебник по Bootstrap
    Учебник по PHP
    Учебник по Java
    Учебник по C++
    Учебник по jQuery

    900 Справочник Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3.CSS
    Справочник по Bootstrap
    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery

    Основные примеры
    Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.CSS
    Примеры Bootstrap
    Примеры PHP
    Примеры Java
    Примеры XML
    Примеры jQuery2

    | О

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

    Copyright 1999-2023 Refsnes Data. Все права защищены.
    W3Schools работает на основе W3.CSS.

    120 отличных руководств по меню CSS

    Навигация — очень важная часть вашего веб-сайта. Это то, как ваши посетители перемещаются по основным областям вашего сайта и упрощают им поиск вашего полезного контента.

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

    Сегодня мы хотели бы показать вам 100 из этих руководств; 75 уроков по горизонтальному меню CSS и 25 уроков по вертикальному меню CSS.

    Просто чтобы вы знали

    Зарегистрируйте бесплатную учетную запись Jotform , чтобы создавать мощные онлайн-формы за считанные минуты.

    Учебные пособия по горизонтальному меню CSS

    1. Продвинутый трюк с меню CSS

    Просмотреть руководство | Демонстрация

    2. Элегантное выпадающее меню только с CSS

    Просмотреть руководство | Демо

    3. Пуленепробиваемые раздвижные двери CSS

    Просмотреть учебное пособие и демонстрацию

    4. Навигация с вкладками с использованием CSS

    Просмотреть учебное пособие | Демонстрация

    5. Создание расширенного меню CSS3 — версия 2

    Просмотреть руководство | Демонстрация

    6. Создание красивого меню с помощью CSS3

    Просмотреть руководство | Демонстрация

    7. Как сделать плавное анимированное меню с помощью jQuery

    Просмотреть руководство

    8. Как создать меню на основе CSS-спрайтов

    Просмотреть учебник

    9. Простые выпадающие списки jQuery

    Просмотреть учебник | Демонстрация

    10. Дизайн заголовка Digg: инструкции и загрузка

    Просмотреть руководство | Демонстрация

    11. Динамическая страница / Замена содержимого

    Просмотреть руководство | Демонстрация

    12. Создайте забавное анимированное меню навигации с помощью чистого CSS

    Просмотреть руководство | Демо

    13. Практическое руководство: раскрывающееся меню CSS

    Просмотреть руководство | Демонстрация

    14. Гибкое меню CSS

    Просмотреть руководство и демонстрацию

    15. Создание стеклянной панели навигации без деления

    Просмотреть учебное пособие | Демонстрация

    16. Раздвижная дверь CSS с использованием только 1 изображения

    Просмотреть руководство | 17. CSS UL LI — Горизонтальное меню CSS0171

    Посмотреть учебник | Демонстрация

    19. Другая верхняя навигация

    Просмотр учебника | Демонстрация

    20. Создайте классную анимированную навигацию с помощью CSS и jQuery

    Просмотреть руководство | Демонстрация

    21. Панель навигации

    Просмотр учебника и демонстрации

    22. CSS: раскрывающееся меню, учебник

    Просмотр учебника | Demo

    23. RocketBar — постоянное меню навигации jQuery и CSS3

    Просмотреть учебник

    24. Отличное горизонтальное раскрывающееся меню CSS

    Просмотреть учебник и демонстрацию

    25. Меню эффекта наложения с jQuery

    Просмотреть учебник | Демонстрация

    26. Безобразное произвольное вращающееся меню с jQuery и CSS3

    Просмотреть руководство | Демонстрация

    27. Качающееся и вращающееся меню с закругленными углами с помощью jQuery

    Просмотреть руководство | Демонстрация

    28. Выдвижное меню с помощью jQuery и CSS3

    Посмотреть учебник | Демонстрация

    29. Расширенное меню CSS

    Просмотреть руководство | Демонстрация

    30. Выпадающее меню CSS3

    Просмотреть руководство | Demo

    31. Простое выпадающее меню с CSS

    Просмотреть руководство | Демонстрация

    32. Меню в пастельных тонах с динамическим подменю с использованием CSS

    Просмотреть руководство

    33. Создание анимированного горизонтального меню CSS3

    Просмотреть руководство | Демо

    34. Tutorial to create a Beautiful, simple, horizontal CSS menu

    View Tutorial & Demo

    35. CSS Sprites2 – It’s JavaScript Time

    View Tutorial

    36. Image Menu with Jquery

    Посмотреть учебник | Демонстрация

    37. Как закодировать главное меню с перекрывающимися вкладками

    Просмотреть руководство | Демонстрация

    38. Горизонтальное меню на чистом CSS

    Просмотреть руководство | Демо

    39. Меню на чистом CSS с бесконечными подменю Учебное пособие

    Просмотреть учебное пособие | Демо

    40. Анимированные горизонтальные вкладки

    View Tutorial & Demo

    41. CSS Sprite Navigation Tutorial

    View Tutorial

    Просмотреть руководство | Демонстрация

    43. Учебное пособие по выпадающему меню CSS

    Просмотреть учебное пособие и демонстрацию

    44. Удобная навигация с помощью CSS-переходов

    Просмотреть учебное пособие | Демонстрация

    45. Меню навигации CSS

    Просмотреть руководство

    46. CSS Dock Fish Eye Menu

    Просмотреть руководство | Демонстрация

    47. Как создать навигацию с вкладками CSS3

    Просмотреть руководство | Демонстрация

    48. Создайте меню в стиле Apple и улучшите его с помощью jQuery

    Посмотреть учебник | Демонстрация

    49. Создайте многоуровневое выпадающее меню с помощью CSS и улучшите его с помощью jQuery

    Просмотреть руководство | Демонстрация

    50. Удобная навигация с вкладками с использованием CSS3

    Просмотреть руководство | Демонстрация

    51. Создание расширенного меню CSS с использованием свойств наведения и положения

    Просмотреть руководство | Демо

    53. Как создать горизонтальное выпадающее меню с помощью HTML, CSS и jQuery

    Просмотреть руководство | Демо

    54. Раскрывающиеся меню CSS Express

    Просмотреть учебник | Демонстрация

    55. Профессиональное темное меню CSS

    Просмотреть руководство

    56. Создание простого, но стильного меню CSS Jquery

    Просмотреть руководство | Демонстрация

    57. Вкладки jQuery Drop Line

    Просмотреть руководство и демонстрацию

    58. Анимированные меню с использованием jQuery

    Просмотреть учебное пособие | Демонстрация

    59. Создание мегавыпадающего меню с помощью jQuery

    Посмотреть учебник | Демонстрация

    60. Анимированная навигация с помощью CSS и jQuery

    Просмотреть руководство | Демонстрация

    61. Горизонтальная поднавигация с CSS

    Просмотреть руководство | Демонстрация

    62. Мега выпадающие меню с CSS и jQuery

    Просмотреть руководство | Демонстрация

    63. Выпадающее меню CSS без javascript и хаков

    Просмотреть учебник и демонстрацию

    64. Выпадающее меню навигации CSS

    Просмотреть руководство

    65. Sleek Pointer Menu 2

    Просмотреть учебное пособие и демонстрацию

    66. Меню перекрывающихся вкладок CSS

    Просмотреть руководство | Демонстрация

    67. Горизонтальное меню CSS с иконками

    Просмотреть руководство | Демонстрация

    68. Создание многоуровневого раскрывающегося меню с использованием CSS и jQuery

    Просмотреть руководство | Demo

    69. Создайте самое причудливое выпадающее меню, которое вы когда-либо видели

    Просмотреть учебное пособие

    70. Создание меню навигации говорящего блока с использованием чистого CSS

    Просмотреть учебное пособие | Демонстрация

    71. Горизонтальное меню списка CSS

    Просмотреть руководство | Демонстрация

    72. Выпадающее меню CSS3

    Просмотреть руководство | Демонстрация

    73. Создание анимированного меню CSS3

    Просмотреть руководство | Демо

    74. Как создать чистую панель навигации CSS3

    Посмотреть учебник | Демонстрация

    75. Как создать современную панель навигации в виде ленточного баннера с помощью чистого HTML/CSS3

    Просмотреть руководство | Демонстрация

    Учебные пособия по вертикальному меню CSS

    76. Учебное пособие по всплывающему меню CSS

    Учебное пособие | Демо

    77. Графическое меню CSS с ролловерами

    Учебник | Демонстрация

    78. Вертикальное меню CSS с файлом поведения

    Учебник | Демо

    79. Super Fantastic CSS Navigation Image Rollovers

    Учебник | Демо

    80. Вертикальное меню с эффектом наведения с использованием CSS

    Учебник | Демонстрация

    81. Как создать эффект навигации в стиле домашней страницы Mootools с помощью jQuery

    Учебное пособие | Демонстрация

    82. Простые вертикальные меню CSS

    Просмотреть руководство | Демонстрация

    83. Создание меню обмена в социальных сетях с помощью CSS и jQuery

    Учебное пособие

    84. Минималистическое меню навигации CSS3

    Учебное пособие | Демонстрация

    Учебник | Демонстрация

    86. Потрясающее всплывающее меню Cufonized с jQuery и CSS3

    Учебник | Демонстрация

    87. Два вертикальных меню CSS с эффектами отображения/скрытия

    Учебник

    88. Анимированное выпадающее меню с jQuery

    Учебник | Демонстрация

    89. Чистое и привлекательное вертикальное меню jQuery Урок

    Учебник | Demo

    90. Nested Side Bar Menu

    Tutorial & Demo

    91. CSS menus

    Tutorial

    92. Simple Vertical CSS Menu

    Tutorial

    93. Smooth Sliding Menu

    Учебник | Демонстрация

    94. Новое изобретение раскрывающегося списка с помощью CSS и jQuery

    Учебник | Демонстрация

    95. Раскрывающиеся меню, горизонтальный стиль

    Учебное пособие

    96. Вертикальная навигация CSS с тизером

    Учебное пособие | Демо

    97. Меню в стиле jQuery с CSS3

    Учебник | Демонстрация

    98. Зеленое вертикальное меню навигации

    Учебник | Демонстрация

    99. CSS: сексуальное вертикальное всплывающее меню с CSS

    Учебник | Демонстрация

    100. Меню списка Uberlink CSS

    Учебник | Demo

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

    Код и демонстрация

    Код и демонстрация

    Код | Демо

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    код и код демо

    и демонстрация

    и Demo

    и код и код и демонстрация

    и демонстрация

    . Демо

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Код и демонстрация

    Обзор

    Мы надеемся, что вам понравился этот список навигационных меню CSS, и вы нашли что-то полезное для своего сайта (мы решили включить сочетание различных стилей меню: простые меню, яркие меню, меню, использующие jquery, меню, которые используйте чистый CSS и т.

Оставить комментарий

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

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