BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - Panneau d'élément POP UP
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Panneau d'élément POP UP

 Répondre Répondre Page  123>
Auteur
Message
lilio98 allez vers le bas
Groupie
Groupie


Depuis le: 09 Nov 2017
Status: Inactif
Points: 46
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer lilio98 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Panneau d'élément POP UP
    Envoyé : 08 Jan 2018 à 10:24
Bonjour les codeurs! 

Je viens à vous car j'aimerais tenter un nouveau truc pour les sites :) 

Voila j'aimerais voir si c'est possible de créer un menu ou lorsqu'on survole un bouton cela affiche un bloc d'élément avec des sous-liens.... 

Voici un exemple https://www.olympic.org/fr/le-cio-linstitution">https://www.olympic.org/fr/le-cio-linstitution lorsque on survole les différents boutons de la barre de menu cela affiche une fenetre pop-up qui est un cadre contenant plusieurs colones...

Un début de solution: J'ai pensé créer un panneau d'élément relatif (comme d'hab) en mettant toutes les colones et les liens etc... Puis j'ai trouvé un code JV sur le forum pour le cacher par défaut et l'afficher lorsqu'on survole le bouton du menu. 

(solution utilisé: http://forum.openelement.com/fr/forum_posts.asp?TID=21854&PN=2&title=menu-descendant-sur-survol-souris">http://forum.openelement.com/fr/forum_posts.asp?TID=21854&PN=2&title=menu-descendant-sur-survol-souris)


$( "#WEaf9c74f17b" ).hover(

  function() {

  $( ".menu").hide();

  $( "#WEd5218e3fcd" ).show();

  }

);



Bon... Ca a pas marché du coup maintenant bloqué... Si quelqu'un à une suggestion je suis preneur ^^

Bonne année btw :)

Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 10:40
Bonjour,

sans lien de vos tests, difficile de vous aider sans lien au projet. De plus, le code que vous indiquez est incomplet...donc normal.
Haut de la page
lilio98 allez vers le bas
Groupie
Groupie


Depuis le: 09 Nov 2017
Status: Inactif
Points: 46
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer lilio98 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 10:42
Re,

Bhen il y a pas vraiment de lien test je travail sur ce site: http://udg.catharsis.events/ simplement je cherche un bon code pour afficher un bloc d'élément en survolant un autre élément en occurrence un bouton.
Haut de la page
lilio98 allez vers le bas
Groupie
Groupie


Depuis le: 09 Nov 2017
Status: Inactif
Points: 46
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer lilio98 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 10:45
Au pire voila un mini test... http://udg.catharsis.events/Test.htm (il y a bien un panneau d'élément invisible mais qui ne s'affiche pas lors du survol du lien)
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 11:21
J'essaye de prendre 5mn entre midi et deux pour voir votre souci, sauf si un intervenant réagit avant moi d'ici là.
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 11:33
Il faut que votre code se lance seulement apres le chargement de la structure de la page, donc le mettre votre a l'interieur de:

$(function(){
....
});
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 11:34
P.S. Ou sinon choisir EndBody comme Position du Bloc, normalement ca marche aussi.
Cela concerne tout le code JavaScript qui vous voulez ajouter.
Haut de la page
lilio98 allez vers le bas
Groupie
Groupie


Depuis le: 09 Nov 2017
Status: Inactif
Points: 46
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer lilio98 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 11:35
C'est bon j'ai trouvé une solution qui est la votre enfait....

 
$(function(){

$('.m-content').mouseenter(function(){
$(this).addClass('mouse-on');
});
$('.m-content').mouseleave(function(){
$(this).removeClass('mouse-on');
$('.m-content').hide();
});
$('.m-menu').mouseleave(function(){
setTimeout(function(){ $('.m-content:not(.mouse-on)').hide(); }, 100);
});

$('.menu1').mouseenter(function(){
$('.content1').css('visibility','visible').show();
});

$('.menu2').mouseenter(function(){
$('.content2').css('visibility','visible').show();
});
// ajouter plus pour chaque menu
});
Haha ^^ Merci pour tout (peut être que je ferai un petit tuto disons qu'un menu comme ca est très esthétique.
Haut de la page
lilio98 allez vers le bas
Groupie
Groupie


Depuis le: 09 Nov 2017
Status: Inactif
Points: 46
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer lilio98 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 11:36
Maintenant ma question c'est comment pouvoir faire en sorte que le panneau s'affiche avec une petite annimation :) genre un fade-in
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 08 Jan 2018 à 11:39
avec un bout de code css de ce type par exemple :

mettre la classe transitions à vos éléments souhaités.
Puis ce code (bloc de code source en CSS dans le header) :

.transitions, .transitions a {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

Haut de la page
 Répondre Répondre Page  123>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.