Ajax Russia : Аякс по-русски

Свежие новости из мира IT

CSS Dock Menu - меню как на маке

September 04th, 2007 | Category: CSS, Javascript, Дизайн | Автор: Александр

CSS Dock MenuВсе наверное видели док меню на маке. Подобное меню есть и для линукса. Идея в принципе простая - есть список иконок и при наведении на иконку мышкой, иконка увеличивается в размере. Просто, но красиво.

Эту красоту мы сегодня перенесём с десктопа в онлайн и сделаем док меню при помощи CSS и джаваскрипта. А поможет нам в этом CSS Dock Menu. Готовый комплект можно скачать по этому адресу. В комплекте имеется 2 джаваскрипт файла jQuery и Interface, 1 CSS файл, несколько иконок и htc файл, который чинит глюки интернет эксплорера для png картинок.

Приступим.

1) Подгружаем необходимые библиотеки:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/interface.js"></script>
  3. <link href="style.css" rel="stylesheet" type="text/css" />
  4.  
  5. <!--[if lt IE 7]>
  6.  <style type="text/css">
  7.  .dock img { behavior: url(iepngfix.htc) }
  8.  </style>
  9. <![endif]-->

2) Пишем HTML для дока и картинок. Картинки я нашёл в моём посте - 20 комплектов иконок - бесплатно! в комплекте от Yellow Icon.

PLAIN TEXT
HTML:
  1. <div class="dock" id="dock">
  2.   <div class="dock-container">
  3.       <a class="dock-item" href="#"><img src="computer.png" alt="My Computer" /><span>My Computer</span></a>
  4.       <a class="dock-item" href="#"><img src="dvd.png" alt="DVD" /><span>DVD</span></a>
  5.       <a class="dock-item" href="#"><img src="finder.png" alt="finder" /><span>Finder</span></a>
  6.       <a class="dock-item" href="#"><img src="ipod.png" alt="iPod" /><span>iPod</span></a>
  7.       <a class="dock-item" href="#"><img src="itunes.png" alt="iTunes" /><span>iTunes</span></a>
  8.       <a class="dock-item" href="#"><img src="mail.png" alt="Mail" /><span>Mail</span></a>
  9.       <a class="dock-item" href="#"><img src="quicktime.png" alt="Quicktime" /><span>Quicktime</span></a>
  10.       <a class="dock-item" href="#"><img src="safari.png" alt="Safari" /><span>Safari</span></a>
  11.   </div>
  12. </div>

3) Последнее, что надо - это джаваскрипт который запустит док:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2.     $(document).ready(
  3.         function()
  4.         {
  5.             $('#dock').Fisheye(
  6.                 {
  7.                     maxWidth: 64,
  8.                     items: 'a',
  9.                     itemsText: 'span',
  10.                     container: '.dock-container',
  11.                     itemWidth: 40,
  12.                     proximity: 90,
  13.                     halign : 'center'
  14.                 }
  15.             )
  16.         }
  17.     );
  18. </script>

И всё - док готов. Результат можете посмотреть по этому адресу.

del.icio.us Забобрить!

No comments yet. Be the first.

Leave a reply