WB aide au

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

 

y a pas quelqu’un pour m'aider les développeurs

 

j’espère bien que vous m'aider les amis

 

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!

 

y'a pas autre solutions les amis