Домой / Для сайта / Кнопки в стиле OS X (Цунами эффект)
Кнопки в стиле OS X (Цунами эффект)

Кнопки в стиле OS X (Цунами эффект)

Пример реализации кнопок для сайта в стиле OS X.

Если у вас есть вопросы по изменению меню, задавайте в комментариях.

Демо

HTML

<nav class="main-nav">
 <ul class="main-nav-list">
 <li class="evolution"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-evolution@2x.png" alt="Evolution and inheritance" title="Evolution and inheritance"></li>
 <li class="light"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-light@2x.png" alt="Light" title="Light"></li>
 <li class="earth"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-earth@2x.png" alt="Earth and space" title="Earth and space"></li>
 <li class="habitats"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-habitats@2x.png" alt="Living things and their habitats" title="Living things and their habitats"></li>
 <li class="forces"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-forces@2x.png" alt="Forces" title="Forces"></li>
 <li class="animals"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-animals@2x.png" alt="Animals, including humans" title="Animals, including humans"></li>
 <li class="electricity"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-electricity@2x.png" alt="Electricity" title="Electricity"></li>
 <li class="materials"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/main-nav-materials@2x.png" alt="Properties and changes of materials" title="Properties and changes of materials"></li>
 </ul>
</nav>

CSS

html, body {
 padding: 0;
 margin: 0;
}

.main-nav {
 position: absolute;
 bottom: 0;
 width: 100%;
 padding: 0;
 margin: 0;
 text-align: center;
 font-size: 0;
}

.main-nav-list {
 display: inline-block;
 padding: 0;
 list-style: none;
}
.main-nav-list li {
 display: inline-block;
 margin: 0;
 padding: 0;
 min-width: 50px;
 min-height: 50px;
}
.main-nav-list li.habitats {
 background-color: #9ae900;
}
.main-nav-list li.animals {
 background-color: #00cb79;
}
.main-nav-list li.materials {
 background-color: #ffd600;
}
.main-nav-list li.earth {
 background-color: #ffa200;
}
.main-nav-list li.forces {
 background-color: #ff2200;
}
.main-nav-list li.evolution {
 background-color: #a8218e;
}
.main-nav-list li.light {
 background-color: #00a7ef;
}
.main-nav-list li.electricity {
 background-color: #00989a;
}
.main-nav-list li img {
 display: inline-block;
 cursor: pointer;
 margin: 0;
 padding: 0;
}

JS

$(document).ready(function(){
 $('.main-nav-list img').resizeOnApproach({
 elementDefault: 50,
 elementClosest: 120,
 triggerDistance: 300
 });
});

Пример реализации кнопок для сайта в стиле OS X. Если у вас есть вопросы по изменению меню, задавайте в комментариях. HTML &hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.5 ( 3 голосов )
98

2 комментария

  1. Как поставить это меню?

    • Это всего лишь пример, а не готовое решение для WordPress. Хотя это не значит, что его нельзя простенько интегрировать. Добавьте код из примера в шаблон WP и все будет работать.

Оставить комментарий

Ваш email не будет опубликован.

*