1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.
  2. Bonjour tout le monde ! Veillez consulter la Politique de forum pour comprendre nos règles, Merci a vous !
    Rejeter la notice

WB comment appeler composant web avec button webdev et intgrer code codpen urgent

Discussion dans 'Webdev' créé par doctor_M, Juil 6, 2019.

  1. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    je veux integrer codpen.io template ou un example templatemonster dans mon projet
    j 'ai creer comopsant web et j'integre code
    mais je veut creer un button et faire apparaitre le menu etle cacher
    ------------------code html-------------
    <div id="menu-btn" onClick="showMenu(true)">MENU<i class="fa fa-bars"></i></div>

    <div id="menu__panel">
    <i id="menu__close" class="menu__close fa fa-angle-left fa-2x" onClick="showMenu(false)"></i>
    <ul class="menu">
    <li class="menu-item"><a href="

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    "><i class="fa fa-home fa-2x"></i>HOME</a></li>
    <li class="menu-item"><a href="

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    "><i class="fa fa-users fa-2x"></i>TEAM</a></li>
    <li class="menu-item"><a href="

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    "><i class="fa fa-cubes fa-2x"></i>PRODUCTS</a></li>
    <li class="menu-item"><a href="

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    "><i class="fa fa-shopping-cart fa-2x"></i>PRICING</a></li>
    <li class="menu-item"><a href="

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    "><i class="fa fa-envelope fa-2x"></i>CONTACT</a></li>
    </ul>
    </div>
    --------------------------------------------CSS------------------------
    // -----------------------------------------
    $color1:

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ;
    $color2:

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ;
    @import url(

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!


    // -----------------------------------------
    div {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color:

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ;
    font-family: 'Open Sans', sans-serif;
    color:

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ;
    }

    h1 {
    padding: 0 20px;
    font-family: 'Oleo Script', sans-serif;
    font-size: 4em;
    border-top: 5px solid;
    border-bottom: 5px solid;
    }

    a {
    text-decoration: none;
    color: inherit;
    }

    .fadeInDown {
    opacity: 1 !important;
    transform: translateY(40px) !important;
    }

    #menu-btn {
    position: absolute;
    top: 50px;
    right: 20px;
    padding: 10px 20px;
    border: 1px solid transparent;
    /* To avoid icon movement on hover */
    font-weight: 300;
    user-select: none;
    transition: border-color 0.3s;
    transform: translateY(-50%);
    i {
    margin-left: 10px;
    }
    &:hover {
    cursor: pointer;
    border-color:

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    ;
    }
    }

    #menu__panel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 300px;
    z-index: 9999;
    background-color: $color1;
    box-shadow: -2px 2px 20px rgba(

    Bonjour visiteur, Merci de vous Inscrire ou de vous connectez pour voir les liens!

    , 0.5);
    user-select: none;
    transform: translateX(300px);
    transition: transform 0.5s;
    }

    .menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .menu-item {
    width: 100%;
    height: 60px;
    opacity: 0;
    transform: translateY(0);
    transition: all 0.3s;
    &:hover {
    background-color: $color2;
    }
    i {
    margin: 0 10px;
    }
    a {
    display: inline-block;
    width: 100%;
    height: 70px;
    padding-left: 50px;
    line-height: 70px;
    }
    }

    .menu__close {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    transition: transform 0.5s;
    &:hover {
    cursor: pointer;
    }
    }
    ---------------------------------------javascript---------------------------
    function showMenu(menu) {

    var angle = '0deg',
    slide = '300px';

    if (menu) {
    angle = '180deg';
    slide = '0';
    }

    // Slide panel
    $("#menu__panel").css({
    transform: "translateX(" + slide + ")"
    });

    // Rotate icon
    setTimeout(function() {
    $("#menu__close").css({
    transform: "rotate(" + angle + ")"
    });
    }, 300);

    // Animate menu items
    $(".menu-item").each(function(i) {
    var row = $(this);
    setTimeout(function() {
    menu && row.addClass('fadeInDown');
    !menu && row.removeClass('fadeInDown');
    }, 100 * i);
    });

    }
    -------------------------------------
    le probleme je veut changer btn menu creer pardefaut code html par un button webdev et fait affichage de menu par la fonction show-menu()
     
    Tags:
  2. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    probleme resolu j'a
     
  3. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    problème résolu j’ai trouve la solution
     
  4. LAPIPE2018

    LAPIPE2018 Active Member
    MEMBRE WX

    Inscrit:
    Fev 17, 2018
    Messages:
    649
    J'aime reçus:
    228
    Bonsoir,
    Je voudrais qu'on discute de comment tu as fait. Je voudrais faires la même chose que toi, mais , mettre des fonctions ou des pages dans les optiosn du menu. Pouvons nous en discuter ?
    Merci
     

Partager cette page

Chargement...