Component Library

C Menu 

<div class="menu col-12 col-lg-10 p-0 d-lg-flex flex-lg-wrap">
    <nav class="list list-none d-flex flex-wrap align-items-center col-12 col-lg-7 order-lg-1">
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Inicio</p>
        </li>
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center active">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Hoteles</p>
        </li>
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Destinos</p>
        </li>
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Motivos de viaje</p>
        </li>
    </nav>
    <div class="booking col-12 align-self-end col-lg-2 px-5 px-lg-1 mb-3 mb-lg-0 order-lg-4">
        <button class="btn btn-round btn-round-primary text text-size-1-2 text-size-lg-1 px-3 px-lg-2 py-2 py-lg-1 mb-2 mb-lg-0 w-100 text text-uppercase text-w-bold">tus reservas</button>
    </div>
    <div class="social d-flex flex-wrap align-self-end align-self-lg-center px-4 justify-content-between pt-2 pt-lg-0 px-lg-1 order-lg-2">
        <a href="" class="d-inline-block btn btn-reset ml-lg-1">
            <img src="../../../img/icon_ins.png" alt="" class="img img-auto img-h-1-5">
        </a>
        <a href="" class="d-inline-block btn btn-reset ml-lg-1">
            <img src="../../../img/icon_tw.png" alt="" class="img img-auto img-h-1-5">
        </a>
        <a href="" class="d-inline-block btn btn-reset ml-lg-1">
            <img src="../../../img/icon_fb.png" alt="" class="img img-auto img-h-1-5">
        </a>
    </div>
    <div class="c-menu-lenguage col-1 d-none d-lg-block order-lg-3 mr-0 ml-2 position-relative">
        <span class="btn text ">
            <i class="icon fas fa-globe-americas mr-2 d-none"></i> ES <i class="icon fas fa-chevron-down mr-2 "></i>
        </span>
        <div class="wrapper position-absolute bg bg-color-white">
            <ul class="list list-none m-0 p-0 pl-0">
                <li class="item ">
                    <a href="#" class="btn text ">EN</a>
                </li>
                <li class="item ">
                    <a href="#" class="btn text ">FR</a>
                </li>
                <li class="item ">
                    <a href="#" class="btn text ">DE</a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="menu col-12 col-lg-10 p-0 d-lg-flex flex-lg-wrap">
    <nav class="list list-none d-flex flex-wrap align-items-center col-12 col-lg-7 order-lg-1">
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Inicio</p>
        </li>
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center active">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Hoteles</p>
        </li>
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Destinos</p>
        </li>
        <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
            <p class="text text-size-1-2 text-size-lg-1 m-0">Motivos de viaje</p>
        </li>
    </nav>
    <div class="booking col-12 align-self-end col-lg-2 px-5 px-lg-1 mb-3 mb-lg-0 order-lg-4">
        <button 
            class="btn btn-round btn-round-primary text text-size-1-2 text-size-lg-1 px-3 px-lg-2 py-2 py-lg-1 mb-2 mb-lg-0 w-100 text text-uppercase text-w-bold"
            >tus reservas</button>
    </div>
    <div class="social d-flex flex-wrap align-self-end align-self-lg-center px-4 justify-content-between pt-2 pt-lg-0 px-lg-1 order-lg-2">
        <a href="" class="d-inline-block btn btn-reset ml-lg-1">
            <img src="../../../img/icon_ins.png" alt="" class="img img-auto img-h-1-5">
        </a>
        <a href="" class="d-inline-block btn btn-reset ml-lg-1">
            <img src="../../../img/icon_tw.png" alt="" class="img img-auto img-h-1-5">
        </a>
        <a href="" class="d-inline-block btn btn-reset ml-lg-1">
            <img src="../../../img/icon_fb.png" alt="" class="img img-auto img-h-1-5">
        </a>
    </div>
    {{> @c-menu-lenguage
        c_menu_lenguage_class="col-1 d-none d-lg-block order-lg-3 mr-0 ml-2 position-relative"
        c_menu_lenguage_wrapper_class="position-absolute bg bg-color-white"
        c_menu_lenguage_list_class="list-none m-0 p-0"
    }}
</div>
 
/* No context defined. */
  • Content: 
    // menu component
.menu {
    @extend %transform_05;
    background-color: $color_white;
    position: absolute;
    top: 300vh;
    height: calc(100vh - 100%);
    left: 0;
    opacity: 0;
    @include breakpoint(desktop) {
        position: relative;
        top: initial;
        left: initial;
        height: initial;
        background: none;
        opacity: initial;
    }
    .list {
        min-height: 70%;
        .text {
            color: $color_primary;
            text-decoration: none;
            text-transform: uppercase;
            cursor: pointer;
            font-weight: bold;
            &:hover { color: $color_secondary; }
        }
        .item {
            &.active {
                .text {
                    color: $color_primary;
                }
            }
        }
    }
    .booking {
        svg { transform: rotate(-45deg); }
        .list {
            width: 1.5rem;
            position: absolute;
            top: 0;
            right: 0;
            padding-right: .35rem !important;
            .btn {
                font-size: .7rem;
                line-height: 60%;
            }
        }
        .item { max-height: 1.4rem; }
        &:hover {
            .list {
                .icon { color: $color_primary; }
            }
        }
    }
}

.open {
    &-menu {
        .menu {
            top: 100%;
            opacity: 1;
        }
    }
}
  • URL: /components/raw/c-menu/c-menu.scss
  • Filesystem Path: src/components/comp/c-menu/c-menu.scss
  • Size: 1.4 KB
  • Content: 
    export function menu() {

    $('.btn-open-menu').bind('click', function(){
        moveMenu();
    })
    
    function moveMenu() {
        // document.body.classList.remove('open-reserva');
        if (document.body.classList.contains('open-menu')) {
            document.body.classList.remove('open-menu');
        } else {
            document.body.classList.add('open-menu');
        };
    }
}
  • URL: /components/raw/c-menu/c-menu.ts
  • Filesystem Path: src/components/comp/c-menu/c-menu.ts
  • Size: 400 Bytes

No notes defined.