Хаки и Скрипты Next Generation CMS : Меню и навигация, CSS, JS : Создание Android Dock с использованием JQuery и CSS3

irbees2008 Опубликовано - 10 - ноября Меню и навигация

Адаптировал: 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 повторно подключать не надо,и при заливке в шаблон осторожно,чтобы не было замены файлов,если есть одинаковые файлы лучше переименуйте и исправьте в коде имена,будут проблемы пишите

Можешь почитать и вот эту статейку "Пишем файл main.tpl"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.