Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2012 » Декабрь » 20 » Создаем красивое меню навигации с помощью CSS и jQuery
09:52
Создаем красивое меню навигации с помощью CSS и jQuery
Здравствуйте уважаемые читатели!Обычными навигационными менюшками сейчас уже никого не удивишь, народ жаждет не только красоты исполнения, но и увеличения функциональности навигации по сайту. Выпадающее подменю стало нормой и теперь больше работают над формой и техникой исполнения.
Сегодня я покажу Вам, как сделать красивое меню с выпадающим подменю.
Идея не новая, но сам метод создания привлекает внимание. Забугорный наш товарищ Soh Tanaka нашел не стандартное решение вывода подменю, не как обычно, прямо под элементами меню, а выравнял элементы по левому краю с отображением непосредственно под навигацией.


В большинстве случаев мы можем достичь этого эффекта исключительно с CSS, но так как зловредный и непотопляемый браузер IE с тупым упорством вставляет нам палки в колеса, для полной кроссбраузерности мы будем использовать немного jQuery.
Немного поколдовав , выкладываю адаптированную, то есть более понятную нашему брату версию урока. И так, работать мы будем непосредственно с нашими стилями CSS, кодом HTML страницы и разбавим все jQuery.
HTML
Подменю каждого элемента следует разместить вместе, между тегами <span></span>.
Code
<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 не понимает li:hover, нам придется прибегнуть к помощи jQuery.
Code
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  $("ul#topnav li").hover(function() { //Hover over event on list item
  $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
  $(this).find("span").show(); //Show the subnav
  } , function() { //on hover out...

  $(this).css({ 'background' : 'none'}); //Ditch the background
  $(this).find("span").hide(); //Hide the subnav
  });
});
  </script> 
Как расписывал в начале своего повествования, в данном случае все подменю не будут появляться прямо под элементами блока навигации. Все подменю будут одинаково отображаться по левому краю.
Code
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative; /*--Установить относительное позиционирование на неупорядоченный список - не на элемент списка--*/
font-size: 1.2em;
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: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*--Обратите внимание на цвет при наведении на элемент списка, а не по ссылке. Может оставаться подчеркнутой, даже когда курсор находится над подменю--*/ 
Для того чтобы подменю отображалось непосредственно сразу под навигацией, устанавливаем абсолютное позиционирование ( position: absolute; ) на тег 35px сверху (top). В довершение оформления, добавляем закругленные углы низу нашего подменю. К сожалению в IE и Opera данная функция не работает и углы останутся прямыми.
Code
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none; /*--Показывать по умолчанию--*/
width: 970px;
background: #1376c9;
color: #fff;
/*--Внизу справа округление угла--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Внизу слева округление угла--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Показать подменю при наведении--*/
ul#topnav li span a { display: inline; } /*--Возвращаем в исходное состояние--*/
ul#topnav li span a:hover {text-decoration: underline;} 
Заключение:
В общем и целом, если не лезть в дебри, то красивое и функциональное меню с выпадающем подменю, полностью готово к работе.
Демо-версию всегда можете посмотреть Здесь
Категория: jQuery | Просмотров: 1548 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика