FORUMS PROFESSIONNELS
WINDEV
,
WEBDEV
et
WINDEV Mobile
Accueil
|
Messages récents
|
Connexion
|
Déconnexion
|
Français
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
Connectez-vous…
Maher_unlocker
#1
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
Signaler
0
0
Maher_unlocker
#2
Membre enregistré
12 messages
Posté le 14 juillet 2019 - 16:44
y'a pas de solutions les amis
--
unlocker
Signaler
0
0
→ Revenir à WEBDEV 2024
WINDEV 2024
WEBDEV 2024
WINDEV Mobile 2024
WINDEV (précédentes versions)
WEBDEV (précédentes versions)
WINDEV Mobile (précédentes versions)
Etats & Requêtes
Hors-sujet
Outils
Français
English
Español
Portuguesa
Fermer cette fenêtre
Type de recherche
Uniquement les sujets
Tous les messages
Période de recherche
Date indifférente
Moins d'une heure
Moins de 24 heures
Moins d'une semaine
Moins d'un mois
Moins d'un an
Annuler
Aperçu de votre message
Ajouter une image
Importer une image depuis une URL
Envoyer une image depuis un fichier de votre disque
Déposez ici un fichier ou cliquez sur "Parcourir..."
ou
Annuler
0%
WLangage
SQL
XML, HTML
JAVA, Javascript
Texte