Comment coder un chevauchement onglets du menu principal

Notre Blog

Écrits, partage des connaissances nouvelles, Tutoriels

En tant que développeur web, qu'est-ce que vous appréciez le codage le plus?
- xHTML
- PHP
- CSS
- Javascript (Comprend les bibliothèques comme jQuery, outils, etc) Moo
- Autre
Voir les résultats
Chargement en cours ...

How to Code an Overlapping Tabbed Main Menu

Comment coder un chevauchement onglets du menu principal

14 octobre 2009 - Par Sumeet

Menu principal de navigation est la partie d'une conception de site Web qui rend l'ensemble du site regard vif et complet. Mais le type le plus commun de style de menu de navigation encore beaucoup utilisé est le menu de navigation par onglets. Voici un tutoriel sur la façon de coder un menu à onglets qui se chevauchent.

Démo Télécharger

Il existe différents styles et techniques de la création d'un menu de navigation par onglets et l'un d'eux est la superposition onglets ou le style de chevauchement dans lequel chaque onglet semble être située au-dessus de l'autre et, partant, de donner l'ensemble du menu une sensation très réaliste. Bien que la conception de mon site, je suis passé par beaucoup d'inspirations et des tutoriels. L'un d'eux était ce tutoriel appelé Texture papier Photoshop à partir de zéro, puis sur Créer un web design sale avec elle! Écrit par Collis de NetTuts.com Collis Cela a fini par être la principale source d'inspiration pour mon site et tout en passant par le tutoriel que j'ai trouvé en disant que:

"Maintenant, si je dis moi-même ces onglets ont une allure impressionnante, et la raison qu'ils font, c'est parce qu'elles se chevauchent. Malheureusement, ce rend également plus difficile de travailler avec en HTML. Vous pouvez cependant faire une variété de choses avec PNG transparents, ou alternativement simplement faire changer les couleurs de texte dans les renversements et de ne pas vous soucier de changer les couleurs des onglets. Quoi qu'il en soit tout cela est un peu au-delà de la portée de ce tutoriel. Qu'il suffise de dire que le menu peut être un peu difficile à construire. "

Alors, j'ai essayé de coder un en html et après je pensais réussir de le partager avec vous tous.

Étape 1.Gearing Up

Donc, avant de commencer à coder ce genre de navigation par onglets en html / css, vous devez d'abord apprendre à en créer un dans photoshop en premier. Le tutoriel ci-dessus est très détaillé et Collis fait un excellent travail en apprenant à construire un tel menu dans Photoshop. J'ai construit un simple spécialement pour ce tutoriel.

Maintenant permettez-moi de préciser qu'il existe trois états de l'état inactif est tab.The de couleur grisâtre, l'état actif est d'un bleu profond et l'état stationnaire est en acier de couleur bleu clair. Ainsi, plutôt que de découper les trois images pour chaque onglet, on peut couper à un sprite image.

Étape 2. Trancheuse les onglets de la PSD

Alignez les onglets verticalement à l'aide des grilles comme indiqué dans l'image ci-dessus. Vous pouvez également aligner les onglets horizontalement plutôt que verticalement, mais alors la position CSS image de fond seront accessibles d'une manière différente. Le choix dépend de personne à personne mais les deux fonctionnent parfaitement. Bien que les cultures de l'image de suivre les directives correctement et noter que j'ai fait le fond transparent parce que nous allons avoir besoin d'un fond transparent si nous avons besoin de superposer les onglets. Recadrer l'image et l'enregistrer pour le web en PNG24 format. Un autre point à noter tout trancher les images, c'est que le premier onglet à savoir le 'Home' onglet ne devraient pas avoir d'ombre sur son bord gauche à l'état inactif. Ainsi, pour cet onglet spécifique, nous devons créer un autre sprite sans l'ombre en elle.

Étape 3. Code de l'extérieur

Maintenant que notre découpage est terminée et nous avons toutes les images nécessaires, nous pouvons commencer à coder notre barre de navigation. Juste pour faire l'exemple l'air bien, j'ai construit un échantillon en vedette la disposition la zone de contenu avec la barre de navigation qui se chevauchent. La mise en page ressemble à ceci:

 <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 </ Head>

 <body>
	 <div id="page-wrap">
		 <ul id="main-nav">
			 <li href="/webmasters/add.html"> <a href="index.html"> Accueil </ a> </ li>
			 <li class="portfolio"> <a href="portfolio.html"> portefeuille </ a> </ li>
			 <li class="services"> <a href="services.html"> Services </ a> </ li>
			 href="about.html"> <li <a class="about"> A propos de nous </ a> </ li>
			 <li class="contact"> <a href="contact.html"> Contact </ a> </ li>
		 </ Ul>
		 <div class="clear"> </ div>
		 <div id="featured">
			 <div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

Regardons notre menu de navigation principale. J'ai utilisé une simple liste non ordonnée que toute autre barre de navigation et de style à l'aide d'une image de fond à la balise lien hypertexte de la liste.

 <ul id="main-nav">
	 <li href="/webmasters/add.html"> <a href="index.html"> Accueil </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> portefeuille </ a> </ li>
	 <li class="services"> <a href="services.html"> Services </ a> </ li>
	 href="about.html"> <li <a class="about"> A propos de nous </ a> </ li>
	 <li class="contact"> <a href="contact.html"> Contact </ a> </ li>
 </ Ul>

 ul # nav li-principale {
	 float: left;
	 position: relative;
	 display: inline;
 }

Rappelez-vous que nous sommes en utilisant un sprite image pour les onglets dans lesquels l'onglet le plus haut représente l'état actif, au milieu représente l'état inactif et le fond représente l'état stationnaire. Par conséquent, nous allons utiliser la propriété 'background-position' pour placer correctement les images de leur état respectif comme suit:

 ul # nav principale-li a {
	 position: relative;
	 largeur: 110px;
	 hauteur: 29px;
	 display: block;
	 background-image: url ('/ images / tabs.png. ».);
	 background-position: center center;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: left;
	 padding-left: 30px;
	 font-weight: bold;
 }
 ul # nav principale-li.home un {
	 background-image: url ('/ images / onglet-home.png. ».);
 }
 ul # nav principale-li.current un {
	 background-position: top;
	 color: # ffffff;
 }
 ul # nav li-principale a: hover {
	 background-position: bottom;
	 color: # ffffff;
 }
 ul # nav principale-li.current a: hover {
	 background-position: top; / * Pour éviter l'onglet courant de changer de couleur au survol * /
	 color: # ffffff;
 }

Vous remarquerez que j'ai donné une classe pertinente à chacun des éléments de la liste et une classe nommée «actuelle» à l'onglet qui est pour la page courante. Ceci est fait pour que je puisse affecter différentes valeurs de z-index de chaque onglet dans un ordre ascendant de telle sorte que chaque onglet se trouve à un plus haut de l'axe z de l'onglet qui le suit. L'onglet avec «courant» de la classe se situera au plus haut afin de l'axe z, car il représente la page en cours et sera toujours rester au top indépendamment de sa position dans la liste. Avant d'appliquer les valeurs de z-index, assurez-vous que l'attribut de position de l'élément de liste est définie par rapport à. Sans aucune valeur le positionnement de la propriété z-index ne fonctionne pas du tout.

 ul # nav principale-li.current {
	 z-index: 100;
 }
 ul # nav principale-li.home {
	 z-index: 100;
 }
 ul # nav principale-li.portfolio {
	 z-index: 99;
 }
 ul # nav principale-li.services {
	 z-index: 98;
 }
 ul # nav principale-li.about {
	 z-index: 97;
 }
 ul # nav principale-li.contact {
	 z-index: 96;
 }

Même si nous avons attribué différents z-index des valeurs aux onglets, ils ne semblent toujours pas plus rodée et ressemblera à ceci:

Pour donner la touche finale à notre barre de navigation, nous avons pour pousser chaque onglet au-dessus de l'autre. Nous avons attribué les valeurs de z-index dans l'ordre décroissant de gauche à droite. Par conséquent, nous allons il suffit de pousser chaque onglet à partir de la droite à environ 20px à sa gauche par l'ajout d'un négatif 'margin-left' la propriété de la 'ul # nav li-principale »et pousser la barre de navigation toute liste non ordonnée vers la gauche par l'ajout d'un 20px positif 'margin-left' pour annuler le mouvement de gauche pupilles de la barre.

 ul # nav {principale-
	 margin-left: 20px;
 }
 ul # nav li-principale {
	 float: left;
	 position: relative;
	 margin-left: 20px-;
	 display: inline;
 }

Mission accomplie

Après de monter tout le css et le xhtml ensemble, nous aurons notre chevauchée menu à onglets de navigation principale prêt à l'emploi. Ce fut mon avis sur la façon de créer ce genre d'un menu et je suis sûr qu'il ya beaucoup de meilleurs moyens de faire la même chose. Je serais heureux si vous pouviez partager une autre manière de faire ceci ou juste discuter de certaines améliorations à cette procédure elle-même.
Voici quelques sites qui utilisent plus les onglets de rodage de leur menu de navigation principale:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS , comment , le menu , de navigation , plus rodée

D'autres postes qui pourraient vous intéresser

48 réponses

FAQpal
17 octobre 2009 à 3:18 am
Excellent tutoriel et bien écrit. Merci pour le partage.
Répondre
- Sumeet Chawla
  17 octobre 2009 à 10:01 am
  Merci Pliggs .. Ce fut un honneur d'afficher le tutoriel au FAQpal trop
Polprav
17 octobre 2009 à 20h54
Bonjour de la Russie!
Puis-je citer un billet dans votre blog avec le lien pour vous?
Répondre
- Sumeet Chawla
  18 octobre 2009 à 12:21 am
  Hey Salut De l'Inde! Vous souhaitez citer un billet sur le blog comme dans? citer une phrase en particulier, la phrase ou quoi?
Rakesh
20 octobre 2009 à 12:55 am
belle tutoriel! vraiment utile ....
Répondre
knoli
25 octobre 2009 à 17h45
Je tiens à présenter des demandes pour l'Iphone d'Apple et iPod Touch. Tous les types d'applications, mais je ne sais pas comment commencer et par où commencer à partir quelqu'un peut me donner un peu d'aide
Répondre
knoli
21 novembre 2009 à 3:49 am
Je suis intéressé à apprendre comment programmer pour l'iPhone. Quelle serait la langue de Windows qui ressemble le plus le langage de programmation iPhone. Je voudrais écrire pour les machines Windows et les deux iPhones sans avoir à ré-apprendre un langage de programmation.
________________
[Url = http://unlockiphone22.com/] iPhone Unlock [/ url]
Répondre
- Sumeet Chawla
  21 novembre 2009 à 7:42 am
  ainsi, si vous obtenez le coup de le langage C, vous pouvez coder dans n'importe quel langage. C est comme la mère de tous les langages de programmation.
Santosh PINGALE
22 décembre 2009 à 14h18
Vous voulez savoir quels sont vos commandes 2 site web, livre ou autre je dois utiliser pour concevoir un site Web d'Adobe Photoshop ...... Thank u à l'avance .. courrier plz moi si u can ..: D
Répondre
- Sumeet Chawla
  23 décembre 2009 à 11:28 am
  ainsi, la meilleure ressource pour l'apprentissage de conception est l'Internet. Il est mis à jour chaque minute avec les dernières tendances et des tutoriels.
  voici quelques liens pour vous aider a commencé avec
  http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
  http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  Vous devez avoir les compétences de base de l'utilisation de photoshop. En fin de compte ce qui importe réellement, c'est le niveau de créativité que vous avez.
Legars
14 janvier 2010 à 15h07
Salut, je peux juste dire que même si c'est un menu intéressant, vous ne devriez pas avoir la page de l'onglet courant comme un lien. Il s'agit d'une UX et l'accessibilité gros no-no.
Répondre
- Sumeet Chawla
  14 janvier 2010 à 15h13
  Bonjour,
  Quelle partie vous allusion? J'ai la classe de page en cours sur l'élément de liste et non pas l'élément de liaison.
Doyen
26 janvier 2010 à 4:13 am
Je ne peux pas faire: s
Je ne sais pas comment
Pouvez-vous m'aider s'il vous plaît
Il ne prend même pas mes tranches à PNG24 de
Je ne suis pas si bon avec css et je veux vraiment ce menu se chevauchent
Je n'utilise que 2 images et a donné le nom de la même chose que vous ne
mais ne fonctionne pas
Mon image est un peu plus bas, mais lil plus
Pouvez-vous s'il vous plaît m'aider?
Pouvez-vous faire pour moi s'il vous plaît?
Répondre
Doyen
30 janvier 2010 à 2:12 am
Ok, alors maintenant je fais le site en flash
Mais encore des problèmes avec la navigation
Comment puis-je lui donner de la souris sur le lien + actif devant?
Répondre
- Sumeet Chawla
  8 février 2010 à 10:39 am
  Hey salut, Désolé, je n'ai pas beaucoup d'expérience avec Flash. Mais si vous suivez le tutoriel correctement et la gale des valeurs de z-index correctement aussi. Je ne pense pas que vous avez un problème ...
Morishita
25 mars 2010 à 12h55
Wonerful! J'aime la façon dont ce blog est toujours mis à jour avec des produits frais content.I fait trois de mes amis vous abonner btw, lol
Répondre
carl
3 juin 2010 à 17h44
comment voulez-vous télécharger ce
c'est une boucle sans fin
Répondre
- Sumeet
  3 juin 2010 à 23h54
  Désolé pour le désagrément causé. Mais vous pouvez le télécharger après avoir cliqué sur le bouton de téléchargement. Si vous ne souhaitez pas vous abonner, il suffit de fermer la fenêtre pop up et le téléchargement va commencer.
  Les commentaires sont toujours les bienvenus
Tom chrétienne
12 juin 2010 à 5:47 am
Merci beaucoup. J'étais sur le point de renoncer à la navigation de codage du tutoriel design original. Cela m'a aidé beaucoup!
Répondre
- Sumeet
  12 juin 2010 à 9:57 am
  Heureux que je pourrais être d'une aide Tom
John Smith
19 octobre 2010 à 18h33
L'exemple fonctionne bien et est vraiment superbe à la recherche.
Toutefois, cela ne fonctionne pas aussi bien sur IE6 que le fichier de ping (. Png)
soutien n'est pas là. Quelqu'un at-il une solution de contournement pour IE6 qui
fonctionne avec cet exemple?
Répondre
Lucas
25 octobre 2010 à 6:11 am
Grande, j'aime vraiment ce genre de menu, j'ai ajouté à mon site web
http://www.ajaxshake.com
merci
Dernier blog de Lucas .. pseudo effet 3D avec CSS pur
Répondre
Phénix
20 janvier 2011 à 1:19 am
Heya. Tutoriel impressionnant. Je viens de créer un blog. Toujours dans la conception de l'Etat. Je veux vraiment utiliser cette chose.
Mais je suis un peu accro à plusieurs niveaux des menus déroulants. Est-il possible de modifier ces codes? Alors qu'un menu déroulant à plusieurs niveaux peuvent être atteints?
Thanx et en ce qui concerne.
Dernier blog de Phoenix .. mais encore une fois-pas a été poster
Répondre
- Sumeet
  26 janvier 2011 à 23h40
  Yup, vous pouvez facilement le modifier pour ajouter des menus à plusieurs niveaux. Recherchez tout tutoriel au niveau de menu à plusieurs là-bas. Fondamentalement, l'élément li aura un élément ul avec le lien hypertexte. L'élément ul agira à titre de sous-menu (le menu déroulant)
Malcolm Hoye
6 mai 2011 à 12:19 am
Je voulais juste vous donner un cri de la vallée du soleil, la grande information. Très apprécié.
Répondre
Tara
10 juillet 2011 à 23h49
Je viens de découvrir ce à partir de Smashing Magazine. Merci pour ce bon tutoriel.
Répondre
Pete
20 juillet 2011 à 14h38
Que pensez-vous est le nombre maximum d'onglets du menu que je peux mettre dans le haut de mon site - je voudrais vraiment avoir 13 -, c'est que pour beaucoup?
Répondre
JWEL
3 janvier 2012 à 18h34
Tutoriel Suppppppppppper .... Merci beaucoup ............
Répondre