Меню в стиле iMac

Опубликовано 2012.02.13

Меню в силе iMac можно поставить на любой сайт. Смотрится очень эффектно и совсем не сложно в установке. Для создания такого меню потребуется сам сайт,изображения для меню и немного JavaScript и CSS. Пример такого меню вы видите на этом сайте, вверху. Такое меню может быть горизонтальным или вертикальным. Я сразу перейду к коду, поскольку в данном случае теория не столь важна. Вот код самого меню. Прописываем обычные ссылки в виде картинок. Оборачиваем в div. 
  1. <div id='menu' style="z-index:4000;">
  2. 	<a href="http://php-include.ru/"><img src='System-Home-icon.png' title='Главная' alt='' /></a>
  3. 	<a href='http://php-include.ru/portfolio'><img src='App-file-manager-icon.png' title='Портфолио' alt='' /></a>
  4. 	<a href="http://php-include.ru/video"><img src='App-camcorder-icon.png' title='Видеоуроки' alt='' /></a>
  5. 	<a href="http://php-include.ru/downloads"><img src='App-download-manager-icon.png' title='Загрузки' alt='' /></a>	
  6. 	<a href="http://php-include.ru/lessons"><img src='App-mydocuments-icon.png' title='Статьи' alt='' /></a>
  7. </div>
Также необходимо подключить специальную библиотеку jquery.jqDock.js: 
  1. //для Drupal
  2. //сам файл лежит в папке темы beach
  3. drupal_add_js(drupal_get_path('theme', 'beach') .'/js/jquery.jqDock.js', 'theme');
  4.  
  5. //для HTML
  6. <script type="text/javascript" src="/js/jquery.jqDock.js"></script>
И теперь можно настраивать само меню. Разместите следующий JavaScript код: 
  1. $(document).ready(function($){
  2.   // set up the options to be used for jqDock...
  3.   var dockOptions =
  4.     { align: 'top' // horizontal menu, with expansion DOWN from a fixed TOP edge
  5.     , fadeIn: 200 // fade in over 2 seconds
  6.     , fadeLayer: 'wrap' // fade in the div.jqDockWrap layer
  7. 	, labels: 'br'
  8.     };
  9.   // ...and apply...
  10.   $('#menu').jqDock(dockOptions);
  11. });
Также необходимо подключить следующие стили: 
  1. #menu {position:absolute;position:fixed; top:0; left:0; width:100%; display:none;}
  2. #menu div.jqDockWrap {margin:0 auto;}
  3. #menu div.jqDock {cursor:pointer;}
  4. .jqDockLabelText{
  5. 	color:black;
  6. 	font-size:14px;
  7. 	margin:5px;
  8. 	width:auto;
  9. 	position:absolute;
  10. 	left:-75px;
  11. 	font-weight: 600;
  12. 	color:#ffffdd;
  13. 	background:grey;
  14. 	-moz-border-radius: 2px;
  15. 	-webkit-border-radius: 2px;
  16. 	border-radius: 2px;
  17. 	padding:5px;
  18. }
Качайте исходники.Красивого вам дизайна)) Подробнее о таком меню смотрите тут