Эффекты на основе Java Script

Home

Contact

Portfolio

Music

Video

History

Calendar

Links

RSS

RSS2

Красивое меню с увеличением при наведении курсора на ссылку-картинку

<Вернуться в каталог>

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

Все стили, параметры и местоположение меню задаются в CSS таблице. Если Вам надо что-то изменить, Вам необходимо с помощью функции [Скачать с сервера] скачать её и сделать необходимые изменения.

Внутри тега <BODY> - </BODY> в любом месте.

<div style="position: absolute; bottom: 15px; left: 300px;">
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/989/images/rss2.png" alt="rss" /></a> 
  </div>
</div></div>
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock2').Fisheye(
				{
					maxWidth: 60,                       // увеличение при наведении
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,                      // начальная ширина по горизонтале
					proximity: 80,                      // расширение по горизонтале
					alignment : 'left',
					valign: 'bottom',
					halign : 'left'
				}
			)
		}
	);

</script>

Структура меню понятна и проста, здесь нечего пояснять. Основные параметры скрипта подписаны. Впринцепе в 99% случаев использования этого меню необходимо задать только адреса ссылок и подсказки к ним, а так-же местоположение меню. Всё остальное Вам скорее всего корректировать смысла нет. Но дерзайте.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.