Хаки и Скрипты Next Generation CMS

Создание Android Dock с использованием JQuery и CSS3

irbees2008 irbees2008 Опубликовано - 10 - ноября Меню и навигация
2945 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Вот обнаружил классное меню в стиле андроид
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с вашим шаблоном.
2.В файле main.tpl между head подключаем стили и скрипты:

Код:
<link rel="stylesheet" href="{tpl_url}/css/demo.css">
<script>!window.jQuery && document.write(unescape('%3Cscript src="{tpl_url}/js/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="{tpl_url}/js/demo.js"></script>
<script src="{tpl_url}/js/modernizr.custom.34807.js"></script>
<script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block'; </script>
3.Теперь сам блок с меню:
Код:
<div id="dock-wrapper">
<div class="dock">
<div class="dock-front">
<img src="{tpl_url}/images/arrow-up.png" alt="Arrow Up" id="arrow-up">
</div>
<div class="dock-top">
<img src="{tpl_url}/images/arrow-down.png" alt="Arrow Down" id="arrow-down">
</div>
</div>
<div class="item">
<span><img src="{tpl_url}/images/launcher-pro.png" width="60"></span>
<span><img src="{tpl_url}/images/2do.png" width="60"></span>
<!-- to n icon -->
</div>
</div>
Вот и все ,наслаждаемся менюшкой,незабываем у кого уже подключен jquery повторно подключать не надо,и при заливке в шаблон осторожно,чтобы не было замены файлов,если есть одинаковые файлы лучше переименуйте и исправьте в коде имена,будут проблемы пишите

Можешь почитать и вот эту статейку "HTML теги aside"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4011 дней
  • Новостей: 564
  • Комменты: 254
  • Зарегистрированно : 642
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 31
  • Генерация страницы: 0.432сек
  • Потребление памяти: 5.163 Mb 
  •   Яндекс.Метрика