Aller au contenu

Faire un Menu Simple


BBstar

Messages recommandés

Niveau requis Débutant

Temps estimé : 15 minutes

Bonjour,

 

Je vais vous montrer comment faire un menu avec un background comme les liens en haut du forum.

 

Révélation

 

Tout d'abord le HTML :

<ul id="votre-menu">
	<li><a>Nom du lien</a></li>
	<li><a>Nom du lien</a></li>
	<li><a>Nom du lien</a></li>
	<li><a>Nom du lien</a></li>
</ul>
Bien mettre les balises et faire attention à bien refermer toutes les balises. Maintenant, si vous regarder votre page brut en html, comme ceci, il y aura de gros points devant les liens, pas très esthétiques non ? C'est pour ça que je passe du coté du CSS :
#votre-menu li{
	margin:0;
	padding:0;
	list-style:none; /* Ceci enlève les gros points */
	text-align:left; /* Texte aligné à gauche */
	display:inline;  /* Pour des liens en ligne */
	font-family:Arial;
	font-size:14px;
}
Lien visible tel quel, sans passer la souris
#votre-menu li a{
	padding: 10px 15px ; /* Se reporter dessous */
	color:#fff; /* Couleur de votre texte */
	text-align:center;  /* Alignement du texte*/
	text-decoration:none;  /* Pas de soulignement */
}
**padding: 9px vous donnera la hauteur de votre background, tandis que 15px vous donneras l'écartement entre liens. Quand nous passons la souris dessus
#votre-menu li a:hover{
	background:#f9f9f9; /* Couleur de votre background lors du clic */
	text-decoration:none;
	color:#3e3e3f;
}
Voila une solution que j'utilise souvent pour mes liens. Après libre à votre imagination pour modifier ces 4 petits codes, pour des liens embellis, qui ferrons sans doute le bonheur de vos visiteurs/membres.

 

 

Amicalement,

BBstar

Lien vers le commentaire
  • Réponses 7
  • Created
  • Dernière réponse
  • Retraité

Oui, normalement il faut mettre les balises

  • , chose que je ne fait pas j'avoue, puisque ça ne change rien au code ;)

 

ça dépend ... Les balises

  • permettent un code plus nette, et c'est aussi une balise de plus, pour une meilleur précision avec le CSS :3.

 

Surtout utile si t'as défini ul car si non c'est inutile :o.

 

C'est vrai que c'est la meilleur façons de faire un Menu c'est bien le :hover ^^.

+1 et merci encore

Préférable de faire du clique plutôt que hover pour les mobile users.

16 ans et retraité ? :( !

Chuck Norris is my son! I swear it !

260830que-rel-ler2.png

 

Lien vers le commentaire
  • 2 weeks later...

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant


  • Flux d'Activité

    1. 2

      Serveur en Création

    2. 2

      Serveur en Création

    3. 2

      Serveur en Création

    4. 3

      Asiria2 Ultra-Fun - Serveur Ouvert

    5. 5

      Metin2 Download - Migration

    6. 0

      C++ Wiki Ingame

    7. 38

      Installer Ancestra Remake 54

    8. 2

      Ajouter une Commande Lau

  • En ligne récemment

    Aucun utilisateur enregistré regarde cette page.

×
×
  • Créer...

Information importante

Conditions d’utilisation / Politique de confidentialité / Règles / Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookie, sinon nous supposerons que vous êtes d’accord pour continuer.