Красиве горизонтальне меню за допомогою css - красиве меню на css
З цього уроку Ви дізнаєтеся як дуже легко створити гарне меню для Вашого сайту з використанням каскадних таблиць стилів CSS ..
Відео: CSS меню - для новачка, вчимо швидко і просто
Меню, яке ми будемо робити в уроці, буде горизонтальним. Ви можете подивитися приклад, а також завантажити архів з меню:
Подивитися прімерСкачать
Красиве меню - HTML частина
Зараз розглянемо більш докладно як створити красиве меню на css. Для початку в HTML вставимо список, з яким в подальшому дамо властивості в CSS і він перетвориться в меню.
12345678 | lt;div id="Cssmenu"gt;lt;ulgt;lt;li class="Active"gt; lt;a href="Index.html"gt; lt;spangt; Homelt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;spangt; Productslt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;spangt; Aboutlt;/spangt; lt;/agt; lt;/ligt;lt;li class="Last"gt; lt;a href="#"gt; lt;spangt; Contactlt;/spangt; lt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt; |
Відео: Горизонтальне меню на css 3
Красиве меню - CSS частина
А зараз пропишемо необхідні властивості в CSS файл:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 | @import url (https://fonts.googleapis.com/css?family=Capriola) -/ * Перший рядок потрібна для того щоб завантажити необхідні шрифти, якщо їх немає на комп`ютері у клієнта * /#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a {padding: 0-margin: 0-line-height: 1-font-family: "Capriola `, sans-serif-}#cssmenu: before,#cssmenu: after,#cssmenu gt; ul: before,#cssmenu gt; ul: after {content: ``-display: table-}#cssmenu: after,#cssmenu gt; ul: after {clear: both-}#cssmenu {zoom: 1-height: 69px-background: url(images / bottom-bg.jpg) repeat-x center bottom-border-radius: 2px-width: auto-}#cssmenu ul {background: url(images / nav-bg.jpg) repeat-x 0px 4px-height: 69px-}#cssmenu ul li {float: left-list-style: none-}#cssmenu ul li a {display: block-height: 37px-padding: 22px 30px 0-margin: 4px 2px 0-border-radius: 2px 2px 0 0-text-decoration: none-font-size: 15px-color: white-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75)-font-weight: 400-opacity: .9-}#cssmenu ul li: First-child a {margin: 4px 2px 0 0-}#cssmenu ul li a: hover,#cssmenu ul li.active a {background: url(images / color.jpg) center bottom-display: block-height: 37px-margin-top: 0px-padding-top: 26px-color: # 004f7c-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55)-opacity: 1-} |
висновки
В результаті ми створили на CSS красиве оригінальне меню. Також меню є горизонтальним і я сподіваюся ви знайдете йому гідне застосування в своїх проектах.
Джерело уроку: https://cssmenumaker.com
Успіхів!
Поділися в соц мережах: