Чудеса случаются. Это вам любой программист скажет.
Меню в стиле iMac
Меню в силе 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; }
Качайте исходники.Красивого вам дизайна))
Подробнее о таком меню смотрите
Скачать:
Читайте также:
Опубликовано admin - 13-02-2012 г.
А в каком месте не
А в каком месте не работает?ошибки выдает?сайт на хостинге уже?Не мог установить на сайт!
Не мог установить на сайт! Drupаl 6.12 что мне для этого надо вроде всё правильно делал! Подскажите что мне для этого надо!Отправить комментарий