06
сен
2012
jSlickmenu - jQuery плагин создающий необычное меню с возможностями CSS3, такими, как вращение и тени. И опять же использование CSS3 ограничивает использование этого плагина в старых браузерах. Меню отобразится, но эффектов вы не увидите.
Разметка HTML
В контейнере #menu помещается список, элементы которого и будут пунктами меню:
Атрибут ALT изображения будет использоваться в качестве всплывающего заголовка при наведении мыши на изображение.
CSS
Стили самого меню:
javascript
Подключаем jQuery и плагин
И инициализируем наш плагин:
Опции
speed - скорость анимации при наведении
fadeopacity - непрозрачность при наведении
infomargin - Integer. Margin (в px) - отступы для заголовка появляющегося над изображением.
leftmargin - Integer. Margin (в px) отступы для отделения пунктов меню друг от друга.
css3rotate - Boolean. Поворачивать ли пункты меню используя CSS3
css3shadow - String. Свойство CSS3 box-shadow.
css3borderradius - Integer. Размер радиуса границы.
borderneutral - Integer. Ширина границы в px, при отсутствии наведения.
borderhover - Integer. Ширина границы в px, при наведении.
Вот пример инициализации из Демо 2:
jSlickmenu - CSS3 меню
jSlickmenu - jQuery плагин создающий необычное меню с возможностями CSS3, такими, как вращение и тени. И опять же использование CSS3 ограничивает использование этого плагина в старых браузерах. Меню отобразится, но эффектов вы не увидите.
Разметка HTML
В контейнере #menu помещается список, элементы которого и будут пунктами меню:
<div id="menu">
<ul>
<li>
<a href="[ССЫЛКА]">
<img src="[ПУТЬ ДО ИЗОБРАЖЕНИЯ]" alt="[ЗАГОЛОВОК]" />
</a>
</li>
<!-- другие пункты меню -->
</ul>
</div>
<ul>
<li>
<a href="[ССЫЛКА]">
<img src="[ПУТЬ ДО ИЗОБРАЖЕНИЯ]" alt="[ЗАГОЛОВОК]" />
</a>
</li>
<!-- другие пункты меню -->
</ul>
</div>
Атрибут ALT изображения будет использоваться в качестве всплывающего заголовка при наведении мыши на изображение.
CSS
Стили самого меню:
#slickmenu { margin-top:50px; height:150px;}
#slickmenu ul { list-style:none; }
#slickmenu ul li { display:block; position:absolute; }
#slickmenu ul li a { text-decoration:none; }
#slickmenu ul li a img { border: 3px solid #EEE; }
.infobox { display:none; background-color:#111111; position:absolute; text-decoration: none !important;
background-color:#eeeeee; padding:3px; width:163px; font-size:12px; border-style:none; border:1px solid #eee; }
.infobox-arrow { display:none; width:40px; height:10px; margin-left:65px; position:absolute;
background-image:url('../images/arrow.png'); background-position:center; background-repeat:no-repeat; }
#slickmenu ul { list-style:none; }
#slickmenu ul li { display:block; position:absolute; }
#slickmenu ul li a { text-decoration:none; }
#slickmenu ul li a img { border: 3px solid #EEE; }
.infobox { display:none; background-color:#111111; position:absolute; text-decoration: none !important;
background-color:#eeeeee; padding:3px; width:163px; font-size:12px; border-style:none; border:1px solid #eee; }
.infobox-arrow { display:none; width:40px; height:10px; margin-left:65px; position:absolute;
background-image:url('../images/arrow.png'); background-position:center; background-repeat:no-repeat; }
javascript
Подключаем jQuery и плагин
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
И инициализируем наш плагин:
$(document).ready(function()
{
$("#menu").jSlickmenu();
});
{
$("#menu").jSlickmenu();
});
Опции
speed - скорость анимации при наведении
fadeopacity - непрозрачность при наведении
infomargin - Integer. Margin (в px) - отступы для заголовка появляющегося над изображением.
leftmargin - Integer. Margin (в px) отступы для отделения пунктов меню друг от друга.
css3rotate - Boolean. Поворачивать ли пункты меню используя CSS3
css3shadow - String. Свойство CSS3 box-shadow.
css3borderradius - Integer. Размер радиуса границы.
borderneutral - Integer. Ширина границы в px, при отсутствии наведения.
borderhover - Integer. Ширина границы в px, при наведении.
Вот пример инициализации из Демо 2:
$("#menu").jSlickmenu({
speed : 100,
fadeopacity : 0.1,
infomargin : 15,
leftmargin : 150,
css3rotate : false,
css3shadow : '#999 5px 10px 10px',
css3borderradius : 3,
borderneutral : 5,
borderhover : 20
});
speed : 100,
fadeopacity : 0.1,
infomargin : 15,
leftmargin : 150,
css3rotate : false,
css3shadow : '#999 5px 10px 10px',
css3borderradius : 3,
borderneutral : 5,
borderhover : 20
});
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): JoesphJoift
В новости: Akeeba Admin Tools Pro v7.5.2 - безопасность и администрирование сайтов на Jooml ...Hi there, neighboring Californians! Just desired to place a quick note to let you know that my drywall repair venture is properly up and functional. Based precisely here in radiant California, I'm here to support homeowners throughout the coast with all their drywall demands. Whether you're handling with cracks, holes, or water damage, my team and I have the skills and proficiency to get your walls seeming good as new. So if you're in need of some repairs, don't pause to give us a call! Let's work together to keep those California homes in top-notch shape. -
Написал(а): dafaher
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для JoomlaДобрый день, в первую очередь спасибо, что поделились такими ценными расширениями. Я просто хотел сообщить вам, что ссылка не работает, спасибо большое. -
Написал(а): arbuku2
В новости: DJ-Catalog2 v4.1.2 - каталог товаров для Joomladj-catalog2 v5 Когда он будет опубликован? When will it be published? -
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"?