12.01.13 
5804 
Красивое меню у левого края страницы. Изначально видны только иконки, при наведении выскакивает название раздела и таким же образом скрывается.
Пример использования:
Между <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> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </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']}); //Массив картинок
Нет комментариев к этой статье.