Пример реализации кнопок для сайта в стиле 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 }); });
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Как поставить это меню?
Это всего лишь пример, а не готовое решение для WordPress. Хотя это не значит, что его нельзя простенько интегрировать. Добавьте код из примера в шаблон WP и все будет работать.