Копаясь со скриптом сайтом dle обнаружил красивый и функциональный элемент дизайна для навигации - это Табы (Вкладки). Скрипт относится к intuitino-friendly. Поэтому его с легкостью можно установить, куда угодно у себя на сайте. Это можно сделать в 2 клика.
Работает на любой версии DLE.
Вставляем этот код в свой шаблон например: main.tpl в нужном месте :
<script type="text/javascript" src="engine/skins/tabs.js"></script><!-- В этом файле лежит функционал табов. Лучше задать абсолютный путь к нему --><div id="dle_tabView1"><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div><div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладки</div></div><script type="text/javascript">initTabs('dle_tabView1',Array('Новости','Блоги','Корпоратив','Аналитика'),0, '100%',0);<!-- В этой функции объявляютя заголовки табов, соблюдайте их правильный порядок --></script><style type="text/css"> .dle_tabPane{ height:26px; /* Height of tabs */ } .dle_aTab{ border:1px solid #CDCDCD; padding:5px; } .dle_tabPane DIV{ float:left; padding-left:3px; vertical-align:middle; background-repeat:no-repeat; background-position:bottom left; cursor:pointer; position:relative; bottom:-1px; margin-left:0px; margin-right:0px; } .dle_tabPane .tabActive{ background-image:url('engine/skins/images/tl_active.gif'); margin-left:0px; margin-right:0px; } .dle_tabPane .tabInactive{ background-image:url('engine/skins/images/tl_inactive.gif'); margin-left:0px; margin-right:0px; } .dle_tabPane .inactiveTabOver{ margin-left:0px; margin-right:0px; } .dle_tabPane span{ font-family:tahoma; vertical-align:top; font-size:11px; line-height:26px; float:left; } .dle_tabPane .tabActive span{ padding-bottom:0px; line-height:26px; } .dle_tabPane img{ float:left; }</style>Не забываем добавлять ссылки ,
<div class="dle_aTab" style="display:none;">Сюды вставляем ваш html код страницы вкладкиа также редактировать название блоков
initTabs('dle_tabView1',Array('Новости','Блоги','Корпорация','Аналитика'),0, '100%',0);<!-- В этой функции объявляют заголовки табов, соблюдайте их правильный порядок -->Ну вот и все. Правда, все просто?
Стили достаточно легко , можно изменить под свой проект. Табы можно сделать хоть сбоку, хоть снизу.
Этот способ навигации отлично работает и выглядит симпатично. Можете убедиться на примере моего Проекта
Успехов в разработке!
Хак для DLE любой версии скрипт Табы Вкладки
«Автор:»Кот Баюн
Демо версия сайта: aqula ru
Предлагаем скачать хак для DLE любой версии скрипт Табы Вкладки
