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 aide au

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

  1. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    salut tout le monde je veut creer un page sliding qui s'affiche lors de clic sur button
    je veut faire comme example cette site j'ai tester avec notion cellule a l'exterieur de pad et change posiion mais probleme je veut adapter sur tout les platforme
    si vous avez idée
    comme example de site

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

    ou

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


    merci bcp
     
    Tags:
  2. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    y a pas quelqu’un pour m'aider les développeurs
     
  3. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    j’espère bien que vous m'aider les amis
     
  4. popoy

    popoy Well-Known Member
    MEMBRE WX

    Inscrit:
    Fev 23, 2018
    Messages:
    2,879
    J'aime reçus:
    1,531
    Tu créer un champ cellule dimensionné pour un smartphone avec ancrage en hauteur.
    il existe 2 exemples,
    déplacement champ cellule et menu contextuelle.
     
  5. haythem

    haythem New Member

    Inscrit:
    Août 3, 2018
    Messages:
    4
    J'aime reçus:
    3
    Il faut mieux utiliser la notion des plans.
     
  6. 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()



    ---------------------------------------------------
    code source de code menu

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

     
  7. doctor_M

    doctor_M Member

    Inscrit:
    Juil 3, 2019
    Messages:
    55
    J'aime reçus:
    6
    y'a pas autre solutions les amis
     

Partager cette page

Chargement...