18041 sujets

Questions générales et questions de débutants

Probleme de compréhention Js et Css

Bonjour à tous.

J'aimerais une petite explication sur l'interaction Js et css.
Je débute avec Js et j'essaie de créer un petit menu en m'inspirant de ce site, https://qualiacreative.com.au/
Pour le moment j'en suis là http://test.alidufresne.fr/
L'idée est que au passage de la sourie le menu apparais progressivement. donc je pensai pouvoir seulement gérer l'évènement en Js (le passage du pointeur et lorsque le pointeur sort de la zone) et le style et les transition sur ma feuille de style. Mais je n'y arrive pas et du coup je pense que quelque chose m'échappe.

Merci A+
Bonjour,
il n'y a pas de JS, simplement des transitions CSS
Utilise l'inspecteur web, et tu verras les différentes transitions utilisées pour chaque <li></li>, y compris le dernier qui contient l'icône hamburger

infos avec "transitions css" dans ton moteur de recherche préféré
Merci @farang

Tu dis qu'il n'y a pas de Js, tu veux dire sur le site de référence je pense ?
Oui peut être, je n'est pas regarder leurs code donc pas utilisé l’inspecteur de code.

j'aimerais juste progresser en js, donc je me lance des petits projets afin d'avancé.
Je pose la question sur le forum parce que j'ai déjà chercher avec mon moteur de recherche préféré.
Sinon j'ai aussi acheter un livre (Programmer en s’amusant avec Javascript) qui arrive aujourd'hui si tout va bien.

Merci A+
oui je parle du site de référence, tout est fait avec des transitions, voir le code source de la page, ou bien l'inspecteur web
c'est une bonne idée de se lancer un petit projet, et de tenter en javascript, ça fait bien progresser
Dans le cas qui nous occupe, c'est plus simple en CSS pur, sinon jQuery permet plus facilement que Javascript ce genre d'effet
quelle est ta question précise ? sur quelle portion de code et de javascript ?
S'il doit y avoir une question je pense que ce serai celle-ci.
Dans mon cas, puisque je suis partis sur une solution Js est ce que les transition doivent être gérer obligatoirement avec Js ou est ce que je peut les gérer avec ma feuille de style ?

Actuellement en Js j'arrive à gérer le mouseover et mouseout.
Mais l'effet de transition ne s'applique pas ni au départ ni à l'arriver.
Je place la transition sur #menu dans ma feuille de style, mais le déclenchement se fait sur .burger-liens qui affiche le #menu.

Mais peut être qu'il est mal placé, je vais voir.

Merci A+
Merci @Jean-Pierre-Bruneau
Ben en fait il devrais reproduire l'effet que je voit sur le site https://qualiacreative.com.au/
C'est à dire au passage du pointeur mouseover affiche il le #menu et sur mouseout cache le menu le tout avec un effet de transition.

#menu {
    background-color: white;
    opacity: .5;
    transition: background-color 3s ease-in-out;
    -webkit-transition: background-color 3s ease-in-out;
    -moz-transition: background-color 3s ease-in-out;
    -ms-transition: background-color 3s ease-in-out;
    -o-transition: background-color 3s ease-in-out;
}

#menu:hover {
    background-color: lightblue;
    opacity: 95;
}

et mon code Js 

// cache l'élément 'menu'
var js_menu = document.querySelector('#menu');
js_menu.style.visibility = 'hidden';

// ma fonction qui ouvre le menu
// je selectionne l'élément #menu et je lui passe la propriété visible
var declencheur = document.querySelector('.burger-lien');
declencheur.addEventListener('mouseover', Fonction1);
declencheur.addEventListener('mouseout', Fonction2);

function Fonction1() {
    js_menu.style.visibility = 'visible';
};

function Fonction2() {
    js_menu.style.visibility = 'hidden';
};


Merci A+
Merci @aliasdmc
je suis loins de faire un script comme celui que tu me présente. Maintenant il faut que j'arrive à comprendre ce que tu fait.
Dans mon cas pourquoi sa ne marche pas, la démarche n'est pas bonne ?

super pour les commentaires.
Question : tu écrits oEvent dans la fonction show, je ne trouve pas de ref sur l'objet. C'est event je suppose. Mais le o devant c'est quoi ?

Merci A+
Modifié par ali13 (09 Aug 2019 - 12:12)
Sujet clos
Aller à