PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → codepen webdev23 executer show menu depuis button webdev
codepen webdev23 executer show menu depuis button webdev
Débuté par Maher_unlocker, 06 juil. 2019 17:10 - 1 réponse
Membre enregistré
12 messages
Posté le 06 juillet 2019 - 17:10
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="#home"><i class="fa fa-home fa-2x"></i>HOME</a></li>
<li class="menu-item"><a href="#team"><i class="fa fa-users fa-2x"></i>TEAM</a></li>
<li class="menu-item"><a href="#products"><i class="fa fa-cubes fa-2x"></i>PRODUCTS</a></li>
<li class="menu-item"><a href="#pricing"><i class="fa fa-shopping-cart fa-2x"></i>PRICING</a></li>
<li class="menu-item"><a href="#contact"><i class="fa fa-envelope fa-2x"></i>CONTACT</a></li>
</ul>
</div>
--------------------------------------------CSS------------------------
// -----------------------------------------
$color1: #152A38;
$color2: #29435C;
@import url(https://fonts.googleapis.com/css…);
// -----------------------------------------
div {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #2c3e50;
font-family: 'Open Sans', sans-serif;
color: #fff;
}

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: #fff;
}
}

#menu__panel {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 300px;
z-index: 9999;
background-color: $color1;
box-shadow: -2px 2px 20px rgba(#000, 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
https://codepen.io/GKlein/pen/qNaaGz

--
unlocker
Membre enregistré
12 messages
Posté le 14 juillet 2019 - 16:44
y'a pas de solutions les amis

--
unlocker