"patison-header"
Bootstrap 3.3.0 Snippet by Starlin

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-patison navbar-fixed-top animate"> <div class="container navbar-more visible-xs"> <ul class="nav navbar-nav"> <li><a href="tel:+380442332521" style="color: #484848;"> (044) <span style="color: #888">233-25-21</span></li> <li><a href="tel:+380974857627" style="color: #484848;"> (097) <span style="color: #888">485-76-27</span></a></li> <li><a href="tel:+380632332521" style="color: #484848;">(063) <span style="color: #888">233-25-21</span></a></li> <li><a href="tel:+380506136211" style="color: #484848;">(050) <span style="color: #888">613-62-11</span></a></li> </ul> </div> <div class="container"> <!--div class="navbar-header hidden-xs"> <a class="navbar-brand" href="#">Brand</a> </div--> <ul class="nav navbar-nav navbar-left hidden-xs"> <li class="hidden-xs"> <a style="color: #999;"> <i class="menu-icon fa fa-clock-o"></i> БЕЗ ВЫХОДНЫХ C 10:00 ДО 20:00 </a> </li> </ul> <ul class="nav navbar-nav navbar-right mobile-bar"> <li> <a href="#"> <span class="menu-icon fa fa-home"></span> Home </a> </li> <li> <a href="#"> <span class="menu-icon fa fa-info"></span> <span class="hidden-xs" style="color: #41ace4;">ДОСТАВКА И ОПЛАТА</span> <span class="visible-xs">ДОСТАВКА И ОПЛАТА</span> </a> </li> <li class="hidden-xs"> <a href="#" style="color: #41ace4;"> <span class="menu-icon fa fa-ship"></span> ГАРАНТИИ </a> </li> <li class="hidden-xs"> <a href="#" style="color: #999;"> <span class="menu-icon fa fa-bell-o"></span> СТАТЬИ </a> </li> <li class="hidden-xs"> <a href="#" style="color: #999;"> <span class="menu-icon fa fa-bell-o"></span> НОВОСТИ </a> </li> <li class="hidden-xs"> <a href="#"> <span class="menu-icon fa fa-phone"></span> <span class="hidden-xs" style="color: #41ace4;">КОНТАКТЫ</span> <!--span class="visible-xs">КОНТАКТЫ</span--> </a> </li> <li class="visible-xs"> <a href=""> <span class="menu-icon fa fa-phone"></span> КОНТАКТЫ </a> </li> </ul> </div> </nav> <div class="header-patison-with-menu"> <section class="header-patison"> <div class="container-fluid"> <div id="logo" class="col-sm-6 col-md-2 col-xs-5"> <a href="/"><img style="margin-top: -10px;" src="http://patison.ua/data/default/logo-patison.png.pagespeed.ce.6c2ryH3l5w.png" alt="Купить матрас в Интернет магазине ПАТИСОН"></a> </div> <div id="phone" class="col-sm-6 col-md-3 col-xs-6 hidden-xs"> <div class="content pull-left"> <span><a href="tel:+380442332521" style="color: #484848;"> (044) <span style="color: #888">233-25-21</span></a></span> <span><a href="tel:+380974857627" style="color: #484848;"> (097) <span style="color: #888">485-76-27</span></a></span><br> <span><a href="tel:+380632332521" style="color: #484848;">(063) <span style="color: #888">233-25-21</span></a></span> <span><a href="tel:+380506136211" style="color: #484848;">(050) <span style="color: #888">613-62-11</span></a></span> </div> <div class="pull-left head-users-buttons"> <div class="head-users-button button-callback"><a href="../icon/shopping-cart"><img src="http://patison.ua/data/default/callback-n.png"> <span class="dotted">Заказать звонок</span></a></div> </div> </div> <div id="search" class="col-sm-12 col-md-5 hidden-xs"> <form action="index.php" method="get" name="formpoisk" id="formpoisk"> <div class="input-group input-group-sm"> <input type="text" name="searchstring" class="pform form-control search ac_input" id="targetDiv" value="" placeholder="найдется все : введите название товара" autocomplete="off"> <span class="input-group-btn"> <button class="btn btn-lg btn-pat-blue" type="button"><i class="fa fa-search"></i></button> </span> </div><!-- /input-group --> </form> <span style="font-size: 75%;margin: 0px;" class="visible-md-block visible-lg-block">Ортопедические матрасы, подушки, кровати, аксессуары для сна, доставка по Киеву и Украине </span> </div> <!-- cart --> <div class="clearfix col-md-2 col-xs-7 pull-right head-users-buttons"> <div class="col-md-4 col-xs-4 head-users-button button-cart"><a href="../icon/shopping-cart"><img src="http://patison.ua/data/default/cart-n.png"> <span class="dotted">Корзина</span></a></div> <div class="col-md-4 col-xs-4 head-users-button button-compare"><a href="../icon/refresh"><img src="http://patison.ua/data/default/libra-n.png"> <span class="">Сравнение</span></a></div> <div class="col-md-4 col-xs-4 head-users-button button-wish"><a href="../icon/heart-o"><img src="http://patison.ua/data/default/wishlist-n.png"> <span class="">Желания</span></a></div> </div> <!-- cart --> </div> </section> <section> <nav class="header-menu-patison"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed header-menu-patison-btn" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>КАТАЛОГ</span> <i class="fa fa-chevron-down" aria-hidden="true"></i> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="container"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Матрасы<span class="caret"></span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Тонкие матрасы<span class="caret"></span></a> </li> <li><a href="#">Недорогие матрасы</a></li> <li><a href="#">Детские матрасы</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Аксессуары<span class="caret"></span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Кровати<span class="caret"></span></a> </li> </ul> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </section> </div> <section> <div id="index"> <div class="divider divider-line divider-sm"> </div> <div> <div class="col-sm-12"> <h1>Купить матрас в интернет магазине Патисон</h1> <p>Пришло время нового матраса? Добро пожаловать в ПатиСон, ваш онлайн магазин матрасов! Выбор из более чем 1000 различных моделей и вариантов матрасов. Линейки из самых популярных брендов ЕММ, Slee&Fly, DonSon, Matrolux, Evolution, Spice, Latona, Brickle, Come-For, СонЛайн и многие другие, собраны лучшие пружинные матрасы, ортопедические матрасы, латексные, тонкие матрасы и топперы, футоны по самым выгодным ценам. <strong>Купить матрас и интернет магазине</strong> выбрав из широчайшего ассортимента, который соответствует высоким требованиям стандартов качества, изготовленных из высококачественных гипоалергенных материалов, на современном оборудование, созданного профессионалами своего дела. Мы всегда рады нашим клиентам и посетителям, стараемся помочь с выбором матраса, всегда лояльны и идем на встречу покупателю. Стараемя удивить вас низкой ценой на качественные ортопедические матрасы, собрав только лучших и недорогих производителей что-б магазин мог удовлетворить даже самого требовательного клиента.</p> <p>Мы предлагаем отличный выбор ортопедических матрасов. Мы обещаем Вам лучшие цены , и наивысшую гарантию вашего комфорта.</p> </div> <div class="col-sm-4 col-xs-12"> <div style="border: 1px solid #f5f5f5;margin-top: 5px; box-shadow: 0 0 20px -2px rgba(43,50,57,0.18);"><img alt="Бесплатная доставка покупок" class="img-responsive" src="data/banners/baner-free-delivery.jpg.pagespeed.ce.jUK0IMVTYk.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"></div> </div> <div class="col-sm-4 col-xs-12"> <div style="border: 1px solid #f5f5f5;margin-top: 5px; box-shadow: 0 0 20px -2px rgba(43,50,57,0.18);"><img alt="Наматрасник в подарок" class="img-responsive" src="data/banners/kupi-matras-namatrasnik-v-podarok.jpg.pagespeed.ce.0_6njzyP-a.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"></div> </div> <div class="col-sm-4 col-xs-12"> <div style="border: 1px solid #f5f5f5;margin-top: 5px; box-shadow: 0 0 20px -2px rgba(43,50,57,0.18);"><img alt="Скидка на ламелевый каркас 40%" class="img-responsive" src="data/banners/kupi-matras-skidka-na-karkas.jpg.pagespeed.ce.qCSHk0tQJp.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"></div> </div> </div> <div class="divider divider-line divider-sm"> </div> <div> <div class="col-sm-5"> <h2>Выбор размера матраса</h2> <p>Выбор правильного размера матраса стал проще. Путем усреднения матрас размеры со всей наших брендов, мы приводим все размеры матраса, чтобы помочь вам выбрать тот, который работает для вас . Найти новый матрас , выберите нужный размер.Вы в поисках ортопедического матраса, это прекрасно. Можете, без всяких трудностей, воспользоватся фильтром по размерам, вам всего лишь нужно поставить галочку напротив необходимого вам размера, автоматически срабатывает поисковая система фильтрации и отображаются только модели с необходимым вам размером. Выбор правильного размера матраса стал проще. Также в нашем фильтре присутствуют дополнительный функции дающие возможность отобрать матрас с определенным наполнителем, выбрать высоту, рейтинг комфорта, ткань матраса и даже максимальную допустимую нагрузку. </p> </div> <div class="col-sm-7"> <div class="mattSize"> <h3>Используйте фильт для поиска</h3> <a href="/matrasy/" class="filter"></a> <br class="clearZero"> </div> </div> </div> <div class="divider divider-line divider-sm"> </div> <div> <div class="col-sm-5"> <h2>Аксессуары к ортопедическим матрасам</h2> <p>Вы можете также приобрести аксессуары для вашего матраса и спального места, под матрас используют ортопедическое основание с деревянными ламелями, он усиливает ортопедические эффект вашего качественного матраса распределяя нагрузку. Также приобретайте защиту от внешнего повреждения или потертостей матраса - качественный наматрасник возьмет все на себя, его с легкостью можно снять постирать или заменить при необходимости а ваш ортопедический матрас будет всегда чистым. В разделе аксессуары вы также найдете кровати, подушки и одеяла на любой вкус с необходимыми размерами.</p> </div> <div class="col-sm-7"> <div class="mattAccessories"> <h3>Сопутствующие товары</h3> <a href="/karkasy/" class="frames"></a> <a href="/namatrasniki/" class="protectors"></a> <a href="/krovati/" class="bedding"></a> <a href="/podushki/" class="pillows"></a> <br class="clearZero"> </div> <br class="clearZero"> <div class="warrantyGuarantee"><span class="warranty">*Реккомендованно для матрасов</span> <span class="guarantee">+Дополнительный комфорт</span></div> </div> </div> <div> <div class="divider divider-line divider-sm"> </div> <div class="col-sm-12"> <h2>Покупая матрас в Киеве <small>Днепропетровске, Сумах, Белой Церкви, Николаеве, Черкассах, Житомире.</small></h2> <p>Вы заботитесь о здоровом и качественном сне для себя и своих близких, подготавливаете прочный фундамент в укреплении здоровья и иммунитета. Ведь люди, которые страдают от хронической усталости, более остро реагируют на стресс, а при продолжительных атаках стрессовых ситуаций, моментально заболевают. Люди, которые постоянно недосыпают, чаще подвержены простудным и вирусным заболеваниям. Потому качественный отдых и сон так же важны, как здоровое питание и занятия спортом.</p> </div> <div class="col-sm-12"> <img alt="Матрас купить в Киеве" class="img-responsive" src="data/banners/kupit-matras-kiev.jpg.pagespeed.ce.QI1792n-Qn.jpg" onerror="this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);"> </div> <div class="divider divider-line divider-sm"> </div> </div> </div> </section>
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"); @media (min-width:768px) { .header-patison-with-menu { border-bottom: 1px solid #c3c3c3; /* box-shadow: 0 0 0 2px #e1e1e1, 0 2px 5px 0 #f5f5f6; */ position: relative; background: -webkit-linear-gradient(top, #fff, #fff 65%, #f3f3f3); background: -ms-linear-gradient(top, #fff, #fff 65%, #f3f3f3); background: -moz-linear-gradient(top, #fff, #fff 65%, #f3f3f3); background: linear-gradient('to bottom', #fff, #fff 65%, #f3f3f3); z-index: 69; } .header-menu-patison { /* background-color: #0099cc; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); */ } .header-menu-patison .navbar-nav>li>a { /* text-shadow: 1px 1px 1px #0060b3; color: #fff; */ text-transform: uppercase; font-weight: 500; font-size: 13px; padding-top: 10px; padding-bottom: 10px; } .header-menu-patison .navbar-nav>li>a:hover, .header-menu-patison .navbar-nav>li>a:focus { text-decoration: none; background-color: transparent; font-weight: 500; } } .header-menu-patison-btn { border-radius: 3px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); float: left; font-size: 22px; font-weight: 400; letter-spacing: 4px; line-height: 28px; margin: 13px 13px 12px 40px; opacity: 1; padding: 8px 40px; position: relative; text-transform: uppercase; -webkit-transition: box-shadow .2s; transition: box-shadow .2s; z-index: 60; background: #0099cc; color: #fff; } .header-menu-patison-btn:hover { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3); } .header-menu-patison-btn:focus { /* background: rgba(63, 81, 181, 0.1); */ outline: 0; } @media (min-width:768px) { .navbar-patison { background: #fff; } .navbar-patison .navbar-nav>li>a { padding-top: 3px; padding-bottom: 3px; } .navbar-patison .navbar-nav>li>a { color: rgba(255, 255, 255, 0.7); font-size: 12px; text-transform: uppercase; font-weight: 500; } .navbar-patison .navbar-nav>li>a:hover { color: #fff; } body { padding-top: 40px; font: 14px/24px Roboto, sans-serif; } } @media (max-width:768px) { .navbar-patison { background: #fff; border-bottom: 1px solid #0099cc; } body { padding-top: 80px; } } .navbar-patison { /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07); */ box-sizing: border-box; } html, body { height: 100%; } body.navbar-more-show { overflow: hidden; } .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar { height: calc(100%); max-height: 300px; -webkit-transform: translate(0px, calc(-100% + 69px)); transform: translate(0px, calc(-100% + 69px)); min-height: 25px; } .navbar .container:not(.navbar-more) { padding: 0px; } .navbar-more-overlay { background-color: rgba(102, 102, 102, 0.55); display: none; height: 100%; left: 0px; position: fixed; top: 0px; width: 100%; z-index: 1029; } .navbar-more-show > .navbar-more-overlay { display: block; } .navbar-more-show > .navbar { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } .navbar-nav.mobile-bar { list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; margin: 0px 0px; } .navbar-nav.mobile-bar > li { -webkit-flex-grow: 1; flex-grow: 1; text-align: center; } .navbar-nav.mobile-bar > li > a > span.menu-icon { display: block; font-size: 1.8em; } .navbar-more { background-color: rgb(255, 255, 255); height: calc(100% - 69px); overflow: auto; } .navbar-more .navbar-form { border-width: 0px; } .navbar-more .navbar-nav > li > a { color: rgb(64, 64, 64); } .navbar-more > .navbar-nav > li > a > span.menu-icon { margin-left: 10px; margin-right: 10px; } .head-users-button { text-align: center; font-size: 10px; line-height: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; float: right; min-height: 4.61538em; position: relative; border: 1px solid transparent; padding: 0 10px; } .head-users-button:hover { border-color: #f89a99; border-radius: 3px; text-decoration: none; } .head-users-button a{ color: #41ace4; } .head-users-button span { display: block; } .button-compare, .button-cart, .button-wish, .button-callback { border-left: 1px solid #eaeaea; } .button-callback { margin-left: 25px; } .head-users-button i { font-size: 32px; } .dotted { text-decoration: none; border-bottom: 1px dotted; } .head-users-button a:hover { text-decoration: none; } @media (min-width: 768px) { .navbar { height: auto; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } .navbar-nav.mobile-bar { display: block; max-height: 64px; margin: 0px -15px; } .navbar-nav.mobile-bar > li > a > span.menu-icon { display: none; } }
$(document).ready(function() { $('a[href="#navbar-more-show"], .navbar-more-overlay').on('click', function(event) { event.preventDefault(); $('body').toggleClass('navbar-more-show'); if ($('body').hasClass('navbar-more-show')) { $('a[href="#navbar-more-show"]').closest('li').addClass('active'); }else{ $('a[href="#navbar-more-show"]').closest('li').removeClass('active'); } return false; }); });

Related: See More


Questions / Comments: