[HTML][CSS]Menu [Résolu/Fermé]

Signaler
Messages postés
31
Date d'inscription
mercredi 29 octobre 2014
Statut
Membre
Dernière intervention
17 juin 2015
-
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
-
Bonjour,

je code en HTML et CSS et j'ai besoin d'aide.

Je veux faire un petit menu mais je bloque à un endroit.

Voila le code CSS:

#mini_menu{
background-color: DimGrey;
width: 30px;
height: 30px;
border: Black 1px solid;
border-radius: 5px;
transition: width 1s;
}

#mini_menu:hover{
width: 100px;
transition: width 1s;
}


Voila le code HTML:


<div id="mini_menu">
<img src="Test HTML/index.png"/><a href="index.html">Accueil</a>
</div>


Je voudrais que le mot Accueil soit aligner à l'image et qu'il apparaisse quand la sourie survole l'image.

Merci d'avance.

2 réponses

Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
82
Ajoute ça à ton code CSS :
#mini_menu * {
display: inline-block;
vertical-align: middle;
}


Ainsi, tous les éléments enfants de #mini_menu auront le display inline-block, qui est très utile (ça prend les avantages des blocks, pour les dimensions notamment, et des inlines, pour éviter que les éléments suivants ne se placent en dessous. )

+ d'explications : https://www.alsacreations.com/article/lire/1209-display-inline-block.html
Messages postés
31
Date d'inscription
mercredi 29 octobre 2014
Statut
Membre
Dernière intervention
17 juin 2015

Merci pour la réponse rapide, je testerais ça plus tard.
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
82
Ah pardon j'avais zappé la 2e partie de la question ^^

Voici le code :
#mini_menu a{
visibility: hidden;
}

#mini_menu:hover a{
visibility: visible;
}


Et pour que l'effet de transition fonction, modifie dans ton code ceci :
transition: width 1s;

par cela :
transition: all 1s;
Messages postés
31
Date d'inscription
mercredi 29 octobre 2014
Statut
Membre
Dernière intervention
17 juin 2015

Merci pour vos réponses mais je pense que le mieux serais d'utiliser du Javascript.

Du coup j'ai essayé de coder sa, mais sa fait cracher mon navigateur xD

Code HTML:

<div id="mini_menu">
<img src="index.png"/>
<a href="index.html" id="okk">Accueil</a>
</div>


Code JS:

<script>
while (document.getElementById('mini_menu').style.width != "100px"){
document.getElementById('okk').style.visibility = "hidden";
}
</script>
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
82
Oui il fait faire gaffe avec ce genre de boucles, ça peut prendre de la ressource inutilement !

Pourquoi ne pas passer par du css ? Pour la rétro-compatibilité ? (parce que ça marche même sur les anciens navigateurs qui supportent le css2)

Si tu tiens au js, je te conseille d'utiliser la bibliothèque jQuery :
- Tu la télécharges ici : https://jquery.com/download/
- Tu fais appel au fichier js dans ton html
- Et tu places ce code entre </body> et </html> :

<script type="text/javascript">
$('#mini_menu").hover(function(){
$('#okk').css('visibility','visible');
}, function(){
$('#okk').css('visibility','hidden');
});
}
</script>


Voilà et dans le fichier css tu dis bien que #okk a la visibility hidden.
Messages postés
31
Date d'inscription
mercredi 29 octobre 2014
Statut
Membre
Dernière intervention
17 juin 2015

J'ai pas réussi à faire marcher le code mais c'est pas grave je trouverais un autre moyen :) .
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
82
Le fichier js de jquery doit bien se trouver avant le code que j'ai mis.

Sinon faudrait que tu me dises si y'a des erreurs (ouvre la console avec le raccourci Ctrl + Maj + J)