Skip to content

Instantly share code, notes, and snippets.

@iamarya2k24

iamarya2k24/index.html

Created March 15, 2020 02:26
Show Gist options
  • Save iamarya2k24/9ca40b9a7da6f5c4b73c0bf19f4b4aed to your computer and use it in GitHub Desktop.
Save iamarya2k24/9ca40b9a7da6f5c4b73c0bf19f4b4aed to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iamarya2k24 created this gist Mar 15, 2020.
    72 changes: 72 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    <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>
    7 changes: 7 additions & 0 deletions menu-similar-stripe.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Menu (similar stripe)
    ----------------------


    A [Pen](https://codepen.io/minimamente/pen/Nopygz) by [Christian Pucci](https://codepen.io/minimamente) on [CodePen](https://codepen.io).

    [License](https://codepen.io/minimamente/pen/Nopygz/license).
    9 changes: 9 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    /**
    * 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');
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    188 changes: 188 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,188 @@
    /* 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;
    }
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />