Войти
Введите цифры и буквы
mich
1 : cd2960d3db1343a9aac5997bca5dfb74 2 : 6d6e1122e8756fb08a77a60a8b3b1ffd 3 : 9737352b5b20997a0b6d20845b1f9543 4 : 6f0819fbcafc6633f9d315c0fe8c0d4c 5 : 1dd498e92f1e199dc6e2db0da6efff5d 6 : 8fe963b84c383e2e3242f923c0d637b7 7 : 97d3031b83bacfcaaf9bd92123d5a082 8 : eb54bd548b94d505f05ac839cd082fd5 9 : 5a07c3b75e8fe0d5c5871397ae95cd3d 10 : 87a7b559494385fe32ba3f46dbd60f57
/* Кнопка */ .b-button img{ display: inline; position: absolute; right: 20px; top: -10px; z-index: 999; width: 70px; } /* Затемнение фона */ .b-overlay{ display: none; position: fixed; top: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.86); overflow: auto; z-index: 100; } .b-wrap{ color: #fff; text-align: center; max-width: 1100px; margin: 0 auto; } .b-wrap ul.b-wrap-nav{ border-bottom: 1px solid #575757; text-transform: capitalize; padding: 150px 0px 100px; } .b-wrap ul.b-wrap-nav > li{ font-size: 22px; display: inline-block; vertical-align: top; width: 24%; position: relative; } .b-wrap ul.b-wrap-nav > li a{ color: #d6d6d6; display: block; padding: 8px 0; text-decoration: none; } .b-wrap ul.b-wrap-nav > li a:hover{ color: #fff; } .b-wrap ul.b-wrap-nav ul{ padding: 20px 0; } .b-wrap ul.b-wrap-nav ul li{ display: block; font-size: 16px; width: 100%; color: #919191; } .b-wrap ul.b-wrap-nav ul li a{ color: #919191; } .b-social{ color: #c1c1c1; font-size: 16px; padding: 20px; } @media screen and (max-width: 48em) { .b-wrap ul.b-wrap-nav > li{ width: 100%; padding: 20px 0; border-bottom: 1px solid #575757; } .b-wrap ul.b-wrap-nav{ padding: 30px 0px 0px; } nav ul{ opacity: 0; visibility: hidden; } .b-button{ top: 0; } }
<div class="b-button"> <a href="#"> <img class="b-btn-open" src="{cfg name="path.static.skin"}/images/btn-hamburger.png" alt=""> <img class="b-btn-close" src="{cfg name="path.static.skin"}/images/btn-close.png" alt=""> </a> </div> <div class="b-overlay"> <div class="b-wrap"> <ul class="b-wrap-nav"> <li><a href="#">Company</a> <ul> <li><a href="#">About</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Workplace</a> </li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a> </li> <li><a href="#">Consultanct</a> </li> <li><a href="#">Products</a> </li> <li><a href="#">Centers</a> </li> </ul> </li> <li><a href="#">Social</a> <ul> <li><a href="#">Facebook</a> </li> <li><a href="#">Twitter</a> </li> <li><a href="#">Google Plus</a> </li> <li><a href="#">LinkedIn</a> </li> <li><a href="#">WhatsApp</a> </li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">Address</a> </li> <li><a href="#">Phone</a> </li> <li><a href="#">Email</a> </li> <li><a href="#">Map</a> </li> </ul> </li> </ul> <div class="b-social"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, recusandae, magnam, sapiente, iure deleniti repudiandae est tempora repellat fugiat aliquid nihil assumenda non placeat cum minus aut qui. Ipsa, aut. </div> </div> </div> <script> $(document).ready(function () { $('.b-btn-close').fadeOut(200); var open = false; $('.b-button a').on('click', function () { if (open == false) { $('.b-overlay, .b-btn-close').fadeIn(200); $('nav ul li, .b-btn-open').fadeOut(200); open = true; } else { $('.b-overlay, .b-btn-close').fadeOut(200) $('nav ul li, .b-btn-open').fadeIn(200); open = false; } }); $('.b-overlay').on('mouseup', function () { $('.b-overlay, .b-btn-close').fadeOut(200); $('nav ul li, .b-btn-open').fadeIn(200); open = false; }); $('.b-wrap').on('mouseup', function () { return false; }); }) </script>
От перемены мест слагаемых сумма не меняется!
Инвайты
Но могу дать ссылку на сайт того хорошего человека. (если вы «реальный покупатель», а не просто «поглядеть»)
1. Добавить CSS стили в css/navs.css
2. Добавить этот код в header.tpl после {hook run='body_begin'}:
3. Загрузить эти файлы в skin/synio/images/ и назвать соответствующе btn-hamburger.png и btn-close.png
Иванов Иван и Иван Иванов — это один человек