HTML:
Code <div class="container"> <div class="TabMenu"> <span> <img src="images/contact.png" /> </span> <span> <img src="images/ipod.png" /> </span> <span> <img src="images/drive.png" /> </span> </div> <div class="ContentFrame"> <div class="AllTabs"> <div class="TabContent"> <p> Здесь будет текст содержимого Вашей первой вкладки </p> </div> <div class="TabContent"> <p> Здесь будет текст содержимого Вашей второй вкладки </p> </div> <div class="TabContent"> <p> Здесь будет текст содержимого Вашей третьей вкладки </p> </div> </div> </div> </div> Теперь те стили, которые мы привязывали к элементам панели, мы пропишем между тегами <head> и </head> Ниже я разместил примерный код стилей, который будет применяться в стилизации этого слайда: CSS:
Code <style type="text/css"> body { margin:0; padding:0; } .container { background: url(images/slideTabbg.png); width:388px; height:300px; overflow:hidden; margin:auto; } .selector { background: url(images/selector.png); } .hovering { background: url(images/selector.png); opacity: 0.5; } .container .TabMenu { position: relative; top: 5px; left: 2px; z-index: 10; } .container .TabMenu span { display: inline-block; height: 77px; margin: 0px; padding:0px; } .container .ContentFrame { width: 360px; height:206px; left: 10px; position: relative; overflow:hidden; } .container .ContentFrame .AllTabs { position: relative; left:0px; width: 1190px; height: 206px; overflow:hidden; } .container .ContentFrame .AllTabs .TabContent { width:360px; height: 200px; margin-right:20px; text-align: justify; float:left; overflow:hidden; } </style> Теперь главное не забыть привязать основной фреймворк jQuery, поскольку, если мы вставим его позже, наш слайд будет некорректно отображаться. Вставьте его, пожалуйста, также, между тегами <head> и </head> Выглядеть привязка фреймворка будет следующим образом. :
Code <script type="text/javascript" src="js/jquery.js"></script> Наконец, завершающий и важнейший для работы меню этап. Для правильного отображения мы должны между тегами <head> и </head> прописать следующий небольшой javascript-код: JavaScript:
Code <script type="text/javascript"> $(document).ready(function(){ //Инициализация //Устанавливаем селектор для первой вкладки $(".container .TabMenu span:first").addClass("selector"); //Базовое действие при наведении мышью $(".container .TabMenu span").mouseover(function(){ $(this).addClass("hovering"); }); $(".container .TabMenu span").mouseout(function(){ $(this).removeClass("hovering"); }); //Действие при нажатии на вкладку панели $(".container .TabMenu span").click(function(){ //Удаление существующего селектора $(".selector").removeClass("selector"); //Добавление стилей селектора $(this).addClass("selector"); //Установка ширины панели var TabWidth = $(".TabContent:first").width(); if(parseInt($(".TabContent:first").css("margin-left")) > 0) TabWidth += parseInt($(".TabContent:first").css("margin-left")); if(parseInt($(".TabContent:first").css("margin-right")) >0) TabWidth += parseInt($(".TabContent:first").css("margin-right")); //Устанавливаем границы скольжения содержимого вкладки var newLeft = -1* $("span").index(this) * TabWidth; //Теперь анимируем наше содержимое вкладки $(".AllTabs").animate({ left: + newLeft + "px" },1000); }); }); </script> Смотрим ПРИМЕР
Кому понравилось ставим +!
| 
