js Красивое вертикальное меню на JQuery 

Дата публикации  Дата изменения12.01.13  КомментарииНет   Просмотры1799

Красивое меню у левого края страницы. Изначально видны только иконки, при наведении выскакивает название раздела и таким же образом скрывается.

Пример использования:

Между <head</head>:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.sweet-menu-1.0.js"></script>

Между <body></body>:

      <ul id="exampleMenu">
            <li><a href="#home">Home</a></li>
            <li><a href="#home">Blog</a></li>
            <li><a href="#home">Portfolio</a></li>
            <li><a href="#home">Hire Me</a></li>
            <li><a href="#home">Contact</a></li>
            <li><a href="#home">My Apps</a></li>
        </ul>
 <h1>Sweet Menu Demo</h1><br>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

Настройки:

$('#exampleMenu').sweetMenu({position: 'fixed'}); //Фиксирование  позиции меню
$('#exampleMenu').sweetMenu({top: 80}); //Расстояние от верха страницы
$('#exampleMenu').sweetMenu({iconSizeWidth: 40}); //Ширина иконок
$('#exampleMenu').sweetMenu({iconSizeHeight: 20}); //Высота иконок
$('#exampleMenu').sweetMenu({padding: 8}); //Расстояние между текстом и границами пункта меню
$('#exampleMenu').sweetMenu({verticalSpacing: 5}); //Расстояние между пунктами меню:
$('#exampleMenu').sweetMenu({duration: 250}); //Скорость анимации меню
$('#exampleMenu').sweetMenu({icons: ['one.png', 'two.png', 'three.png']}); //Массив картинок

  Размер:  248,03kB | Изменен: 12.01.13 | Загрузок: 55
Бесплатные курсы

Категории

Теги: , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые