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?

    Loading ... Chargement en cours ...
How to Code an Overlapping Tabbed Main Menu

Comment coder un chevauchement onglets du menu principal

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

Hey There!

Il sera grand si vous aussi vous abonner à notre flux ...

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.

menu-image

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

tab-sprite

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.

no-shadow-sprite

É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:

non-overlapped-tabs

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: , , , ,

D'autres postes qui pourraient vous intéresser

48 réponses

  1. Excellent tutoriel et bien écrit. Merci pour le partage.

  2. Bonjour de la Russie!
    Puis-je citer un billet dans votre blog avec le lien pour vous?

  3. belle tutoriel! vraiment utile ....

  4. 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

  5. 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]

  6. Santosh PINGALE

    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

  7. 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.

  8. 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?

  9. 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?

    • 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 ... :)

  10. 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

  11. comment voulez-vous télécharger ce

    c'est une boucle sans fin

    • 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 :)

  12. Merci beaucoup. J'étais sur le point de renoncer à la navigation de codage du tutoriel design original. Cela m'a aidé beaucoup!

  13. 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?

  14. 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 Mon profil ComLuv

  15. 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 Mon profil ComLuv

    • 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)

  16. Je voulais juste vous donner un cri de la vallée du soleil, la grande information. Très apprécié.

  17. Je viens de découvrir ce à partir de Smashing Magazine. Merci pour ce bon tutoriel.

  18. 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?

  19. Tutoriel Suppppppppppper .... Merci beaucoup ............

Trackbacks et Pingbacks

  1. kopfkribbeln webdesign-blog »Überlappendes Tabmenü
  2. 45 Puissant CSS / JavaScript-Techniques - Smashing Magazine
  3. 45 Puissant CSS / JavaScript Techniques «social-Presse
  4. 45 Puissant CSS / JavaScript Techniques | TipTe.com
  5. 45 Puissant CSS / JavaScript des techniques | Tutorial51
  6. 45 Puissant CSS / JavaScript Techniques »Shai Perednik.com
  7. 45 Puissant CSS / JavaScript des techniques | moreInet.com | Webdesign, Service de la conception graphique à Pattaya
  8. Chevauchement des onglets | Web Design Deux
  9. 45种有用的CSS / Javascript技巧| narco
  10. CSSFind
  11. 45 Puissant CSS / JavaScript Techniques | Blog DX
  12. designfloat.com
  13. zabox.net
  14. joyoge.com
  15. 100 Grands Tutoriaux Menu CSS
  16. 50 meilleures Tutoriaux Menu CSS avec effet Jquery | Desua le monde de la connaissance
  17. 100 Grands Tutoriaux Menu CSS - pocongseXy :: Art et Dezign ::
  18. 100 Grands Tutoriaux Menu CSS | Designer Malaisie
  19. E-sitesweb »45 Puissant CSS / JavaScript des Techniques
  20. 100 Grands Tutoriaux Menu CSS ~ ~ ~ par Suyash - HearTThrobeHearTThrobe

Laisser un commentaire

CommentLuv Enabled
  • Graphique de la rivière Are My Sites Up? Forêt Thème
  • Parcourir

    • Sumeet:

      Eh bien, vous pouvez inclure la partie HTML dans le bas de votre page blogger ...

    • Rahul:

      hey vraiment awesom hover jouer avec twitter, mais je veux un peu d'aide je veux ...

    • Patti:

      Salut, je suis nouveau sur HTML 5. J'ai essayé de placer mes propres photos et bannière en ...

    • Victor:

      Tutoriel très agréable, le design excellent. Tks pour le partage ....

  • Tag Cloud