Меню в стиле material android для DLE и WordPress

В этой статье Я расскажу как создать панель меню в стиле material.

С выходом новой версии Android lollipop, google опубликовала особенности нового стиля Material design. В этой статье Я расскажу как создать панель меню в стиле material, а именно как создать эффект клика как в новой версии android.

menu

И так рассмотрим принцип работы скрипта.

  1. при событии клик вставляем в родителя тег <span></span>
  2. получаем координаты клика относительно родителя
  3. позиционируем ребенка согласно координатам
  4. анимируем появление стилям

Теперь внедряем это все чудо в Ваш сайт.

Шаг 1

Узнаем код меню. Как узнать код элемента на странице Вы можете прочитать в этой статье «Инструменты разработчика в браузере»

Вы найдете приблизительно такой код:

<ul class="some_class">
  <li><a href="http://mexalim.com.ua">Название ссылки</a></li>
  <li><a href="http://mexalim.com.ua">Название ссылки 2</a></li>
  <li><a href="http://mexalim.com.ua">Название ссылки 3</a></li>
</ul>

или

<ul>
  <li><a href="http://mexalim.com.ua">Название ссылки</a></li>
  <li><a href="http://mexalim.com.ua">Название ссылки 2</a></li>
  <li><a href="http://mexalim.com.ua">Название ссылки 3</a></li>
</ul>

Все что надо сделать это добавить класс, который обозначит объект для скрипта. Надо заменить код

<ul class="some_class">

на

<ul class="some_class menuclass">

Как видите мы добавили к тегу списка еще одино имя класса. Если класс изначально не задан то

<ul>

заменить на

<ul class="menuclass">

Шаг 3 Оформляем

В это шаге мы будем вносить правки в файл стилей. Если Вы используюете готовую систему управления то 99% что у Вас есть раздел под примерно таким названием «Редактирование шаблона». Заходите в этот раздел и ищите подбные названия «Файл стилей», «style.css».

Когда Вы откроете файл Вы увидите примерно такой код

body, html {
  display:block;
}
.name {display:none;}
.phone {color:#fff;}

Если Вы не нашли такой раздел или сайт работает без системы управления то рекомендую скачать его с помощью FTP. Как пользоваться FTP и что это такое Вы можете узнать в статье: «Как подключиться к хостингу по FTP на пальцах»

Узнать где находится этот файл можно с помощью инструмента для веб-мастера который я описываю в статье «Инструменты разработчика в браузере».

К слову, это обязательные стили.

.menuclass li a {
  display:block;
  overflow:hidden;
  z-index:0;
}

.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}
.animate {
	-webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}
@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}

Для меню с нуля дополним наши стили и вставим тоже в конец файла стилей.

Я дополнил обязательный код еще несколькими стилями для нормального вида.

.menu_top {
    padding:10px 10px 15px 10px;
    background: #2772c7;
    font-family: "Tahoma";
}
.menuclass li, .menuclass {
    list-style: none;
margin: 0;
}
.menuclass {
     height:40px;
}
.menuclass li {
    float:left;
    margin-right:10px;
    height:40px;
}
.menuclass li a {
    display:block;/* обязательный стиль */
     z-index:0;/* обязательный стиль */
    position:relative; /* обязательный стиль */
    overflow:hidden; /* обязательный стиль */  
    color:#9da2d1;
    border-bottom: 0px #fff solid;
    float:left;
    height:40px;
    line-height:40px;
    text-decoration: none;
    text-transform: uppercase;
}
.menuclass li a:hover, .menuclass li.current a {
    border-bottom: 3px #fff solid;
    color:#fff;
}
.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);/* цвет слоя который появляется при клике */
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}
/* чуть магии */
.animate {
	-webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}
@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}

Для кнопки получится вот такой обязательный код.

Его тоже вставляем в конец файла стилей. Единственно его отличие от предыдущих кодов это название класса

.megabutton {
  display:block;
  overflow:hidden;
  z-index:0;
}

.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}
.animate {
	-webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}
@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}

На всякий случай говорю, что надо вставлять только один код.

Шаг  4 Анимация

Для готового меню и меню с нуля вставляем в код главной страницы перед </head>. Если Ваш сайт работает на системе управления WordPress то файл называется header.php и находится в папке с активным шаблоном. Если Вы используете DLE то нужный тег вы найдете в файле main.tpl которые то же находится в папке с активным шаблоном.

<script>
$(function(){
var ink, d, x, y;
$(".menuclass li a, .megabutton").click(function(e){ // событие клика
if($(this).find(".ink").length === 0){ // Проверяем наличия слоя ребенка. Если его нет то добавляем его 
$(this).prepend("<span class='ink'></span>");
}

ink = $(this).find(".ink");
ink.removeClass("animate");

if(!ink.height() && !ink.width()){ // вычисляем высоту и ширину
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({height: d, width: d});
}

x = e.pageX - $(this).offset().left - ink.width()/2; //получаем координаты
y = e.pageY - $(this).offset().top - ink.height()/2;

ink.css({top: y+'px', left: x+'px'}).addClass("animate"); // анимируем с помошью css3 scal и ripple
});
});
</script>

На заметку:

Что бы сменить цвет круга при клике надо редактировать

background:rgba(255, 255, 255, 0.3);

в классе

.ink

тут цвет указывается в формате RGB и указывается прозрачность слоя 0.3

Например надо что бы он стал черным и не прозрачным. Получится вот такой код:

.superclass .ink {
background:#000; //цвет
}

если нужно сделать прозрачным то указываем цвет в формате RGB

background:rgba(0, 0, 0, 0.3);

Вот и все. Делитесь мнениями в комментариях. Буду исправлять и дописывать по мере необходимости.

 

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$