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

Можешь почитать и вот эту статейку "С Наступающим Новым 2015 Годом"

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

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