HTML: <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:
<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> Выглядеть привязка фреймворка будет
следующим образом. :
<script type="text/javascript" src="js/jquery.js"></script>
Наконец, завершающий и важнейший для работы меню этап. Для правильного
отображения мы должны между тегами <head> и </head>
прописать следующий небольшой javascript-код:
JavaScript:
<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>
Смотрим
ПРИМЕР
Меню сайта
Меню сайта
