Горизонтальное меню с zoom-эффектом и подчёркиванием снизу.

горизонтальное меню
Всем читателям и гостям блога, привет. Очень приятно осознавать, что мои постоянные читатели так внимательно относятся к шпаргалкам. И интереснее всего то, что только успеешь что - то протестировать на демо-блоге, как тут же вопросы, "как это сделать", "когда поделишься" и "хочу". Буквально недавно публиковала пост
как сделать горизонтальное меню с кнопкой , как тут же появились вопросы ещё об одном меню.

Сегодня по многочисленным просьбам подписчиков блога делюсь кодом, горизонтального меню zoom - эффектом и подчёркиванием снизу. Работу его можно посмотреть здесь . Постаралась в коде по максимуму расписать, что за что отвечает. Надеюсь, что трудностей у вас не возникнет. Сможете легко подогнать его под свой дизайн.

И устанавливается оно достаточно просто - через гаджет HTML/JavaScript. Давайте уже копируйте следующий код к себе в блокнот и делайте свои настройки.
<style>
ul.sonarmenu{
list-style: none;
}

ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
position: relative;
display: inline-block;

color: black; /* цвет шрифта */
text-decoration: none;
margin: 10px 20px;
text-transform: uppercase;
font-family:sans-serif; /* стиль шрифта  */
font-size: 18px; /*  размер шрифта */
letter-spacing: 2px; /* межбуквенное расстояние */
border-bottom: 2px solid transparent; /* стиль нижней границы */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
outline: none;
border-bottom: 2px solid #800000 ; /* стиль нижней границы при наведении*/
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* общий стиль 2 -х окружностей */
position: absolute;
top: 50%;
left: 50%;
width: 70px; /* ширина внешнего круга */
height: 70px; /* высота внешнего круга */
border: 12px double rgb(128,0,0); /* стиль и цвет кругов*/
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* стили  CSS внутренний круг*/
width: 60px; /* ширина внутреннего круга */
height: 60px; /* высота внутреннего круга */
border-width: 6px;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
-webkit-animation: pulsate 1.2s infinite; /* длительность цикла анимации */
-moz-animation: pulsate 1.2s infinite;
-ms-animation: pulsate 1.2s infinite;
animation: pulsate 1.2s infinite;
}

/* анимация ключевых кадров  */

@-webkit-keyframes pulsate{

  30%{
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }

100%{
opacity: 0.3;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
}

}

@-moz-keyframes pulsate{

  30%{
opacity: 1;
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }

100%{
opacity: 0.3;
-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
}

}

@-ms-keyframes pulsate{

  30%{
opacity: 1;
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }

100%{
opacity: 0.3;
-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
}

}

@-keyframes pulsate{

  30%{
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
  }

100%{
opacity: 0.3;
transform: translateX(-50%) translateY(-50%) scale(0.5);
}

}

</style>
<ul class="sonarmenu">
<li><a href=" http://www.shpargalochki.ru/ ">Главная</a></li>
<li><a href=" http://www.shpargalochki.ru/p/blog-page_60.html">Содержание</a></li>
<li><a href=" http://www.shpargalochki.ru/p/blog-page_29.html">Об авторе</a></li>
<li><a href=" http://www.shpargalochki.ru/p/blog-page_2746.html">Форма связи</a></li>
</ul>


Код можно вставить вместе с пояснительным текстом или, если есть желание, уберите эти строчки вида /* цвет шрифта */. Адреса и названия своих страниц меняйте на свои. Соответственно, добавляйте дополнительные пункты в меню с zoom эффектом использую строки-

<li><a href=" http://www.shpargalochki.ru/ ">Главная</a></li>

Если загляните на этот демо - блог, то увидите вариант такого меню немного другого оформления. Всё зависит от основного фона вашего блога.

Вот очередная шпаргалка отправилась в категорию меню. Следите за обновлениями блога в дальнейшем будут ещё другие варианты.

Спасибо, за ваши внимание и до новых встреч.

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

Введите Ваш email


13 комментариев:

  1. Спасибо, Вика, все очень подробно расписано, пойду только кофе попью. Аж руки чешутся!
    Твои шпоргалки - это первое, что я читаю по утрам, радуюсь, когда увижу в почте, как журнал "Мурзилка".)

    ОтветитьУдалить
  2. Спасибочки большое, Вика. Буду настраивать под свой блог

    ОтветитьУдалить
    Ответы
    1. Здравствуйте любовь. Настраивайте, забегу посмотреть. Кое-какие дополнения в комментариях у Олеси.

      Удалить
    2. Вика. Всё получилось!!! Спасибо https://3.bp.blogspot.com/-RNWaHDd827U/Vwp_dhL8eJI/AAAAAAAACDc/btFcaQxR_yoRFzPvepPoh-eEnDRTFliJg/s1600/spasibo-za-mk.gif

      Удалить
    3. Любовь, да я уже видела . Ещё вот и Олесю к Вам направила, чтобы посмотреть ещё один вариант такого меню. Я рада за Вас.

      Удалить
  3. Вика, фон и цвет кнопок меню - оранжевый, не нашла, где поменять.

    ОтветитьУдалить
    Ответы
    1. Олеся, спасибо тебе за внимание. Тут нет фона кнопок в коде . Я специально перенаправила на 2 демо блога. Всё зависит от настроек общего фона блога. Вернее фона вкладок. У тебя, на сколько я помню их нет. Просто попробуй поставить этот вариант как есть . В любом слычае гаджет можно удалить А цвет зумма определяется параметром rgb(128,0,0); /* стиль и цвет кругов*/. Нужные можно подобрать здесь http://htmlbook.ru/css/value/color

      Удалить
    2. Олеся, Посмотри как в оформлении смотрится на блоге у Любови здесь
      http://00149.blogspot.ru/

      Удалить
    3. Да, у Любови здорово вписалось, мне нравиться.
      Я тоже поняла, как в настройках изменить стиль.Но у меня другой шаблон с разрывом между шапкой и основным текстом. Я сначала оставила просто кнопки без фона, но они были слишком темные.
      Потом мне пришла идея загнать их вверх над шапкой. Вроде бы ничего получилось. Только не пойму, от куда почти незаметная пунктирная линия сверху.
      Как ты считаешь, неплохо получилось?

      Удалить
    4. Слушай, Олеся. Мне понравилось. Кстати на эту линию даже кто и обратит внимание, она нормально смотрится, не мешает.

      Удалить
    5. Я рада, значит так и оставлю. Спасибо!

      Удалить
  4. Вика, привет! Я опять корректирую шаблон, так что я твой постоянный клиент))). Кнопки установила и сверху, и снизу пока для пробы, что-то меняла, но у меня шаблон не позволяет поменять серый цвет вкладок страниц. Верхние с разрывами смотрятся, расстояние между сообщением и вкладками не могу убрать.Кстати, обратила внимание, что на мобильных некорректно отражается. Видимо, у меня шаблон такой. Хотела новый скачать, но потом корректировки же муторно делать и заново подгонять под сайт. А вообще интересная фишка. Внизу нравится, только цвет поярче надо бы.

    ОтветитьУдалить
    Ответы
    1. Гузель, это у тебя вверху так оформлены вкладки. Как и у меня получилось на демо 1. Общий фон не задан в коде . В твоём случае можно поменять цвет шрифта color: black; на другой.

      Удалить

Пользовательский поиск