FOROS PROFESIONALES
WINDEV
,
WEBDEV
y
WINDEV Mobile
Inicio
|
Mensajes recientes
|
Conéctese...
|
Desconectar
|
Español
Inicio
→
WEBDEV 2024
→
codepen webdev23 executer show menu depuis button webdev
codepen webdev23 executer show menu depuis button webdev
Iniciado por Maher_unlocker, 06,jul. 2019 17:10 - 1 respuesta
Conéctese…
Maher_unlocker
#1
Miembro registrado
12 mensajes
Publicado el 06,julio 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
Informar
0
0
Maher_unlocker
#2
Miembro registrado
12 mensajes
Publicado el 14,julio 2019 - 16:44
y'a pas de solutions les amis
--
unlocker
Informar
0
0
→ Volver a WEBDEV 2024
WINDEV 2024
WEBDEV 2024
WINDEV Mobile 2024
WINDEV (versiones precedentes)
WEBDEV (versiones precedentes)
WINDEV Mobile (versiones precedentes)
Reports & Queries
Irrelevante
Herramientas
Français
English
Español
Portuguesa
Fermer cette fenêtre
Búsqueda Tipo
Sólo temas
Todos los mensajes
Periodo Buscar
Cualquier fecha
Última hora
Última 24 horas
Última semana
Último mes
Último año
Cancelar
Vista previa del mensaje
Añadiendo una imagen
Importar una imagen desde una URL
Enviar una imagen desde un archivo de su disco
Arrastrar un archivo o click en "Examinar..."
o
Cancelar
0%
WLanguage
SQL
XML, HTML
JAVA, Javascript
Texto