Красиве горизонтальне меню за допомогою css - красиве меню на 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

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!