Відмінне горизонтальне меню з CSS і jQuery

51

Звичайними навігаційними менюшками зараз вже нікого не здивуєш, народ прагне не тільки краси виконання, але і збільшення функціональності навігації по сайту. Випадаюче підменю стало нормою і тепер більше працюють над формою і технікою виконання.
Сьогодні я покажу Вам, як зробити гарне меню з випадним підменю. Ідея не нова, але сам метод створення привертає увагу. Закордонний наш товариш Soh Tanaka знайшов не стандартне рішення виводу підменю, не як зазвичай, прямо під елементами меню, а вирівняв елементи по лівому краю, з відображенням безпосередньо під панеллю навігації.

Горизонтальное меню с подменю с помощью CSS

У більшості випадків ми можемо досягти цього ефекту виключно з допомогою CSS3, але так як шкідливий і непотоплюваний браузер IE, з тупим завзятістю вставляє нам палиці в колеса, для повної кросбраузерності ми будемо використовувати трохи магії jQuery.

Дивитися Демо

Трохи повороживши, викладаю адаптовану, тобто більш зрозумілу нашому братові версію уроку. І так, працювати ми будемо безпосередньо з нашими стилями CSS, HTML-кодом сторінки і приправимо все це jQuery.

HTML

Підменю кожного основного пункту меню слід розмістити разом, між тегами .

<ul id="topnav">
<li><a href="#">Посилання</a></li>
<li><a href="#">Посилання</a>

<span>
<a href="#">Підменю Посилання</a> |
<a href="#">Підменю Посилання</a> |
<a href="#">Підменю Посилання</a>
</span>
</li>
<li><a href="#">Посилання</a></li>
</ul>
  • Посилання
  • Посилання

    Підменю Посилання |
    Підменю Посилання |
    Підменю Посилання
  • Посилання

Відразу ж, не відходячи далеко від каси, оскільки IE6 не розуміє псевдоклас :hover, підключаємо бібліотеку jQuery і виконуваний плагін в районі закриваючого тега :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
$("ul#topnav li").hover(function() { //При наведенні на елемент списку меню
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Додати колір фону + зображення на елемент списку
$(this).find("span").show(); //Показати підменю
} , function() { //при виході з елемента списку...
$(this).css({ 'background' : 'none'}); //Прибрати зміни фону
$(this).find("span").hide(); //Приховати підменю
});
});

$(document).ready(function() {
$(“ul#topnav li”).hover(function() { //При наведенні на елемент списку меню
$(this).css({ ‘background’ : ‘#1376c9 url(topnav_active.gif) repeat-x’}); //Додати колір фону + зображення на елемент списку
$(this).find(“span”).show(); //Показати підменю
} , function() { //при виході з елемента списку…
$(this).css({ ‘background’ : ‘none’}); //Прибрати зміни фону
$(this).find(“span”).hide(); //Приховати підменю
});
});

Варто зазначити, що всі сучасні браузери відмінно справляються з відпрацюванням даного меню та без підключення додаткових js-бібліотек, так що кого не особливо парить заклопотаність з приводу замшелого IE6, можете сміливо виключити jQuery з роботи, і користуватися виключно засобами CSS3.

CSS

css стиль меню

Як згадував на початку свого оповідання, в даному випадку всі підменю не будуть з’являтися прямо під елементами блоку навігації, всі підменю будуть однаково відображатися і вирівняно за лівим краєм.

ul#topnav {
margin: 0;
padding: 0;
float: left;
max-width: 960px;
width: 100%;
list-style: none;
position: relative;
font: normal 14px Helvetica, Arial, sans-serif;
background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color:#919179;
text-decoration: none;
}
ul#topnav li:hover {
background: #1376c9 url(topnav_active.gif) repeat-x;
}
ul#topnav li a:hover{
color:#b2b288;
}

ul#topnav {
margin: 0;
padding: 0;
float: left;
max-width: 960px;
width: 100%;
list-style: none;
position: relative;
font: normal 14px Helvetica, Arial, sans-serif;
background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color:#919179;
text-decoration: none;
}
ul#topnav li:hover {
background: #1376c9 url(topnav_active.gif) repeat-x;
}
ul#topnav li a:hover{
color:#b2b288;
}

Для того щоб підменю відображалося безпосередньо відразу під навігацією, встановлюємо абсолютне позиціонування ( position: absolute; ) тег 35px зверху (top). В довершення оформлення, додаємо закруглені кути нижньої частини нашого підменю. На жаль в старих версіях IE дане властивість не працює і кути залишаться прямими.

ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:34px;
display: none;/* За замовчуванням приховано */
max-width: 960px;
width: 100%;
background: #1376c9;
color: #a09f9f;
/*--Внизу праворуч скруглення кута--*/
border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Внизу зліва скруглення кута--*/
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
display: block;
}
ul#topnav li span a {
color:#b1b178;
display: inline;
}
ul#topnav li span a:hover {
color:#c7c7ab;
text-decoration: none;
}

ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:34px;
display: none;/* За замовчуванням приховано */
max-width: 960px;
width: 100%;
background: #1376c9;
color: #a09f9f;
/*–Внизу праворуч скруглення кута–*/
border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
/*–Внизу зліва скруглення кута–*/
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
display: block;
}
ul#topnav li span a {
color:#b1b178;
display: inline;
}
ul#topnav li span a:hover {
color:#c7c7ab;
text-decoration: none;
}

Висновок

У загальному і цілому, якщо не лізти в нетрі, красиве і функціональне випадаючому меню з підменю, повністю готове до роботи. Ще раз подивіться живий приклад роботи меню і якщо воно вам треба, сміливо скачивайте исходники з мого Яндекс.Диска, і ще сміливіше творіть, творіть, творіть…

ДемоСкачать

Просто і зі смаком. Сподіваюся, дане меню стане в нагоді Вам при розробці чергового проекту!

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: