Адаптивне мега меню на CSS3
11, Гру, 2013
HTML/CSS/JS
Час не стоїть на місці, як і технології створення сайтів. Одною з проблем, при створенні адаптивного сайту, може стати меню, особливо мега меню. Все частіше люди заходять із мобільних пристроїв, в яких розширення екрана набагато менше ніж в монітора комп’ютера. А тому варто подбати про своїх відвідувачів і налаштувати адаптивне мега меню.
HTML
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 46 47 |
<div class="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#s1">Menu 1</a> <span id="s1"></span> <ul class="subs"> <li><a href="#">Header a</a> <ul> <li><a href="#">Submenu x</a></li> <li><a href="#">Submenu y</a></li> <li><a href="#">Submenu z</a></li> </ul> </li> <li><a href="#">Header b</a> <ul> <li><a href="#">Submenu x</a></li> <li><a href="#">Submenu y</a></li> <li><a href="#">Submenu z</a></li> </ul> </li> </ul> </li> <li class="active"><a href="#s2">Menu 2</a> <span id="s2"></span> <ul class="subs"> <li><a href="#">Header c</a> <ul> <li><a href="#">Submenu x</a></li> <li><a href="#">Submenu y</a></li> <li><a href="#">Submenu z</a></li> </ul> </li> <li><a href="#">Header d</a> <ul> <li><a href="#">Submenu x</a></li> <li><a href="#">Submenu y</a></li> <li><a href="#">Submenu z</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="http://wpfan.com.ua/">wpfan.com.ua</a></li> </ul> </div> |
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
/* common and top level styles */ #nav span { display: none; } #nav, #nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: #F5F5F5; border-bottom: 5px solid #333333; float: left; margin-left: 1%; margin-right: 1%; position: relative; width: 98%; } #nav ul.subs { background-color: #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #333333; display: none; left: 0; padding: 2%; position: absolute; top: 54px; width: 96%; } #nav > li { border-bottom: 5px solid transparent; float: left; margin-bottom: -5px; text-align: left; -moz-transition: all 300ms ease-in-out 0s; -ms-transition: all 300ms ease-in-out 0s; -o-transition: all 300ms ease-in-out 0s; -webkit-transition: all 300ms ease-in-out 0s; transition: all 300ms ease-in-out 0s; } #nav li a { display: block; text-decoration: none; -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; white-space: normal; } #nav > li > a { color: #333333; display: block; font-size: 1.3em; line-height: 49px; padding: 0 15px; text-transform: uppercase; } #nav > li:hover > a, #nav > a:hover { background-color: #F55856; color: #FFFFFF; } #nav li.active > a { background-color: #333333; color: #FFFFFF; } /* submenu */ #nav li:hover ul.subs { display: block; } #nav ul.subs > li { display: inline-block; float: none; padding: 10px 1%; vertical-align: top; width: 33%; } #nav ul.subs > li a { color: #777777; line-height: 20px; } #nav ul li a:hover { color: #F55856; } #nav ul.subs > li > a { font-size: 1.3em; margin-bottom: 10px; text-transform: uppercase; } #nav ul.subs > li li { float: none; padding-left: 8px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s; } #nav ul.subs > li li:hover { padding-left: 15px; } /* responsive rules */ @media all and (max-width : 980px) { #nav > li { float: none; border-bottom: 0; margin-bottom: 0; } #nav ul.subs { position: relative; top: 0; } #nav li:hover ul.subs { display: none; } #nav li #s1:target + ul.subs, #nav li #s2:target + ul.subs { display: block; } #nav ul.subs > li { display: block; width: auto; } } |
От власне і все, при розширенні екрана до 980 пікселів будуть підключені адаптивні стилі, які підлаштують мега меню до розміру екрану. Також, ви можете вільно редагувати CSS3 стилі і створювати власне меню, яке можна легко налаштувати під різні CMS (системи керування вмістом сайта).
1