Все для веб-дизайнера
Создаем вертикальную навигацию с вкладками
Основную часть сайта занимает навигация на сайте, чтобы пользователь мог с легкостью найти необходимую информацию. Но порой хочется вывести куда больше ценной информации на ресурсе не затрачивая при этом драгоценное пространство, ведь переборщить и нагрузить сайт лишним материалом означает потерять читаемость и общую планировку, а это негативно сказывается на имиджу сайта среди его постоянных читателей и не только. Данную навигацию можно встретить и у нас на сайте, пользователи зачастую спрашивают, как можно создать аналог.
В данном уроке мы рассмотрим как создать схожую навигацию с вкладками как у нас на сайте. Мы рассмотрим принцип работы, при этом стилизацию можно изменить на свое усмотрение, также заменив иконки. И так, приступим.
Шаг 1. HTML
Для начала мы рассмотрим разметку, TabMenu UL # это кнопки на верхней части вкладки. Внутри контейнера boxBody, необходимо указать 5 div‘ов, число div‘ов будет зависеть от того, сколько элементов вы указали в # tabMenu, в данном случае мы будем использовать 5. Таким образом, расположение BoxBody должно совпадать с расположением кнопки в tabMenu #.
|
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 |
<div class="box"> <ul id="tabMenu"> <li class="posts selected"></li> <li class="comments"></li> <li class="category"></li> <li class="famous"></li> <li class="random"></li> </ul> <div class="boxTop"></div> <div class="boxBody"> <div id="posts" class="show parent"> <ul> <li>Запись 1</li> <li>Запись 2</li> <li class="last">Запись 3</li> </ul> </div> <div id="comments" class="parent"> <ul> <li>Комментарий 1</li> <li>Комментарий 2</li> <li class="last">Комментарий 3</li> </ul> </div> <div id="category" class="parent"> <ul> <li>Категория 1</li> <li>Категория 2</li> <li class="last">Категория 3</li> </ul> </div> <div id="famous" class="parent"> <ul> <li>Популярная запись 1</li> <li>Популярная запись 2</li> <li class="last">Популярная запись 3</li> </ul> </div> <div id="random" class="parent"> <ul> <li>Случайная запись 1</li> <li>Случайная запись 2</li> <li class="last">Случайная запись 3</li> </ul> </div> </div> <div class="boxBottom"></div> </div> |
С разметкой мы закончили, теперь перейдем к стилям.
Шаг 2. CSS
В стилях ничего сложного нет, их всегда можно с легкостью редактировать под свое усмотрение, в данных стилях мы сделаем вывод иконок, также добавим некоторые хаки для ie, и заключим простые правила для демонстрации и организации.
|
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 |
<style> a { color:#ccc; text-decoration:none; } a:hover { color:#ccc; text-decoration:none } #tabMenu { margin:0; padding:0 0 0 15px; list-style:none; } #tabMenu li { float:left; height:32px; width:39px; cursor:pointer; cursor:hand } /* Иконки для кнопок */ li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;} li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;} li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;} li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;} li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;} li.mouseover {background-position:0 0;} li.mouseout {background-position:0 -32px;} li.selected {background-position:0 0;} .box { width:227px } .boxTop { background:url(images/boxTop.gif)no-repeat; height:11px; clear:both } .boxBody { background-color:#282828; } .boxBottom { background:url(images/boxBottom.gif) no-repeat; height:11px; } .boxBody div.parent { display:none; } .boxBody div.show { display:block; } .boxBody #category a { display:block } /* styling for the content*/ .boxBody div ul { margin:0 10px 0 25px; padding:0; width:190px; list-style-image:url(images/arrow.gif) } .boxBody div li { border-bottom:1px dotted #8e8e8e; padding:4px 0; cursor:hand; cursor:pointer } .boxBody div ul li.last { border-bottom:none } .boxBody div li span { font-size:8px; font-style:italic; color:#888; } /* IE Хаки */ *html .boxTop {margin-bottom:-2px;} *html .boxBody div ul {margin-left:10px;padding-left:15px;} </style> |
Со стилями все просто, не будем на них детальнее останавляваться, рассмотреть их более подробно можно в исходниках.
Шаг 3. JavaScript
Теперь самое интересное, нам необходимо оживить всю навигацию, придать скользящий эффект и эффект сворачивания панелей, при переходе на определенную вкладку. Более детально можно ознакомится с правилами jQuery в статье Jquery Animate Effect Tutorial.
|
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 |
<script type="text/javascript"> $(document).ready(function() { // Получить все от # tabMenu UL $('#tabMenu li').click(function(){ //Выполнить действия, когда они не выбраны по умолчанию if (!$(this).hasClass('selected')) { //Удалить выбранный класс из всех LI $('#tabMenu li').removeClass('selected'); //Назначить LI $(this).addClass('selected'); //Скрыть все DIV в .BoxBody $('.boxBody div.parent').slideUp('1500'); //Передвижение DIV в boxBody в соответствии с индексом навигации UL, такое расположение является очень важным. $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); } }).mouseover(function() { $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { //Добавление и удаление класса $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); //Mouseover с живой эффект для категории меню списка $('.boxBody #category li').mouseover(function() { //Изменение цвета фона и анимации при наведении курсора мыши $(this).css('backgroundColor','#888'); $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300}); }).mouseout(function() { $(this).css('backgroundColor',''); $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300}); }); //Mouseover эффект для сообщений, комментариев, и так далее $('.boxBody li').click(function(){ window.location = $(this).find("a").attr("href"); }).mouseover(function() { $(this).css('backgroundColor','#888'); }).mouseout(function() { $(this).css('backgroundColor',''); }); }); </script> |
Вот и все. Готово!
| Опубликовал Cooper 30.09.2012 в 13:17, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
