Розмите меню на CSS3
7, Чер, 2013
HTML/CSS/JS
Розмите CSS3 меню із адаптивною версткою, яке буде цікаво виглядати на сучасному дизайні сайта.
Ви з легкістю зможете замінити кольорову гамму на свою, за допомогою CSS коду. Давай те ж поглянемо на саме меню.
HTML
1 2 3 4 5 6 |
<nav> <a href='#'>Головна</a> <a href='#'>Портфоліо</a> <a href='#'>Відклики</a> <a href='#'>Контакти</a> </nav> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } html, body { margin: 0; padding: 0; } nav { background: none repeat scroll 0 0 #202033; box-shadow: 0 3px 5px #555555; position: relative; text-align: center; } nav:hover a { color: transparent; text-shadow: 0 0 3px #CC5C00; } nav a { color: #CC5C00; display: inline-block; font-family: tahoma; font-size: 1.25em; height: 66px; line-height: 66px; text-decoration: none; transition: all 0.3s ease 0s; width: 150px; } nav a:hover { border-bottom: 5px solid #FF7300; color: #FF7300; text-shadow: none; } @media screen and (max-width: 620px) { nav a { width: 49%; } } @media screen and (max-width: 300px) { nav a { width: 100%; } } |
За допомогою @media screen, ми придаємо адаптивність нашому меню, воно підлаштовується в залежності від розміру вікна браузера, ви також можете прописати необхідні вам стилі.
1