A Pen by Christian Pucci on CodePen.
Created
March 15, 2020 02:26
-
-
Save iamarya2k24/9ca40b9a7da6f5c4b73c0bf19f4b4aed to your computer and use it in GitHub Desktop.
Menu (similar stripe)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12 my-5"> | |
| <nav class="cei-header-nav"> | |
| <button class="cei-btn-menu d-block d-lg-none d-xl-none" type="button" aria-label="Toggle navigation"> | |
| <span>Menu</span> | |
| <i class="icon ion-md-menu"></i> | |
| </button> | |
| <ul id="menu-menu-header" class="container cei-menu-container"> | |
| <li id="menu-item-211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-211"><a href="#">Il Gruppo</a> | |
| <ul class="sub-menu"> | |
| <li id="menu-item-214" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-214"><a href="#">L’azienda</a></li> | |
| <li id="menu-item-213" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-213"><a href="#">Il Team</a></li> | |
| <li id="menu-item-216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-216"><a href="#">Perché scegliere noi</a></li> | |
| <li id="menu-item-215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-215"><a href="#">Partner</a></li> | |
| <li id="menu-item-212" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-212"><a href="#">Dicono di noi</a></li> | |
| </ul> | |
| </li> | |
| <li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-217"><a href="#">Aree</a> | |
| <ul class="sub-menu"> | |
| <li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218"><a href="#">Civile</a></li> | |
| <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-220"><a href="#">Industriale</a></li> | |
| <li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219"><a href="#">Hotels</a></li> | |
| <li id="menu-item-221" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221"><a href="#">Terziario</a></li> | |
| </ul> | |
| </li> | |
| <li id="menu-item-222" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-222"><a href="#">Impiantistica</a> | |
| <ul class="sub-menu"> | |
| <li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-226"><a href="#">Impianti Elettrici</a></li> | |
| <li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224"><a href="#">Domotica</a></li> | |
| <li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228"><a href="#">Trasmissione dati</a></li> | |
| <li id="menu-item-225" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-225"><a href="#">Illuminazione pubblica</a></li> | |
| <li id="menu-item-223" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-223"><a href="#">Automazioni</a></li> | |
| <li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-227"><a href="#">Opere Realizzate</a></li> | |
| </ul> | |
| </li> | |
| <li id="menu-item-229" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-229"><a href="#">Sicurezza</a> | |
| <ul class="sub-menu"> | |
| <li id="menu-item-230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-230"><a href="#">Controllo Accessi</a></li> | |
| <li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233"><a href="#">Sistemi antintrusione</a></li> | |
| <li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234"><a href="#">Videosorveglianza</a></li> | |
| <li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="#">Rilevazione incendi</a></li> | |
| <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="#">Opere realizzate</a></li> | |
| </ul> | |
| </li> | |
| <li id="menu-item-235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-235"><a href="#">Solare e rinnovabili</a> | |
| <ul class="sub-menu"> | |
| <li id="menu-item-237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="#">Fotovoltaico</a></li> | |
| <li id="menu-item-236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="#">Efficenza energetica</a></li> | |
| <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="#">Opere realizzate</a></li> | |
| </ul> | |
| </li> | |
| <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-239"><a href="#">Manutenzione</a> | |
| <ul class="sub-menu"> | |
| <li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-242"><a href="#">Come funziona?</a></li> | |
| <li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="#">A chi è rivolta?</a></li> | |
| <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-243"><a href="#">Personale qualificato</a></li> | |
| <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="#">Assistenza H24</a></li> | |
| <li id="menu-item-244" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-244"><a href="#">Verifiche periodiche</a></li> | |
| </ul> | |
| </li> | |
| <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="#">News</a></li> | |
| <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="#">Contatti</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Menu | |
| */ | |
| $('.cei-btn-menu').on('click', function() { | |
| $('ul.cei-menu-container').toggleClass('active'); | |
| }); | |
| $('li.menu-item-has-children').on('click', function() { | |
| $(this).children('ul.sub-menu').toggleClass('active'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* menu */ | |
| .cei-header-nav { | |
| border-top: 1px solid rgba(255,255,255,.2); | |
| border-bottom: 1px solid rgba(255,255,255,.2); | |
| background-color: rgba(63,59,70,.8); | |
| } | |
| ul.cei-menu-container { | |
| margin-bottom: 0; | |
| padding-top: 1rem; | |
| padding-bottom: 0; | |
| list-style: none; | |
| } | |
| ul.cei-menu-container a { | |
| color: #fff; | |
| } | |
| ul.cei-menu-container a:hover { | |
| color: #FCCF00; | |
| } | |
| ul.cei-menu-container li.menu-item-has-children { | |
| position: relative; | |
| } | |
| ul.cei-menu-container li { | |
| display: inline-block; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| line-height: 1.4; | |
| margin-right: 1.2rem; | |
| padding-bottom: 1rem; | |
| } | |
| ul.cei-menu-container li ul { | |
| position: absolute; | |
| z-index: 999; | |
| top: 38px; | |
| min-width: 220px; | |
| margin: 0; | |
| padding: 1rem 1rem 1rem 2rem; | |
| list-style: none; | |
| background-color: #2D2A38; | |
| color: #fff; | |
| border-left: 1px solid rgba(255,255,255,.2); | |
| border-bottom: 1px solid rgba(255,255,255,.2); | |
| border-right: 1px solid rgba(255,255,255,.2); | |
| -webkit-transform-origin: 50% 0%; | |
| transform-origin: 50% 0%; | |
| -webkit-transform: perspective(500px) rotateX(-90deg); | |
| transform: perspective(500px) rotateX(-90deg); | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| opacity: 0; | |
| } | |
| ul.cei-menu-container ul.sub-menu::before { | |
| content: ''; | |
| position: absolute; | |
| top: -6px; | |
| left: 0; | |
| width: 20%; | |
| height: 6px; | |
| background-color: #FCCF00; | |
| } | |
| ul.cei-menu-container > li:hover ul { | |
| -webkit-transform: perspective(500px) rotateX(0deg); | |
| transform: perspective(500px) rotateX(0deg); | |
| opacity: 1; | |
| } | |
| ul.cei-menu-container ul.sub-menu li { | |
| display: block; | |
| position: relative; | |
| text-transform: none; | |
| font-weight: normal; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0; | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| } | |
| ul.cei-menu-container ul.sub-menu li:last-child { | |
| margin-bottom: 0; | |
| } | |
| ul.cei-menu-container ul.sub-menu li a { | |
| display: block; | |
| } | |
| ul.cei-menu-container li ul li::before { | |
| content: ''; | |
| display: inline-block; | |
| position: absolute; | |
| top: 8px; | |
| left: -14px; | |
| width: 7px; | |
| height: 7px; | |
| background-color: #FCCF00; | |
| } | |
| ul.cei-menu-container li ul li:hover { | |
| padding-left: .3rem; | |
| } | |
| .cei-btn-menu { | |
| width: 100px; | |
| height: 40px; | |
| line-height: 40px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| background-color: #FCCF00; | |
| border: none; | |
| color: #3f3b46; | |
| } | |
| .cei-btn-menu span { | |
| display: inline-block; | |
| } | |
| /* Large devices (desktops, less than 1200px) */ | |
| @media (max-width: 1200px) { | |
| } | |
| /* Medium devices (tablets, less than 992px) */ | |
| @media (max-width: 992px) { | |
| .cei-header-nav { | |
| border: none; | |
| background-color: #3f3b46; | |
| } | |
| ul.cei-menu-container { | |
| text-align: right; | |
| padding: 0; | |
| max-height: 0; | |
| overflow: hidden; | |
| -webkit-transform-origin: 50% 0%; | |
| transform-origin: 50% 0%; | |
| -webkit-transform: perspective(500px) rotateX(-90deg); | |
| transform: perspective(500px) rotateX(-90deg); | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| opacity: 1; | |
| } | |
| ul.cei-menu-container.active { | |
| display: block; | |
| padding: 1rem 0; | |
| max-height: 999px; | |
| -webkit-transform: perspective(500px) rotateX(0deg); | |
| transform: perspective(500px) rotateX(0deg); | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| opacity: 1; | |
| } | |
| ul.cei-menu-container li { | |
| display: block; | |
| margin-right: 0; | |
| margin-bottom: 4px; | |
| padding-bottom: 0px; | |
| line-height: 30px; | |
| } | |
| ul.cei-menu-container li.menu-item-has-children { | |
| padding-right: 40px; | |
| } | |
| ul.cei-menu-container li.menu-item-has-children::before { | |
| content: '+'; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 30px; | |
| height: 30px; | |
| text-align: center; | |
| background-color: rgba(0,0,0,.3); | |
| border: 2px solid #FCCF00; | |
| border-top: none; | |
| border-right: none; | |
| color: #fff; | |
| } | |
| li.menu-item-has-children ul.sub-menu { | |
| display: none; | |
| position: relative; | |
| opacity: 1; | |
| top: 0; | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; | |
| -webkit-transform: perspective(500px) rotateX(0deg); | |
| transform: perspective(500px) rotateX(0deg); | |
| border: none; | |
| } | |
| ul.cei-menu-container ul.sub-menu::before { | |
| left: auto; | |
| right: 0; | |
| } | |
| li.menu-item-has-children ul.sub-menu.active { | |
| display: block; | |
| } | |
| ul.cei-menu-container li ul li::before { | |
| left: auto; | |
| right: -32px; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment