Таб меню jQuery | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Меню для сайта uCoz » Таб меню jQuery | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Таб меню jQuery | Скрипт для сайта


Устанавливаем Таб меню на странице




Таб меню можно использовать в материале как дополнительное.Меню заполнит 100% ширины используемого поля.Основные настройки для работы на сайте системы uCoz сделаны.Вам останется скопировать код,изменить ссылки и их названия на свои.В материале меню будет работать,поместите весь код предварительно изменённый,без разрывов строк ( Почитайте об особенности редактора материала ).Можно добавить пунктов до требуемого количества.Дополнительно,в коде указан комментарий в месте регулировки ширины блока с заголовком,если название длинное прийдётся увеличить размер ширины до оптимального результата.Для изменения размера шрифта так же указан комментарий в коде,если Вам потребуется увеличить шрифт,найдите комментарий в коде и увеличьте значение до нужного.Для проверки кода меню в редакторе Вам потребуется дополнительная установка в него скрипта с библиотекой jQuery,т.к редактор не обладает вшитой библиотекой в отличии от сайта системы uCoz.




Код меню для установки в материал

<style>
#example-one {
background: #eee;
padding: 10px;
margin: 0 0 20px 0;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
}
#example-one .nav {
overflow: hidden;
margin: 0 0 10px 0;
}
#example-one .nav li {
width: 127px;/* - Ширина блока с заголовком - */
float: left;
margin: 0 10px 0 0;
}
#example-one .nav li.last {
margin-right: 0;
}
#example-one .nav li a {
display: block;
padding: 5px;
background: #959290;
color: white;
font-size: 11px;/* - Размер шрифта заголовка - */
 text-align: center;
border: 0;
}
#example-one .nav li a:hover {
background-color: #111;
}
#example-one ul {
list-style: none;
}
#example-one ul li a {
display: block;
border-bottom: 1px solid #666;
padding: 4px; color: #666;
}
#example-one ul li a:hover {
background: #fe4902;
color: white;
}
#example-one ul li:last-child a {
border: none;
}
#example-one ul li.nav-one a.current, #example-one ul#featured li a:hover {
background-color: #0575f4;
color: white;
}
#example-one ul li.nav-two a.current, #example-one ul#core li a:hover {
background-color: #d30000;
color: white;
}
#example-one ul li.nav-three a.current, #example-one ul#jquerytuts li a:hover {
background-color: #8d01b0;
color: white;
}
#example-one ul li.nav-four a.current, #example-one ul#classics li a:hover {
background-color: #FE4902;
color: white;
}
</style>
<script src="http://delaisait.ucoz.ru/script/js/1/organictabs.jquery.js">
</script>
<script>
$(function() {
$("#example-one").organicTabs();
});
</script>
<div id="example-one">
<ul class="nav">
<li class="nav-one">
<a href="#featured" class="current">Скрипты для uCoz</a></li>
<li class="nav-two"><a href="#core">Свойства CSS3</a></li>
<li class="nav-three"><a href="#jquerytuts">Теги HTML5</a></li>
<li class="nav-four last"><a href="#classics">Фоны для сайта</a></li>
</ul>
<div class="list-wrap">
<ul id="featured">
<li><a href="http://delaisait.ucoz.ru/blog/audiopleer_dlja_sajta_ucoz/1-0-4">Аудиоплеер для сайта uCoz</a></li>
<li><a href="http://delaisait.ucoz.ru/blog/videopleer_dlja_sajta_ucoz/1-0-10">Видеоплеер для сайта uCoz</a></li>
<li><a href="http://delaisait.ucoz.ru/blog/krugloe_menju_dlja_sajta_ucoz/1-0-22">Круглое меню для сайта uCoz</a></li>
<li><a href="http://delaisait.ucoz.ru/blog/vertikalnoe_menju_dlja_sajta_ucoz/1-0-5">Вертикальное меню для сайта uCoz</a></li>
<li><a href="http://delaisait.ucoz.ru/blog/gorizontalnoe_menju_dlja_sajta_ucoz/1-0-2">Горизонтальное меню для сайта uCoz</a></li>
<li><a href="http://delaisait.ucoz.ru/blog/vid_materialov_audio_dlja_ucoz/1-0-18">Вид материалов Аудио для uCoz</a></li>
<li><a href="http://delaisait.ucoz.ru/blog/vid_materialov_video_dlja_ucoz/1-0-20">Вид материалов Видео для uCoz</a></li>
</ul>
<ul id="core" class="hide">
<li><a href="http://delaisait.ucoz.ru/publ/2d_3d_transformacija/49">2D & 3D Трансформация</a></li>
<li><a href="http://delaisait.ucoz.ru/publ/svojstva_kontenta/40">Свойства контента</a></li>
<li><a href="http://delaisait.ucoz.ru/publ/svojstva_animacii/48">Свойства анимации</a></li>
<li><a href="http://delaisait.ucoz.ru/publ/svojstva_granic/47">Свойства границ</a></li>
<li><a href="http://delaisait.ucoz.ru/publ/svojstva_razmera/43">Свойства размера</a></li>
<li><a href="http://delaisait.ucoz.ru/publ/svojstva_interfejsa/52">Свойства интерфейса</a></li>
<li><a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/">Полезные статьи</a></li>
</ul>
<ul id="jquerytuts" class="hide">
<li><a href="http://delaisait.ucoz.ru/board/obekty/1">Объекты</a></li>
<li><a href="http://delaisait.ucoz.ru/board/blochnye_ehlementy/2">Блочные элементы</a></li>
<li><a href="http://delaisait.ucoz.ru/board/tablicy/3">Таблицы</a></li>
<li><a href="http://delaisait.ucoz.ru/board/strochnye_ehlementy/4">Строчные элементы</a></li>
<li><a href="http://delaisait.ucoz.ru/board/simvoly/5">Символы</a></li>
<li><a href="http://delaisait.ucoz.ru/board/formatirovanie/6">Форматирование</a></li>
<li><a href="http://delaisait.ucoz.ru/board/izobrazhenija/8">Изображения</a></li>
</ul>
<ul id="classics" class="hide">
<li><a href="http://delaisait.ucoz.ru/photo/abstraktnyj_fon_dlja_sajta/1">Абстрактный фон для сайта</a></li>
<li><a href="http://delaisait.ucoz.ru/photo/avtomobili_fon_dlja_sajta/5">Автомобили фон для сайта</a></li>
<li><a href="http://delaisait.ucoz.ru/photo/blestjashhij_fon_dlja_sajta/3">Блестящий фон для сайта</a></li>
<li><a href="http://delaisait.ucoz.ru/photo/cvetnoj_fon_dlja_sajta/2">Цветной фон для сайта</a></li><li><a href="http://delaisait.ucoz.ru/photo/fehntezi_fon_dlja_sajta/7">Фэнтези фон для сайта</a></li>
<li><a href="http://delaisait.ucoz.ru/photo/teksturnyj_fon_dlja_sajta/8">Текстурный фон для сайта</a></li>
</ul>
</div>
</div>


Библиотека jQuery для проверки кода в редакторе

Этот скрипт нужен только для проверки кода в редакторе HTML.Если у Вас сайт в системе uCoz не устанавливайте этот код,у Вас есть своя вшитая библиотека.Для сайтов без библиотеки jQuery понадобится установка скрипта с библиотекой.Версия библиотеки не играет роли.



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js">
</script>


Демонстрация меню в работе

Проверить код меню в работе

Вставьте код меню в HTML редактор и проверьте.Не забудьте дополнительно установить в редактор скрипт библиотеки jQuery.Имейте в виду что меню заполнит 100% ширины страницы!!!









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1938 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: меню с вкладками

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]