[HTML][CSS]Menu

Résolu

CrazyLegy -

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.

Afficher la suite

A voir également

[HTML][CSS]Menu
Editeur html - Télécharger - HTML
Menu déroulant excel - Guide
Menu démarrer - Guide
Menu iphone - Guide
Menu recovery samsung - Guide

2 réponses

Réponse 1 / 2
Kopros
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
0
Réponse 2 / 2
CrazyLegy Auteur
Merci pour la réponse rapide, je testerais ça plus tard.

0
1. CrazyLegy Auteur
  
  J'ai ajouté le code, le mot accueil est bien aligné mais j'aimerai bien qu'il s'affiche qu'au survol de la souris au fur et à mesure que la div grandit .
  
  Merci :)
  
  PS: Dites-moi si je vous en demande trop :/
  
  0
2. Kopros
  
  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;
  
  0
3. CrazyLegy Auteur
  
  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>
  
  0
4. Kopros
  
  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.
  
  0
5. CrazyLegy Auteur
  
  J'ai pas réussi à faire marcher le code mais c'est pas grave je trouverais un autre moyen :) .
  
  0

[HTML][CSS]Menu

2 réponses

Discussions similaires

Newsletters