Главная » Языки программирования

Home page menu html

Содержание
  1. CSS меню
  2. Вертикальное меню
  3. Горизонтальное меню
  4. Выпадающее меню
  5. 102 CSS Menu
  6. Table of Contents
  7. Related Articles
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. Menu
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Fullscreen Overlay Navigation Bar
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Three Fancy Link Hover Effects
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Navigation Dotted Hover Effect
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. Fullscreen Overlay Navigation Bar
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. Context Menu
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. Pure CSS Menu
  43. Author
  44. Links
  45. Made with
  46. About a code
  47. Neumorphism Context Menu
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. Simple Navigation System
  53. Author
  54. Links
  55. Made with
  56. About a code
  57. CSS Menu
  58. Author
  59. Links
  60. Made with
  61. About a code
  62. Fullscreen Menu Enter
  63. Author
  64. Links
  65. Made with
  66. About a code
  67. Context Menu with Feather Icons
  68. Author
  69. Links
  70. Made with
  71. About a code
  72. CSS Hamburger Menu
  73. Author
  74. Links
  75. Made with
  76. About a code
  77. Text Fill on Hover
  78. Author
  79. Links
  80. Made with
  81. About a code
  82. List Item Hower Effect
  83. Author
  84. Links
  85. Made with
  86. About a code
  87. CSS-Only Marquee Effect
  88. Author
  89. Links
  90. Made with
  91. About a code
  92. CSS Full-Page Navigation
  93. Author
  94. Links
  95. Made with
  96. About a code
  97. Randomly Generated CSS Blobby Nav
  98. Author
  99. Links
  100. Made with
  101. About a code
  102. Full-Page Navigation
  103. Author
  104. Links
  105. Made with
  106. About a code
  107. Pure CSS Full Page Nav
  108. Author
  109. Links
  110. Made with
  111. About a code
  112. Fold Out Mobile Menu
  113. Author
  114. Links
  115. Made with
  116. About a code
  117. Menu Hover Fill Text
  118. Author
  119. Links
  120. Made with
  121. About a code
  122. Menu with Awesome Hover
  123. Author
  124. Links
  125. Made with
  126. About a code
  127. CSS Navigation Bar
  128. Author
  129. Links
  130. Made with
  131. About a code
  132. Menu Hover Underline
  133. Author
  134. Links
  135. Made with
  136. About a code
  137. Apple TV Menu Interface
  138. Author
  139. Links
  140. Made with
  141. About a code
  142. CSS Strange Nav
  143. Author
  144. Links
  145. Made with
  146. About a code
  147. Navbar with Pure CSS
  148. Author
  149. Links
  150. Made with
  151. About a code
  152. Navbar Interaction
  153. Author
  154. Links
  155. Made with
  156. About a code
  157. Off Canvas Menu Pure CSS
  158. Author
  159. Links
  160. Made with
  161. About a code
  162. Menu Bar CSS
  163. Author
  164. Links
  165. Made with
  166. About a code
  167. Vertical Dark Menu with CSS
  168. Author
  169. Links
  170. Made with
  171. About the code
  172. Moving Underline Nav Menu
  173. Author
  174. Links
  175. Author
  176. Links
  177. Made with
  178. About the code
  179. Navigation Menu
  180. Author
  181. Links
  182. Made with
  183. About the code
  184. 3D Navbar
  185. Author
  186. Links
  187. Made with
  188. About the code
  189. Just Another Menu
  190. Author
  191. Links
  192. Made with
  193. About the code
  194. Pure CSS Menu
  195. Author
  196. Links
  197. Made with
  198. About the code
  199. CSS Menu Feat. Emoji
  200. Author
  201. Links
  202. Made with
  203. About the code
  204. The Menu
  205. Author
  206. Links
  207. Made with
  208. About the code
  209. Menu Effect
  210. Author
  211. Links
  212. Made with
  213. About the code
  214. CSS-Only Nested Dropdown Navigation
  215. Full Page Off-Canvas Navigation
  216. Simple Radial Menu
  217. Accordion Menu
  218. Mobile Filter Menu
  219. Author
Читайте также:  Стили

CSS меню

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

Читайте также:  Private method in interface java

Горизонтальное меню

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

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar < margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; >#navbar a < color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; >#navbar a:hover

Выпадающее меню

Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

#navbar ul < display: none; >#navbar li:hover ul

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul < display: none; background-color: #f90; position: absolute; top: 100%; >#navbar li:hover ul < display: block; >#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar < height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; >#navbar li < float: left; position: relative; height: 100%; >#navbar li a < display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; >#navbar ul li < float: none; >#navbar li:hover < background-color: #f90; >#navbar ul li:hover

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

102 CSS Menu

Collection of free HTML and CSS navigation menu code examples. Update of May 2020 collection. 27 new items.

Table of Contents

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fullscreen Overlay Navigation Bar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Transitioning clip-path and pseudo-element transform s to create smooth link hovers.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fullscreen Overlay Navigation Bar

Fullscreen overlay navigation bar with html & css neon effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Context Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Neumorphism Context Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple Navigation System

Simple system for navigating a hierarchy in a confined space. Uses standard HTML and CSS, no JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fullscreen Menu Enter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Context Menu with Feather Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Hamburger Menu

Pure CSS menu interaction. Made using the HTML tags details and summary .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Text Fill on Hover

Filling the text with a different color on hover — a creative text effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

List Item Hower Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS-Only Marquee Effect

A simple CSS-only marquee effect for a menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Full-Page Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Randomly Generated CSS Blobby Nav

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter , and SVG filter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Full-Page Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Full Page Nav

Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari

Author

Made with

About a code

Fold Out Mobile Menu

CSS only fold out mobile menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Menu Hover Fill Text

Menu hover fill text ( color + background-clip ).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css

Author

Made with

About a code

CSS Navigation Bar

Implemented a minimal navigation bar that changes color on hovering. Written using only HTML and SCSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Apple TV Menu Interface

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

CSS Strange Nav

Made a strange navigation. CSS only. Let’s Click!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Off Canvas Menu Pure CSS

Off canvas menu pure CSS by using only CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Vertical Dark Menu with CSS

Simple vertical dark menu with CSS and icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Moving Underline Nav Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Author

Made with

About the code

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

3D Navbar

3D navbar in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Just Another Menu

Pure CSS floating menu animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Menu

Pure CSS menu drawer with off-click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Menu Feat. Emoji

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

The Menu

Table contents style menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: CSS-Only Nested Dropdown Navigation (ARIA)

Author

Made with

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

Demo Image: Full Page Off-Canvas Navigation

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.
Made by Caleb Varoga
June 17, 2016

Demo Image: Simple Radial Menu

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016

Demo Image: Simple accordion menu with HTML, CSS and JavaScript

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016

Demo Image: Mobile Filter Menu

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016

Author

Источник

Оцените статью
© 2024 Программирование