Меню в стиле iMac

Опубликовано 2012.02.13 в разделе Html

Меню в силе 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. }
Качайте исходники.Красивого вам дизайна)) Подробнее о таком меню смотрите тут

6 Комментариев

Оставить комментарий

  1. Гость 2013/01/15

    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>

    записывается в сам page.tpl или создается блое и его в блок?

    Ответить

    1. Админ 2013/01/16

      Без разницы, как вам удобнее. Можно и блоком, можно в шаблон поместить, можно и пейном в панели вывести)

      Ответить

  2. Гость 2012/06/01

    Хм... друзья, не могу взять в толк, как переопределить стиль подсказки?
    Нет, ну font-style работает, а вот color ни в какую, в итоге стиль подсказки как в меню на этом сайте текст светло-желтый)
    Так же не понял как поменять фон подсказки(который серый)

    Ответить

    1. Админ 2012/06/01

      Классу .jqDockLabelText{color:black;background-color:red;} присвой. Так сможешь темизировать цвет и фон.

      Ответить

  3. Админ 2012/03/18

    А в каком месте не работает?ошибки выдает?сайт на хостинге уже?

    Ответить

  4. Гость 2012/03/17

    Не мог установить на сайт! Drupаl 6.12 что мне для этого надо вроде всё правильно делал! Подскажите что мне для этого надо!

    Ответить

Ваш комментарий успешно создан

Ваш комментарий

  • Для выделения кода оберните его в тэги <code> и </code>
  • Отметьте дом