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