Offcanvas-Navigation
CODE
×
HTML
<div class='offcanvas-navigation-2 S_sg-version'> <div class='offcanvas-navigation-2-inner S_sg-version'><div class="menu-list-container"> <ul class="menu-list animate"> <li class="has-children"> <div class="menu-item-label">News</div> <ul> <li> <a href="https://google.com">News Overview</a> </li> <li> <a href="https://google.com">Latest In Media</a> </li> </ul> </li> <li> <a href="https://google.com">Products & Services</a> </li> <li> <a href="#">Our commitment</a> </li> <li> <a href="#">Manufacturing Impressions</a> </li> <li> <a href="#">Design Impressions</a> </li> <li> <a href="#">Who We Are</a> </li> <li class="has-children"> <div class="menu-item-label">Jobs @ Lantal</div> <ul> <li> <a href="https://google.com">News Overview</a> </li> <li> <a href="https://google.com">Latest In Media</a> </li> </ul> </li> <li class="has-children active"> <div class="menu-item-label">Get In Touch</div> <ul> <li> <a href="https://google.com">News Overview</a> </li> <li class="active"> <a href="https://google.com">Latest In Media</a> </li> </ul> </li> </ul> </div> <div class="offcanvas-contact animate"> <div class="text-uppercase">Get in touch</div> <div class="offcanvas-contact-info"> <div class="offcanvas-contact-location"> <p>Lantal Textiles AG</p> <p>Dorfgasse 5</p> <p>4900 Langenthal</p> <p>Schweiz</p> </div> <div class="offcanvas-contact-data"> <p><a href="#">+41 62 916 71 71</a></p> <p><a href="#">email01@lantal.ch</a></p> </div> </div> <div class='offcanvas-social-media'> <a href="#"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <style type="text/css"> .st0{fill:#333;} .st1{fill:#FFF;} </style> <path class="st0" d="M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z"/> <rect x="119.3" y="199.4" class="st1" width="62.3" height="187.6"/> <path class="st1" d="M150.4,173.8H150c-20.9,0-34.5-14.4-34.5-32.4c0-18.4,13.9-32.4,35.3-32.4s34.5,14,34.9,32.4 C185.7,159.4,172.2,173.8,150.4,173.8z"/> <path class="st1" d="M406.4,387h-62.3V286.7c0-25.2-9-42.4-31.6-42.4c-17.2,0-27.5,11.6-32,22.8c-1.6,4-2.1,9.6-2.1,15.2V387h-62.3 c0,0,0.8-170,0-187.6h62.3V226c8.3-12.8,23.1-31,56.2-31c41,0,71.8,26.8,71.8,84.4L406.4,387L406.4,387z"/> </svg> </a> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 600 600"> <style> .st0 {fill:#333} .st1 {fill:#fff} </style> <circle class="st0" cx="300" cy="300" r="297.5"/> <path class="st1" d="M300 123.5c-47.9 0-54 .2-72.8 1.1-18.8.9-31.6 3.8-42.8 8.2-11.6 4.5-21.5 10.5-31.3 20.4-9.8 9.8-15.8 19.7-20.4 31.3-4.4 11.2-7.4 24.1-8.2 42.8-.8 18.8-1.1 24.8-1.1 72.8 0 47.9.2 53.9 1.1 72.8.9 18.8 3.8 31.6 8.2 42.8 4.5 11.6 10.5 21.5 20.4 31.3 9.8 9.8 19.7 15.9 31.3 20.4 11.2 4.4 24.1 7.3 42.8 8.2 18.8.9 24.8 1.1 72.8 1.1 47.9 0 53.9-.2 72.8-1.1 18.8-.9 31.6-3.8 42.9-8.2 11.6-4.5 21.4-10.6 31.2-20.4 9.8-9.8 15.8-19.7 20.4-31.3 4.3-11.2 7.3-24 8.2-42.8.8-18.8 1.1-24.8 1.1-72.8 0-47.9-.2-53.9-1.1-72.8-.9-18.8-3.9-31.6-8.2-42.8-4.5-11.6-10.6-21.5-20.4-31.3-9.8-9.8-19.6-15.8-31.3-20.4-11.3-4.4-24.1-7.3-42.9-8.2-18.8-.9-24.8-1.1-72.7-1.1zm-15.8 31.8H300c47.1 0 52.7.2 71.3 1 17.2.8 26.5 3.7 32.8 6.1 8.2 3.2 14.1 7 20.3 13.2 6.2 6.2 10 12.1 13.2 20.3 2.4 6.2 5.3 15.6 6.1 32.8.8 18.6 1 24.2 1 71.3 0 47.1-.2 52.7-1 71.3-.8 17.2-3.7 26.5-6.1 32.8-3.2 8.2-7 14.1-13.2 20.3-6.2 6.2-12 10-20.3 13.2-6.2 2.4-15.6 5.3-32.8 6.1-18.6.8-24.2 1-71.3 1-47.1 0-52.7-.2-71.3-1-17.2-.8-26.5-3.7-32.8-6.1-8.2-3.2-14.1-7-20.3-13.2-6.2-6.2-10-12.1-13.2-20.3-2.4-6.2-5.3-15.6-6.1-32.8-.8-18.6-1-24.2-1-71.3 0-47.1.2-52.7 1-71.3.8-17.2 3.7-26.5 6.1-32.8 3.2-8.2 7-14.1 13.2-20.3 6.2-6.2 12.1-10 20.3-13.2 6.2-2.4 15.6-5.3 32.8-6.1 16.3-.8 22.6-1 55.5-1zm110 29.3c-11.7 0-21.2 9.5-21.2 21.2s9.5 21.2 21.2 21.2 21.2-9.5 21.2-21.2-9.5-21.2-21.2-21.2zM300 209.4c-50.1 0-90.6 40.6-90.6 90.6 0 50.1 40.6 90.6 90.6 90.6 50.1 0 90.6-40.6 90.6-90.6 0-50.1-40.5-90.6-90.6-90.6zm0 31.8c32.5 0 58.8 26.3 58.8 58.8s-26.3 58.8-58.8 58.8-58.8-26.3-58.8-58.8 26.3-58.8 58.8-58.8z"/> </svg> </a> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0" y="0" style="enable-background:new 0 0 512 512" version="1.1" viewBox="0 0 512 512"> <style> .st0 {fill:#333} .st1 {fill:#fff} </style> <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0z" class="st0" /> <path d="M367.1 349.6c-22.2 5.9-111.1 5.9-111.1 5.9s-88.9 0-111.1-5.9c-12.2-3.3-21.9-12.9-25.2-25.1-5.9-22.2-5.9-68.5-5.9-68.5s0-46.3 5.9-68.5c3.3-12.2 12.9-21.9 25.2-25.2 22.2-5.9 111.1-5.9 111.1-5.9s88.9 0 111.1 5.9c12.2 3.3 21.9 12.9 25.2 25.2 5.9 22.2 5.9 68.5 5.9 68.5s0 46.3-5.9 68.5c-3.3 12.2-12.9 21.8-25.2 25.1" class="st1" /> <path d="m227.6 298.7 73.9-42.7-73.9-42.7z" class="st0" /> </svg> </a> </div> </div></div> </div>
CSS
div.offcanvas-navigation-2 { background-color: var(--bc3); color: var(--fc10); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; width: 100%; height: 100%; position: fixed; top: 0; left: -101vw; z-index: 99999; overflow-y: auto; overflow-x: hidden; font-family: var(--font-of-offcanvas-menue-1); font-style: var(--font-of-offcanvas-menue-2); font-weight: var(--font-of-offcanvas-menue-3); } div.offcanvas-navigation-2 a.menue-item::before { content: ''; margin-right: 0; margin-left: 0; } div.offcanvas-navigation-2 a.menue-item.active::before { content: '—'; margin-right: 12px; margin-left: -12px; } div.offcanvas-navigation-2 a.menue-item { display: block; width: calc(100% - 30px); margin-bottom: 28px; padding: 0 18px; font-size: var(--fs-s); color: var(--fc10); } div.offcanvas-navigation-2 a.menue-item.selected, div.offcanvas-navigation-2 a.menue-item.selected:hover { cursor: default; color: var(--fsc2) !important; } div.offcanvas-navigation-2 li.dropdown { display: block; } div.offcanvas-navigation-2 .close { position: absolute; cursor: pointer; opacity: 0; transition: 400ms ease-in-out; transition-property: all; border: 12px solid transparent; right: 8px; top: 0px; width: 64px; height: 64px; } div.offcanvas-navigation-2.open .close { position: fixed; opacity: 1; transition: 400ms ease-in-out; transition-property: all; } @media (hover: hover) { div.offcanvas-navigation-2 .close:hover { transform: rotate(180deg); } } div.offcanvas-navigation-2 nav.subnavi { box-shadow: none !important; padding: 0 !important; position: relative !important; margin: 0 !important; top: 0 !important; left: 0 !important; display: block !important; max-height: 0; overflow: hidden; transition: all 400ms ease-in-out; opacity: 0; } div.offcanvas-navigation-2 nav.subnavi.show { max-height: 500px; margin: 0px 0 32px 0 !important; overflow: visible; transition: all 400ms ease-in-out; opacity: 1; } div.offcanvas-navigation-2 nav.subnavi a.menue-item { font-size: var(--fs-xs) !important; margin: 0 0 20px !important; max-width: calc(100vw - 100px) !important; } div.offcanvas-navigation-2 nav.navi-2 a.menue-item { padding: 0 18px; margin-bottom: 22px; font-size: var(--fs-xxs); } div.offcanvas-navigation-2 nav.navi-2 .language-switch a.menue-item.selected { text-decoration: underline !important; text-decoration-style: solid !important; font-weight: bolder; } div.offcanvas-navigation-2 nav.navi-2 { position: relative; margin-top: 64px; top: unset; left: unset; right: unset; text-align: left; display: block !important; } .offcanvas-navigation-2 .language-switch a.menue-item { display: inline; } div.styleguide.segments div.offcanvas-navigation-2 { left: 0; position: relative; display: block; opacity: 1; } div.styleguide.segments div.offcanvas-navigation-2 .close { position: absolute; opacity: 1; } /* Eniko's codes */ :root { --navBg: rgb(38, 38, 38); --black: rgb(0, 0, 0); --white: rgb(255, 255, 255); --red: rgb(191, 58, 52); --lightGrey: rgb(216, 209, 201); --darkBeige: rgb(206, 197, 186); } @-webkit-keyframes logoColorTransition { 0% { fill: var(--bc3); } 90% { fill: var(--bc3); } 100% { fill: #fff; } } @-webkit-keyframes showElement { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes menuList { 0% { margin-left: 15px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } div.offcanvas-navigation-2 { left: 100%; overflow: hidden; padding: 0; transition: none; } div.offcanvas-navigation-2 p, div.offcanvas-navigation-2 a { color: var(--white); } div.offcanvas-navigation-2-inner { height: calc(100% - 250px); margin: 150px auto 100px auto; max-width: 1400px; position: relative; } div.offcanvas-navigation-2.open { left: 0; transition: left .2s ease-in; transition-delay: .2s; } /* OPEN OFFCANVAS ICON AND HEADER CHANGES, ANIMATIONS */ .menu-open-wrapper { --ind-p: 5px; align-items: center; border: none; cursor: pointer; display: flex; height: 40px; justify-content: center; position: relative; right: clamp(calc(var(--header-vp-min) + var(--ind-p)), calc(var(--header-vp-ideal) + var(--ind-p)), calc(var(--header-vp-max) + var(--ind-p))); width: 40px; } .menu-open-wrapper svg.menue-icon { right: unset; } .menu-open-wrapper .offcanvas-close-icon-wrapper { position: absolute; z-index: -1; } .offcanvas-close-icon-wrapper { align-items: center; display: flex; height: 40px; justify-content: center; width: 40px; } .offcanvas-close-icon { height: 2.5px; position: relative; width: 32px; } .offcanvas-close-icon span { background-color: var(--black); border-radius: 5px; display: block; height: 1.5px; position: absolute; transition: transform .3s linear; width: 32px; } .offcanvas-close-icon.animate span:first-of-type { background-color: var(--white); transform: rotate(-45deg); transition: transform .3s linear, background-color .5s linear; } .offcanvas-close-icon.animate span:last-of-type { background-color: var(--white); transform: rotate(45deg); transition: transform .3s linear, background-color .5s linear; } body.no-scroll .menu-open-wrapper svg.menue-icon { opacity: 0; z-index: -1; } body.no-scroll header.sticky { backdrop-filter: none !important; background-color: transparent; border: 0; z-index: 999999; } body.no-scroll svg.logo > path { animation: logoColorTransition .3s ease .2s normal forwards; } /* OFFCANVAS LEFT-BOTTOM PART (CONTACT INFORMATION) */ div.offcanvas-contact { bottom: 0; display: flex; flex-direction: column; max-width: 376px; opacity: 0; position: absolute; row-gap: 38px; } div.offcanvas-contact .text-uppercase { color: var(--white); font-size: 14px; font-weight: 500; letter-spacing: 1.4px; } div.offcanvas-contact-info { display: flex; column-gap: 24px; justify-content: space-between; } div.offcanvas-contact-location { width: 196px; } div.offcanvas-contact-location > p { color: var(--lightGrey); font-size: 18px; letter-spacing: 0.72px; line-height: 26px; margin-bottom: 5px; margin-top: 0; } div.offcanvas-contact-location > p:last-of-type { margin-bottom: 0 } div.offcanvas-contact-data > p { margin-bottom: 10px; margin-top: 0; } div.offcanvas-contact-data > p:last-of-type { margin-bottom: 0; margin-top: 0; } div.offcanvas-contact-data > p > a { color: var(--white); font-size: 18px; letter-spacing: 0.72px; line-height: 30px; text-decoration: none; } div.offcanvas-contact-data > p > a:hover { color: var(--darkBeige); } div.offcanvas-contact.animate { animation: showElement .8s ease .6s forwards; } /* SOCIAL MEDIA ICONS */ div.offcanvas-navigation-2 div.offcanvas-social-media { display: flex; column-gap: 15px; } div.offcanvas-navigation-2 div.offcanvas-social-media > a { align-items: center; background-color: var(--lightGrey); border-radius: 50%; display: flex; height: 46px; justify-content: center; margin: 0; transition: background-color .15s ease-in; width: 46px; } div.offcanvas-navigation-2 div.offcanvas-social-media > a > svg { height: 32px; width: 32px; } div.offcanvas-navigation-2 div.offcanvas-social-media > a.instagram > svg, div.offcanvas-navigation-2 div.offcanvas-social-media > a.youtube > svg { height: 38px; width: 38px; } div.offcanvas-navigation-2 div.offcanvas-social-media > a > svg .st0, div.offcanvas-navigation-2 div.offcanvas-social-media > a > svg .st1 { transition: fill .15s ease-in; } div.offcanvas-navigation-2 div.offcanvas-social-media > a:hover { background-color: var(--red); } div.offcanvas-navigation-2 div.offcanvas-social-media > a:hover svg .st0 { fill: var(--red); } div.offcanvas-navigation-2 div.offcanvas-social-media > a:hover svg .st1 { fill: var(--white); } /* OFFCANVAS MENU */ div.offcanvas-navigation-2 .menu-list-container { height: auto; margin-left: 568px; max-height: calc(100vh - 156px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } div.offcanvas-navigation-2 .menu-list-container::-webkit-scrollbar { background: transparent; width: 0; } div.offcanvas-navigation-2 .menu-list-container::-moz-scrollbar { background: transparent; width: 0; } div.offcanvas-navigation-2 ul.menu-list li { align-items: center; color: var(--darkBeige); display: flex; font-size: 48px; font-weight: 200; letter-spacing: 2.5px; line-height: 60px; margin: 0 0 37px 20px; opacity: 0; text-transform: capitalize; width: max-content; } div.offcanvas-navigation-2 ul.menu-list li > a { color: var(--darkBeige); } div.offcanvas-navigation-2 ul.menu-list li:not(.active):hover, div.offcanvas-navigation-2 ul.menu-list li:not(.active):hover > a { color: var(--white); } div.offcanvas-navigation-2 ul.menu-list li.active, div.offcanvas-navigation-2 ul.menu-list li.active > a { color: var(--white); } div.offcanvas-navigation-2 ul.menu-list li a { text-decoration: none; } div.offcanvas-navigation-2 ul.menu-list li.has-children { align-items: flex-start; flex-direction: column; } div.offcanvas-navigation-2 ul.menu-list li.has-children > div.menu-item-label { align-items: center; cursor: pointer; display: flex; } div.offcanvas-navigation-2 ul.menu-list li:not(.has-children)::before, div.offcanvas-navigation-2 ul.menu-list li.has-children > div.menu-item-label::before { font-size: 30px; margin-right: 22.35px; opacity: 0; position: initial; transform: none; } div.offcanvas-navigation-2 ul.menu-list li.has-children::before { display: none; } div.offcanvas-navigation-2 ul.menu-list li.has-children > div.menu-item-label::before { content: '+' } div.offcanvas-navigation-2 ul.menu-list li:not(.has-children, li.has-children ul li):hover::before, div.offcanvas-navigation-2 ul.menu-list li.active:not(.has-children, li.has-children ul li)::before, div.offcanvas-navigation-2 ul.menu-list li.has-children:hover > div.menu-item-label::before, div.offcanvas-navigation-2 ul.menu-list li.has-children.active > div.menu-item-label::before { opacity: 1; } div.offcanvas-navigation-2 ul.menu-list li ul { max-height: 0; transition: max-height 0.15s ease; } div.offcanvas-navigation-2 ul.menu-list li.has-children ul li { display: none; line-height: normal; margin: 27px 0 0; padding-left: 0; pointer-events: none; } div.offcanvas-navigation-2 ul.menu-list li.has-children ul li a { color: var(--darkBeige); font-size: 24px; font-weight: 300; letter-spacing: 1.2px; margin-left: 2px; text-transform: capitalize; } div.offcanvas-navigation-2 ul.menu-list li.has-children ul li.active a { color: var(--white); } div.offcanvas-navigation-2 ul.menu-list li.has-children.active ul { max-height: 100vh; transition: max-height 0.25s ease; } div.offcanvas-navigation-2 ul.menu-list li.has-children.active ul li { display: flex; pointer-events: all; animation: showElement 1.5s ease forwards; } div.offcanvas-navigation-2 ul.menu-list.animate li:not(ul li ul li) { animation: menuList .5s ease forwards; } @media print,screen and (max-width: 1489px) { div.offcanvas-navigation-2-inner { max-width: unset; margin-left: 64px; margin-right: 64px; } } @media print,screen and (max-width: 1399px) { div.offcanvas-contact-info { flex-direction: column; row-gap: 18px; } div.offcanvas-navigation-2 .menu-list-container { margin-left: auto; max-width: 55%; } div.offcanvas-navigation-2 ul.menu-list li { font-size: 40px; letter-spacing: 2px; margin-bottom: 28px; max-width: 100%; } } @media print,screen and (max-width: 772px) { div.offcanvas-navigation-2-inner { height: calc(100% - 246px); margin: 166px 48px 80px 48px; } } @media print,screen and (max-width: 760px) { div.offcanvas-navigation-2.open { overflow-y: auto; } .no-scroll svg.logo { opacity: 0; } div.offcanvas-navigation-2-inner { height: auto; margin: 119.5px 40px 122px 40px; } div.offcanvas-navigation-2 .menu-list-container { max-height: unset; max-width: 100%; overflow: hidden; } div.offcanvas-navigation-2 ul.menu-list li { font-size: 26px; letter-spacing: 1.3px; line-height: 32px; } div.offcanvas-navigation-2 ul.menu-list li:not(.has-children)::before, div.offcanvas-navigation-2 ul.menu-list li.has-children > div.menu-item-label::before { font-size: 20px; margin-right: 8px; } div.offcanvas-navigation-2 ul.menu-list li.has-children ul li { margin-top: 25px; } div.offcanvas-navigation-2 ul.menu-list li.has-children ul li a { font-size: 18px; letter-spacing: 0.9px; } div.offcanvas-contact { position: initial; row-gap: 23px; } div.offcanvas-navigation-2 .menu-list-container { height: auto; margin-bottom: 150px; margin-left: -40px; } }
JS
Offcanvas-Navigation
Last Edit: Nov 9, 2023, 11:55am
×
News
News Overview
Latest In Media
Products & Services
Our commitment
Manufacturing Impressions
Design Impressions
Who We Are
Jobs @ Lantal
News Overview
Latest In Media
Get In Touch
News Overview
Latest In Media
Get in touch
Lantal Textiles AG
Dorfgasse 5
4900 Langenthal
Schweiz
+41 62 916 71 71
email01@lantal.ch