Вставляем следующий код между тегами . Не забываем про правильный путь к фреймворку. Code
Code
<script src="mootools.v1.11.js" type="text/javascript"></script>
<script src="sliding-tabs.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent('load', function () {
myTabs = new SlidingTabs('buttons', 'panes');
// this sets up the previous/next buttons, if you want them
$('previous').addEvent('click', myTabs.previous.bind(myTabs));
$('next').addEvent('click', myTabs.next.bind(myTabs));
// this sets it up to work even if it's width isn't a set amount of pixels
window.addEvent('resize', myTabs.recalcWidths.bind(myTabs));
});
</script>
CSS Далее идут стили оформления. Стили можно вставить как в сам документ, так и вынести в отдельный файл.
Code
Code
<style type="text/css" media="screen">
body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
html { font-size: 13px; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }
#heading {
display: block;
text-align: center;
margin-bottom: 1em;
}
#heading * {
display: inline;
padding: 4px;
user-select: none;
cursor: pointer;
vertical-align: middle;
}
#heading li.active {
background-color: #66ccff;
border-radius: 3px;
-webkit-border-radius: 3px;
-opera-border-radius: 3px;
-moz-border-radius: 3px;
}
#wrapper { border: 1px dotted gray; margin: 1em; padding: 1em; }
#panes {
text-align: justify;
border-style: none;
/*width: 245px;*/
margin: 0 1em 0 1em;
}
#panes p {
width: 600px;
margin: 0 auto 1em auto;
line-height: 1.2em;
}
#panes div div { overflow: hidden; }
#previous { float: none; cursor: pointer; }
#next { float: none; cursor: pointer; }
</style>
HTML
Вот так Вам необходимо оформить Вашу страничку (вначале идет список с названиями страничек (вкладок), а далее их содержимое). Обратите внимание на вложенные слои и не путайте их очередность.
Code
Code
<div id="wrapper">
<div id="heading">
<img src="images/leftAlt3.png" alt="" id="previous" />
<ul id="buttons">
<li>Ruseller.com</li>
<li>Evgeniypopov.com</li>
<li>Photoshop-master.ru</li>
<li>Ruseller-board.com</li>
<li>Evgeniypopov.ru</li>
</ul>
<img src="images/rightAlt3.png" alt="" id="next" />
</div>
<div id="panes">
<div id="content">
<div class="pane">
Как создать сайт? Этот вопрос волнует сегодня миллионы умов по всему миру. Многие хотят создать сайт и зарабатывать на нём разными способами! Но вот как эти сайты создаются, знают пока немногие. Если Вы попали на мой ресурс не случайно, а в поисках информации по созданию сайтов, то уверен, Вы найдете здесь много интересной и полезной информации. </p>
</div>
<div class="pane" id="bike">
Добро пожаловать на блог! Здесь в основном выкладываются вещи, которым не нашлось места в журнале или на форуме. Обычно это отчеты о различных встречах, семинарах и поездках.</p>
</div>
<div class="pane">
Photoshop мастера приветствуют еще одного фаната программы Adobe Photoshop! Не важно новичок вы или профессионал, ГЛАВНОЕ, у нас с вами общие интересы! Если вы давно с удовольствием работаете в Фотошопе или только стремитесь освоить эту уникальную программу, то сайт www.photoshop-master.ru создан именно для Вас. Что такое Photoshop? Photoshop – это удивительная многоцелевая программа, лидер в индустрии графики и дизайна. Photoshop - это безграничные возможности, сотни инструментов, тысячи функций, миллионы эффектов. Вот почему даже самые продвинутые гуру не знают все о Photoshop. На первый взгляд, кажется, что Фотошоп не одолеть? Выбросите эту мысль из головы – на то Вы и пришли в Интернет, чтобы учиться на уроках, которые в огромном количестве представлены на нашем сайте. Поверьте, Photoshop скоро станет для Вас настоящим другом и незаменимым помощником. </p>
</div>
<div class="pane" id="rhyme2">
Форум для клиентов</p>
</div>
<div class="pane" id="rhyme3">
Служба поддержки клиентов</p>
</div>
</div>
</div>
</div>
В HTML коде также есть пути к картинкам, которые отвечают за прокрутку вкладок. Помните про путь к ним для верного отображения.
Вот и все! Красивый слайдер готов! Всем счастья, успехов и крепкого здоровья!
Всегда рад Вашим комментариям!