PHP
<!-- init.php -->
<?php
$contactPage['value'] = 'https://www.facebook.com
https://google.com
https://youtube.com
https://linkedin.com
https://twitter.com';
$temp = explode(PHP_EOL, $contactPage['value']);
foreach ($temp as $t) {
if (strpos($t, 'facebook.com') == true) $Cfacebook = $t;
if (strpos($t, 'google.com') == true) $Cgoogle = $t;
if (strpos($t, 'youtube.com') == true) $Cyoutube = $t;
if (strpos($t, 'twitter.com') == true) $Ctwitter = $t;
if (strpos($t, 'linkedin.com') == true) $Clinkedin = $t;
}
?>PHP
<header class="header">
<div class="wrapper">
<div class="header_row">
<div class="header_col_1">
<a href="/" class="header_logo">
<img src="/img/odm-logo.png" alt="Offshore Direct Metals">
</a>
</div>
<div class="header_col_2">
<div class="top_menu">
<div class="social">
<?php if (isset($Cfacebook) && !empty($Cfacebook)): ?>
<a href="<?= $Cfacebook ?>" target="_blank" class="social_block">
<?= svg('iconFacebookC2','')?>
</a>
<?php endif; ?>
<?php if (isset($Cinstagram) && !empty($Cinstagram)): ?>
<a href="<?= $Cinstagram ?>" target="_blank" class="social_block">
<img src="/img/instagram-c.svg" alt="instagram logo">
</a>
<?php endif; ?>
<?php if (isset($Cgoogle) && !empty($Cgoogle)): ?>
<a href="<?= $Cgoogle ?>" target="_blank" class="social_block">
<?= svg('iconGoogleC','')?>
</a>
<?php endif; ?>
<?php if (isset($Cyoutube) && !empty($Cyoutube)): ?>
<a href="<?= $Cyoutube ?>" target="_blank" class="social_block">
<?= svg('iconYtPlC','')?>
</a>
<?php endif; ?>
<?php if (isset($Clinkedin) && !empty($Clinkedin)): ?>
<a href="<?= $Clinkedin ?>" target="_blank" class="social_block">
<?= svg('iconLinkedinC','')?>
</a>
<?php endif; ?>
<?php if (isset($Ctwitter) && !empty($Ctwitter)): ?>
<a href="<?= $Ctwitter ?>" target="_blank" class="social_block">
<?= svg('iconTwitterC','')?>
</a>
<?php endif; ?>
</div>
<?php if (isset($CPhone) && !empty($CPhone)):?>
<div class="phone_block">
<a class="phone" href="tel:<?= $CPhone?>"><?= svg('iconTel', 'scale') ?> <?= $CPhone?></a>
</div>
<?php endif;?>
</div>
<nav class="navigation">
<ul class="header_nav">
<li data-id="active_menu_1" class="active"><a href="/">Home</a></li>
<li data-id="active_menu_2" class="dr_down">
<a href="/products">Products</a>
<ul class="sub_menu">
<li><a href="/product">Custom Aluminum Extrusions</a></li>
<li><a href="/product">Aluminum Billets and Ingots</a></li>
<li><a href="/product">Aluminum Plate</a></li>
</ul>
</li>
<li data-id="active_menu_3"><a href="/about">About</a></li>
<li data-id="active_menu_4"><a href="/contact">Contact Us</a></li>
<li data-id="active_menu_5"><a href="/blog">Blog</a></li>
<li class="header_btn"><a href="#" class="button" data-modals="modal_contact">Request a Quote</a></li>
<li class="mobile_social">
<div class="social">
<?php if (isset($Cfacebook) && !empty($Cfacebook)): ?>
<a href="<?= $Cfacebook ?>" target="_blank" class="social_block" >
<?= svg('iconFacebookC2','')?>
</a>
<?php endif; ?>
<?php if (isset($Cinstagram) && !empty($Cinstagram)): ?>
<a href="<?= $Cinstagram ?>" target="_blank" class="social_block" >
<img src="/img/instagram-c.svg" alt="instagram logo">
</a>
<?php endif; ?>
<?php if (isset($Cgoogle) && !empty($Cgoogle)): ?>
<a href="<?= $Cgoogle ?>" target="_blank" class="social_block" >
<?= svg('iconGoogleC','')?>
</a>
<?php endif; ?>
<?php if (isset($Cyoutube) && !empty($Cyoutube)): ?>
<a href="<?= $Cyoutube ?>" target="_blank" class="social_block" >
<?= svg('iconYtPlC','')?>
</a>
<?php endif; ?>
<?php if (isset($Clinkedin) && !empty($Clinkedin)): ?>
<a href="<?= $Clinkedin ?>" target="_blank" class="social_block" >
<?= svg('iconLinkedinC','')?>
</a>
<?php endif; ?>
<?php if (isset($Ctwitter) && !empty($Ctwitter)): ?>
<a href="<?= $Ctwitter ?>" target="_blank" class="social_block" >
<?= svg('iconTwitterC','')?>
</a>
<?php endif; ?>
</div>
</li>
</ul>
</nav>
<div class="navigation_btn">
<div class="hamburger_box"></div>
<p>MENU</p>
</div>
</div>
</div>
</div>
<div class="dark_overlay"></div>
</header>PHP
<!-- Фіксований телефон відображається на планшеті і телефонах
@media only screen and (max-width: 992px) { ... }
При стилізації не забувати про padding-bottom у footer -->
<?php if (isset($CPhone) && !empty($CPhone)):?>
<a class="mobile_phone" href="tel:<?= $CPhone?>"><?= svg('iconTel', 'scale') ?> <?= $CPhone?></a>
<?php endif;?>PHP
<!-- Aктивний клас у посилання в header -->
<!-- Кореневий index.php -->
<?php
$active_menu = 1;
?>
<!-- script.php -->
<?php if(isset($active_menu)):?>
<script>
$(document).ready(function () {
$('[data-id="active_menu_<?=$active_menu?>"]').addClass('active');
});
</script>
<?php endif;?>CSS
@-webkit-keyframes slideDown { 0%{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)} 100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }
@-moz-keyframes slideDown { 0%{opacity:0;-moz-transform:translateY(-100%);transform:translateY(-100%)} 100%{opacity:1;-moz-transform:translateY(0);transform:translateY(0)} }
@-o-keyframes slideDown { 0%{opacity:0;-o-transform:translateY(-100%);transform:translateY(-100%)} 100%{opacity:1;-o-transform:translateY(0);transform:translateY(0)} }
@keyframes slideDown { 0%{opacity:0;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)} 100%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)} }
.header{position:absolute;top:0;left:0;width:100%;padding:2.4rem 0;z-index:999;-webkit-transition:.2s;-o-transition:.2s;-moz-transition:.2s;transition:.2s;background-color:#fff}
.header .header_row{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.header .header_col_1{width:21.6rem}
.header .header_col_2{width:-webkit-calc(100% - 21.6rem);width:-moz-calc(100% - 21.6rem);width:calc(100% - 21.6rem);text-align:right;padding:0 0 0 2rem}
.header .header_logo{display:inline-block;position:relative}
.header .header_logo img{width:25.5rem}
.header .top_menu{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.header .top_menu .social{margin:0 2.6rem 0 0}
.header .top_menu .social a{margin:0 2.2rem 0 0}
.header .top_menu .social a .icon,.header .top_menu .social a img{width:2.8rem;height:2.8rem}
.header .phone_block{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
.header .phone_block .phone{font-size:3.2rem;line-height:1;font-weight:600;color:#000;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.header .phone_block .phone .icon{width:3.2rem;height:3.2rem;color:#09a5be;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.header.fixed{position:fixed;-webkit-animation:slideDown .7s;-moz-animation:slideDown .7s;-o-animation:slideDown .7s;animation:slideDown .7s;-webkit-box-shadow:0 0 1.5rem 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 1.5rem 0 rgba(0,0,0,0.2);box-shadow:0 0 1.5rem 0 rgba(0,0,0,0.2);padding:1rem 0}
.header.fixed .header_logo img{width:13rem}
.header.fixed .top_menu{display:none}
.header.fixed .navigation{margin:0}
.navigation{margin:1rem 0 0}
.navigation .header_nav{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}
.navigation .header_nav > li > a:not(.button){font:400 1.6rem 'Nunito Sans',sans-serif;color:#000;text-transform:uppercase;display:block;white-space:nowrap;padding:0 2rem;position:relative;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.navigation .header_nav > li > a:not(.button)::after{content:"";position:absolute;left:51%;right:51%;bottom:0;display:block;background-color:#09a5be;height:.1rem;-webkit-transition-property:left,right;-o-transition-property:left,right;-moz-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;z-index:3}
.navigation .header_nav > li.active > a:not(.button){font-weight:700;color:#09a5be}
.navigation .header_nav > li:nth-last-child(2) > a:not(.button){padding:0 0 0 2rem}
.navigation .header_nav > li.dr_down{position:relative}
.navigation .header_nav > li.header_btn{padding:0 0 0 1rem}
.navigation .header_nav > li.mobile_social{display:none}
.navigation .header_nav .sub_menu,.navigation .header_nav .sub_sub_menu{opacity:0;visibility:hidden;position:absolute;z-index:3;min-width:25rem;background-color:#09a5be;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-box-shadow:0 0 .3rem rgba(0,0,0,0.1);-moz-box-shadow:0 0 .3rem rgba(0,0,0,0.1);box-shadow:0 0 .3rem rgba(0,0,0,0.1);-webkit-transform:translate3d(0,1rem,0);-moz-transform:translate3d(0,1rem,0);transform:translate3d(0,1rem,0)}
.navigation .header_nav .sub_menu > li,.navigation .header_nav .sub_sub_menu > li{border-bottom:.1rem solid rgba(255,255,255,0.1)}
.navigation .header_nav .sub_menu > li:last-child,.navigation .header_nav .sub_sub_menu > li:last-child{border-bottom:none}
.navigation .header_nav .sub_menu > li > a:not(.button),.navigation .header_nav .sub_sub_menu > li > a:not(.button){font-size:1.4rem;color:#fff;display:block;padding:.9rem 1.5rem .7rem;white-space:pre-wrap;text-align:left;text-transform:uppercase;-webkit-transition: .3s linear;-o-transition: .3s linear;-moz-transition: .3s linear;transition: .3s linear}
.navigation .header_nav .sub_menu{top:100%;left:2rem;margin:.6rem 0 0}
.navigation .header_nav .sub_menu::before{content:'';position:absolute;left:1rem;bottom:100%;display:block;border-bottom:.6rem solid #09a5be;border-left:.6rem solid transparent;border-right:.6rem solid transparent}
.navigation .header_nav .sub_menu::after{content:'';position:absolute;left:0;right:0;bottom:100%;display:block;width:100%;height:1rem}
.navigation .header_nav .sub_menu > li.sub_dr_down{position:relative}
.navigation .header_nav .sub_menu > li.sub_dr_down::after{content:"";position:absolute;top:50%;right:1rem;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);display:block;width:0;height:0;background-color:rgba(0,0,0,0);border-style:solid;border-width:.8rem 0 .8rem .8rem;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff;z-index:1}
.navigation .header_nav .sub_menu > li.sub_dr_down > a{padding:.9rem 2.5rem .7rem 1.5rem}
.navigation .header_nav .sub_sub_menu{top:0;left:100%}
.navigation .header_nav > li.dr_down:focus .sub_menu,.navigation .header_nav li.sub_dr_down:focus .sub_sub_menu{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.navigation_btn{display:none;width:4rem;height:2.4rem;position:absolute;top:1rem;right:2rem;overflow:visible;cursor:pointer;-webkit-transition-property:opacity;-o-transition-property:opacity;-moz-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.15s;-moz-transition-duration:.15s;-o-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;-o-transition-timing-function:linear;transition-timing-function:linear;z-index:600}
.navigation_btn .hamburger_box{display:block;width:4rem;height:.4rem;-webkit-border-radius:.4rem;-moz-border-radius:.4rem;border-radius:.4rem;background-color:#09a5be;position:absolute;left:0;top:50%;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:-o-transform;-moz-transition-property:transform,-moz-transform;transition-property:transform;transition-property:transform,-webkit-transform,-moz-transform,-o-transform;-webkit-transition-duration:.075s;-moz-transition-duration:.075s;-o-transition-duration:.075s;transition-duration:.075s;-webkit-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-moz-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);-o-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}
.navigation_btn .hamburger_box::before,.navigation_btn .hamburger_box::after{content:"";display:block;width:4rem;height:.4rem;-webkit-border-radius:.4rem;-moz-border-radius:.4rem;border-radius:.4rem;background-color:#09a5be;position:absolute;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:-o-transform;-moz-transition-property:transform,-moz-transform;transition-property:transform;transition-property:transform,-webkit-transform,-moz-transform,-o-transform;-webkit-transition-duration:.15s;-moz-transition-duration:.15s;-o-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}
.navigation_btn .hamburger_box::before{top:-1rem;-webkit-transition:top .075s .12s ease,opacity .075s ease;-o-transition:top .075s .12s ease,opacity .075s ease;-moz-transition:top .075s .12s ease,opacity .075s ease;transition:top .075s .12s ease,opacity .075s ease}
.navigation_btn .hamburger_box::after{bottom:-1rem;-webkit-transition:bottom .075s .12s ease,-webkit-transform .075s cubic-bezier(0.55,0.055,0.675,0.19);transition:bottom .075s .12s ease,-webkit-transform .075s cubic-bezier(0.55,0.055,0.675,0.19);-o-transition:bottom .075s .12s ease,-o-transform .075s cubic-bezier(0.55,0.055,0.675,0.19);-moz-transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19),-moz-transform .075s cubic-bezier(0.55,0.055,0.675,0.19);transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19);transition:bottom .075s .12s ease,transform .075s cubic-bezier(0.55,0.055,0.675,0.19),-webkit-transform .075s cubic-bezier(0.55,0.055,0.675,0.19),-moz-transform .075s cubic-bezier(0.55,0.055,0.675,0.19),-o-transform .075s cubic-bezier(0.55,0.055,0.675,0.19)}
.navigation_btn.is_open .hamburger_box{-webkit-transform:translate(0,-50%) rotate(45deg);-moz-transform:translate(0,-50%) rotate(45deg);-ms-transform:translate(0,-50%) rotate(45deg);-o-transform:translate(0,-50%) rotate(45deg);transform:translate(0,-50%) rotate(45deg);-webkit-transition-delay:.12s;-moz-transition-delay:.12s;-o-transition-delay:.12s;transition-delay:.12s;-webkit-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);-moz-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);-o-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);background-color:#09a5be}
.navigation_btn.is_open .hamburger_box::before,.navigation_btn.is_open .hamburger_box::after{background-color:#09a5be}
.navigation_btn.is_open .hamburger_box::before{top:0;opacity:0;-webkit-transition:top .075s ease,opacity .075s .12s ease;-o-transition:top .075s ease,opacity .075s .12s ease;-moz-transition:top .075s ease,opacity .075s .12s ease;transition:top .075s ease,opacity .075s .12s ease}
.navigation_btn.is_open .hamburger_box::after{bottom:0;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:bottom .075s ease,-webkit-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);transition:bottom .075s ease,-webkit-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);-o-transition:bottom .075s ease,-o-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);-moz-transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1),-moz-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1);transition:bottom .075s ease,transform .075s .12s cubic-bezier(0.215,0.61,0.355,1),-webkit-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1),-moz-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1),-o-transform .075s .12s cubic-bezier(0.215,0.61,0.355,1)}
.navigation_btn p{display:block;font-size:1.4rem;font-weight:400;color:#09a5be;margin:0;position:absolute;bottom:-2.5rem;left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}
.mobile_phone{position:fixed;left:0;right:0;bottom:0;display:none;padding:.5rem 0;font:700 3rem 'Nunito Sans',sans-serif;background-color:#09a5be;color:#fff;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:300}
.mobile_phone svg{width:2.4rem;height:2.4rem}
.dark_overlay.nav_opened::after{content:"";position:fixed;top:0;left:0;display:block;width:100%;height:100vh;background-color:#000;opacity:.8;z-index:2}
@media only screen and (min-width: 993px) {
.navigation .header_nav > li.dr_down:hover .sub_menu,.navigation .header_nav li.sub_dr_down:hover .sub_sub_menu{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
.header .phone_block .phone:hover{color:#09a5be}
.navigation .header_nav > li > a:not(.button):hover{color:#09a5be}
.navigation .header_nav > li > a:not(.button):hover::after{left:2rem;right:2rem}
.navigation .header_nav > li.dr_down > a:not(.button):hover::after{left:5rem}
.navigation .header_nav .sub_menu > li > a:not(.button):hover,.navigation .header_nav .sub_sub_menu > li > a:not(.button):hover{color:rgba(255,255,255,0.5)}
}
@media only screen and (max-width: 992px) {
.header,.header.fixed{padding:1.5rem 0}
.header .header_logo img,.header.fixed .header_logo img{width:13rem}
.header .header_col_1{width:-webkit-calc(100% - 7rem);width:-moz-calc(100% - 7rem);width:calc(100% - 7rem)}
.header .header_col_2{width:7rem}
.header .navigation_btn{display:block}
.header .top_menu{display:none}
.navigation{position:fixed;top:0;right:-36rem;z-index:100;width:36rem;height:100vh;margin:0;overflow:hidden;background-color:#000;-webkit-transition:right .3s ease-in;-o-transition:right .3s ease-in;-moz-transition:right .3s ease-in;transition:right .3s ease-in}
.navigation.nav_opened{right:0;-webkit-transition:right .3s ease-out;-o-transition:right .3s ease-out;-moz-transition:right .3s ease-out;transition:right .3s ease-out}
.navigation .header_nav{display:block;margin:9rem 0 0;padding:0 1.5rem;height:-webkit-calc(100vh - 16rem);height:-moz-calc(100vh - 16rem);height:calc(100vh - 16rem);overflow-y:auto}
.navigation .header_nav > li{display:block;width:100%}
.navigation .header_nav > li > a:not(.button){display:block;font-size:2rem;font-weight:400;color:#fff;text-align:center;text-transform:uppercase;padding:.9rem 0;width:100%;margin:0 auto}
.navigation .header_nav > li > a:not(.button)::after{display:none}
.navigation .header_nav > li.dr_down > a:not(.button)::after{content:'';position:relative;top:0;left:auto !important;right:-1.3rem;display:inline-block;width:0;height:0;background-color:transparent;border-style:solid;border-width:.8rem 0 .8rem .8rem;border-color:transparent transparent transparent #fff;z-index:1}
.navigation .header_nav > li.dr_down.active > a:not(.button)::after{border-color:transparent transparent transparent #09a5be}
.navigation .header_nav > li.dr_down .sub_menu{display:none;position:relative;top:100%;left:0;width:100%;height:auto;margin:1rem 0;background-color:transparent;min-width:unset;-webkit-box-shadow:unset;-moz-box-shadow:unset;box-shadow:unset;-webkit-transform:unset;-moz-transform:unset;-ms-transform:unset;-o-transform:unset;transform:unset;-webkit-transition:unset;-o-transition:unset;-moz-transition:unset;transition:unset}
.navigation .header_nav > li.dr_down .sub_menu::after,.navigation .header_nav > li.dr_down .sub_menu::before{display:none}
.navigation .header_nav > li.dr_down .sub_menu > li{border-bottom:none}
.navigation .header_nav > li.dr_down .sub_menu > li.sub_dr_down::after{display:none}
.navigation .header_nav > li.dr_down .sub_menu > li > a:not(.button){font-size:1.7rem;line-height:1.4;border-bottom:none;padding:.8rem 0;margin:0 auto;max-width:80%;text-align:center}
.navigation .header_nav > li.dr_down.visible_sub > a:not(.button)::after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.navigation .header_nav > li.dr_down.visible_sub .sub_menu{display:block;opacity:1;visibility:visible}
.navigation .header_nav > li.header_btn{padding:1rem 3rem}
.navigation .header_nav > li.header_btn .button{display:block;width:100%}
.navigation .header_nav > li.mobile_social{display:block}
.navigation .header_nav > li.mobile_social .social{text-align:center;margin:1rem 0 0}
.navigation .header_nav > li.mobile_social .social a{display:inline-block;vertical-align:middle;width:auto;margin:0 1rem}
.navigation .header_nav li.sub_dr_down > a:not(.button)::after{content:'';position:relative;top:.3rem;left:auto !important;right:-1.3rem;display:inline-block;width:0;height:0;background-color:transparent;border-style:solid;border-width:.8rem 0 .8rem .8rem;border-color:transparent transparent transparent #fff;z-index:1}
.navigation .header_nav li.sub_dr_down.active > a:not(.button)::after{border-color:transparent transparent transparent #09a5be}
.navigation .header_nav li.sub_dr_down .sub_sub_menu{display:none;position:relative;top:100%;left:0;width:100%;height:auto;margin:.5rem 0;background-color:transparent;min-width:unset;-webkit-box-shadow:unset;-moz-box-shadow:unset;box-shadow:unset;-webkit-transform:unset;-moz-transform:unset;-ms-transform:unset;-o-transform:unset;transform:unset;-webkit-transition:unset;-o-transition:unset;-moz-transition:unset;transition:unset}
.navigation .header_nav li.sub_dr_down .sub_sub_menu::after,.navigation .header_nav li.sub_dr_down .sub_sub_menu::before{display:none}
.navigation .header_nav li.sub_dr_down .sub_sub_menu > li{border-bottom:none}
.navigation .header_nav li.sub_dr_down .sub_sub_menu > li > a:not(.button){font-size:1.5rem;line-height:1.4;border-bottom:none;padding:.8rem 0;margin:0 auto;max-width:80%;text-align:center}
.navigation .header_nav li.sub_dr_down.visible_sub > a:not(.button)::after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.navigation .header_nav li.sub_dr_down.visible_sub .sub_sub_menu{display:block;opacity:1;visibility:visible}
.mobile_phone{display:block}
}
@media only screen and (max-width: 450px) {
.navigation{right:-100%;width:100%}
.mobile_phone{font-size:2rem}
.mobile_phone svg{width:1.7rem;height:1.7rem}
}
@media (orientation: landscape) and (max-height: 450px) {
.mobile_phone{display:none}
footer{padding-bottom:0}
}SCSS
/* Vars */
$font: 'Nunito Sans', sans-serif;
$cb: #000000;
$white: #ffffff;
$main: #09a5be;
$nav_btn_line: $main;
$nav_btn_color: $main;
@keyframes slideDown {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 2.4rem 0;
z-index: 999;
transition: 0.2s;
background-color: $white;
.header_row {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.header_col_1 {
width: 21.6rem;
}
.header_col_2 {
width: calc(100% - 21.6rem);
text-align: right;
padding: 0 0 0 2rem;
}
.header_logo {
display: inline-block;
position: relative;
img {
width: 25.5rem;
}
}
.top_menu {
display: flex;
justify-content: flex-end;
align-items: center;
.social {
margin: 0 2.6rem 0 0;
a {
margin:0 2.2rem 0 0;
.icon, img {
width: 2.8rem;
height: 2.8rem;
}
}
}
}
.phone_block {
display: flex;
.phone {
font-size: 3.2rem;
line-height: 1;
font-weight: 600;
color: $cb;
transition: .3s linear;
.icon {
width: 3.2rem;
height: 3.2rem;
color: $main;
transition: .3s linear;
}
}
}
&.fixed {
position: fixed;
animation: slideDown .7s;
box-shadow: 0 0 1.5rem 0 rgba($cb, .2);
padding: 1rem 0;
.header_logo {
img {
width: 13rem;
}
}
.top_menu {
display: none;
}
.navigation {
margin: 0;
}
}
}
.navigation {
margin: 1rem 0 0;
.header_nav {
display: flex;
justify-content: flex-end;
align-items: center;
> li {
> a:not(.button) {
font: 400 1.6rem $font;
color: $cb;
text-transform: uppercase;
display: block;
white-space: nowrap;
padding: 0 2rem;
position: relative;
transition: .3s linear;
&::after {
content: "";
position: absolute;
left: 51%;
right: 51%;
bottom: 0;
display: block;
background-color: $main;
height: 0.1rem;
transition-property: left,right;
transition-duration: .3s;
transition-timing-function: ease-out;
z-index: 3;
}
}
&.active {
> a:not(.button) {
font-weight: 700;
color: $main;
}
}
&:nth-last-child(2) {
> a:not(.button) {
padding: 0 0 0 2rem;
}
}
&.dr_down {
position:relative;
}
&.header_btn {
padding: 0 0 0 1rem;
}
&.mobile_social {
display: none;
}
}
.sub_menu, .sub_sub_menu {
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 3;
min-width: 25rem;
background-color: $main;
transition: all .3s ease-in-out;
box-shadow: 0 0 .3rem rgba($cb, .1);
transform: translate3d(0, 1rem, 0);
> li {
border-bottom: .1rem solid rgba($white, .1);
&:last-child {
border-bottom: none;
}
> a:not(.button) {
font-size: 1.4rem;
color: $white;
display: block;
padding: .9rem 1.5rem .7rem;
white-space: pre-wrap;
text-align: left;
text-transform: uppercase;
transition: .3s linear;
}
}
}
.sub_menu {
top: 100%;
left: 2rem;
margin: .6rem 0 0;
&::before {
content: '';
position: absolute;
left: 1rem;
bottom: 100%;
display: block;
border-bottom: .6rem solid $main;
border-left: .6rem solid transparent;
border-right: .6rem solid transparent
}
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
display: block;
width: 100%;
height: 1rem;
}
> li {
&.sub_dr_down{
position:relative;
&::after {
content: "";
position: absolute;
top: 50%;
right: 1rem;
transform: translate(0, -50%);
display: block;
width: 0;
height: 0;
background-color: rgba($cb, 0);
border-style: solid;
border-width: 0.8rem 0 0.8rem 0.8rem;
border-color: rgba($cb, 0) rgba($cb, 0) rgba($cb, 0) $white;
z-index: 1;
}
> a {
padding: 0.9rem 2.5rem 0.7rem 1.5rem;
}
}
}
}
.sub_sub_menu {
top: 0;
left: 100%;
}
}
}
.navigation .header_nav > li.dr_down:focus .sub_menu, .navigation .header_nav li.sub_dr_down:focus .sub_sub_menu {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
.navigation_btn {
display: none;
width: 4rem;
height: 2.4rem;
position: absolute;
top: 1rem;
right: 2rem;
overflow: visible;
cursor: pointer;
transition-property: opacity;
transition-duration: .15s;
transition-timing-function: linear;
z-index: 600;
.hamburger_box {
display: block;
width: 4rem;
height: .4rem;
border-radius: .4rem;
background-color: $nav_btn_color;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
transition-property: transform;
transition-duration: .075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
&::before, &::after {
content: "";
display: block;
width: 4rem;
height: .4rem;
border-radius: .4rem;
background-color: $nav_btn_color;
position: absolute;
transition-property: transform;
transition-duration: .15s;
transition-timing-function: ease;
}
&::before {
top: -1rem;
transition: top .075s .12s ease, opacity .075s ease;
}
&::after {
bottom: -1rem;
transition: bottom .075s .12s ease, transform .075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
}
&.is_open {
.hamburger_box {
transform: translate(0, -50%)rotate(45deg);
transition-delay: .12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
background-color: $nav_btn_color;
&::before, &::after {
background-color: $nav_btn_color;
}
&::before {
top: 0;
opacity: 0;
transition: top .075s ease, opacity .075s .12s ease;
}
&::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom .075s ease, transform .075s .12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
}
}
p {
display: block;
font-size: 1.4rem;
font-weight: 400;
color: $nav_btn_color;
margin: 0;
position: absolute;
bottom: -2.5rem;
left: 50%;
transform: translate(-50%, 0);
}
}
.mobile_phone {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: none;
padding: .5rem 0;
font: 700 3rem $font;
background-color: $main;
color: $white;
text-align: center;
user-select: none;
z-index: 300;
svg {
width: 2.4rem;
height: 2.4rem;
}
}
.dark_overlay.nav_opened::after {
content: "";
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
background-color: $cb;
opacity: .8;
z-index: 2;
}
@media only screen and (min-width: 993px) {
.navigation .header_nav > li.dr_down:hover .sub_menu, .navigation .header_nav li.sub_dr_down:hover .sub_sub_menu {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0)
}
}
@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
.header .phone_block .phone:hover {color: $main}
.navigation .header_nav > li > a:not(.button):hover {color: $main}
.navigation .header_nav > li > a:not(.button):hover::after {left: 2rem;right: 2rem}
.navigation .header_nav > li.dr_down > a:not(.button):hover::after {left: 5rem}
.navigation .header_nav .sub_menu > li > a:not(.button):hover, .navigation .header_nav .sub_sub_menu > li > a:not(.button):hover {color: rgba($white, 0.5)}
}
@media only screen and (max-width: 992px) {
.header, .header.fixed{padding:1.5rem 0}
.header .header_logo img,.header.fixed .header_logo img{width:13rem}
.header {
.header_col_1 {
width: calc(100% - 7rem);
}
.header_col_2 {
width: 7rem;
}
.navigation_btn {
display: block
}
.top_menu {
display: none
}
}
.navigation {
position: fixed;
top: 0;
right: -36rem;
z-index:100;
width: 36rem;
height:100vh;
margin: 0;
overflow: hidden;
background-color: $cb;
transition: right .3s ease-in;
&.nav_opened{
right:0;
transition: right .3s ease-out;
}
.header_nav {
display: block;
margin: 9rem 0 0;
padding: 0 1.5rem;
height: calc(100vh - 16rem);
overflow-y: auto;
> li {
display: block;
width: 100%;
> a:not(.button) {
display: block;
font-size: 2rem;
font-weight: 400;
color: $white;
text-align: center;
text-transform: uppercase;
padding: 0.9rem 0;
width: 100%;
margin: 0 auto;
&::after {
display: none;
}
}
&.dr_down {
> a:not(.button) {
&::after {
content: '';
position: relative;
top: 0;
left: auto !important;
right: -1.3rem;
display: inline-block;
width: 0;
height: 0;
background-color: transparent;
border-style: solid;
border-width: .8rem 0 .8rem .8rem;
border-color: transparent transparent transparent $white;
z-index: 1
}
}
&.active {
> a:not(.button) {
&::after {
border-color: transparent transparent transparent $main;
}
}
}
.sub_menu {
display: none;
position: relative;
top: 100%;
left: 0;
width: 100%;
height: auto;
margin: 1rem 0;
background-color: transparent;
min-width: unset;
box-shadow: unset;
transform: unset;
transition: unset;
&::after, &::before {
display: none;
}
> li {
border-bottom: none;
&.sub_dr_down{
&::after {
display: none;
}
}
> a:not(.button) {
font-size: 1.7rem;
line-height: 1.4;
border-bottom: none;
padding: .8rem 0;
margin: 0 auto;
max-width: 80%;
text-align: center;
}
}
}
&.visible_sub {
> a:not(.button) {
&::after {
transform: rotate(90deg)
}
}
.sub_menu {
display: block;
opacity: 1;
visibility: visible;
}
}
}
&.header_btn {
padding: 1rem 3rem;
.button {
display: block;
width: 100%;
}
}
&.mobile_social {
display: block;
.social {
text-align: center;
margin: 1rem 0 0;
a {
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0 1rem;
}
}
}
}
li {
&.sub_dr_down {
> a:not(.button) {
&::after {
content: '';
position: relative;
top: .3rem;
left: auto !important;
right: -1.3rem;
display: inline-block;
width: 0;
height: 0;
background-color: transparent;
border-style: solid;
border-width: .8rem 0 .8rem .8rem;
border-color: transparent transparent transparent $white;
z-index: 1
}
}
&.active {
> a:not(.button) {
&::after {
border-color: transparent transparent transparent $main;
}
}
}
.sub_sub_menu {
display: none;
position: relative;
top: 100%;
left: 0;
width: 100%;
height: auto;
margin: .5rem 0;
background-color: transparent;
min-width: unset;
box-shadow: unset;
transform: unset;
transition: unset;
&::after, &::before {
display: none;
}
> li {
border-bottom: none;
> a:not(.button) {
font-size: 1.5rem;
line-height: 1.4;
border-bottom: none;
padding: .8rem 0;
margin: 0 auto;
max-width: 80%;
text-align: center;
}
}
}
&.visible_sub {
> a:not(.button) {
&::after {
transform: rotate(90deg)
}
}
.sub_sub_menu {
display: block;
opacity: 1;
visibility: visible;
}
}
}
}
}
}
.mobile_phone {
display: block;
}
}
@media only screen and (max-width: 450px) {
.navigation {right: -100%;width: 100%}
.mobile_phone {font-size: 2rem}
.mobile_phone svg {width: 1.7rem;height: 1.7rem}
}
@media (orientation: landscape) and (max-height: 450px) {
.mobile_phone{display:none}
footer{padding-bottom:0}
}JavaScript
$(window).on('scroll load resize', function () {
var curPos = $(document).scrollTop(),
fixPos = 400;
if ($(window).width() <= 992) fixPos = 100;
if (curPos >= fixPos) {
$('.header').addClass('fixed');
} else {
$('.header').removeClass('fixed');
}
});
$('.navigation_btn').on('click', function () {
$(this).toggleClass('is_open');
if ($(this).hasClass('is_open')) {
$(this).find('p').html('CLOSE')
} else {
$(this).find('p').html('MENU');
$('.navigation').removeClass('show_sub');
$('body').removeClass('no_scroll');
}
$('.dark_overlay').toggleClass('nav_opened');
$('.navigation').toggleClass('nav_opened');
if ($(this).hasClass('is_open')) {
$('body').addClass('no_scroll');
} else {
$('body').removeClass('no_scroll');
}
});
$('.dr_down > a').on('click', function (e) {
var parent = $(this).closest('li');
var userAgent = navigator.userAgent.toLowerCase();
var isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
if ($(window).width() <= 992) {
e.preventDefault();
if (parent.hasClass('visible_sub')) {
$('.dr_down').removeClass('visible_sub');
$('.sub_dr_down').removeClass('visible_sub');
} else {
$('.dr_down').removeClass('visible_sub');
parent.addClass('visible_sub');
$('.sub_dr_down').removeClass('visible_sub');
}
}
if (isTablet) {
e.preventDefault();
}
});
$('.sub_dr_down > a').on('click', function (e) {
var parent = $(this).closest('li');
var userAgent = navigator.userAgent.toLowerCase();
var isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
if ($(window).width() < 992) {
e.preventDefault();
if (parent.hasClass('visible_sub')) {
$('.sub_dr_down').removeClass('visible_sub');
} else {
$('.sub_dr_down').removeClass('visible_sub');
parent.addClass('visible_sub');
}
}
if (isTablet) {
e.preventDefault();
}
});
$('.dark_overlay').click(function () {
$(this).removeClass('nav_opened');
$('body').removeClass('no_scroll');
$('.navigation').removeClass('nav_opened show_sub');
$('.navigation_btn').removeClass('is_open');
$('.navigation_btn').find('p').html('MENU');
});
$('.header [data-modals]').click(function () {
if ($(window).width() <= 992) {
$('body').removeClass('no_scroll');
$('.dark_overlay').removeClass('nav_opened');
$('.navigation').removeClass('nav_opened show_sub');
$('.navigation_btn').removeClass('is_open');
$('.navigation_btn').find('p').html('MENU');
}
});