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, Moo Outils, etc)
- Autre
Voir les résultats
Chargement ...

Comment coder un chevauchement par onglets 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 courant de style de menu de navigation étant 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.

Live Demo Download

Il existe différents styles et techniques de la création d'un menu à onglets de navigation et un d'entre eux est la superposition par onglets ou le style qui se chevauchent dans laquelle chaque onglet apparaît être couché sur l'autre et donnant donc le menu entier avec une sensibilité 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 a été appelé ce tutoriel Photoshop Texture du papier from Scratch puis créer un Grungy Web Design with it! Rédigé par Collis de NetTuts.com Cela a fini par être la principale source d'inspiration pour mon site et tout en passant par le tutorial j'ai trouvé Collis disant que:

«Maintenant, si je ne le dis moi-même ces onglets ont une allure impressionnante, et la raison qu'ils font, c'est parce qu'ils se chevauchent. Malheureusement, cela rend aussi plus difficile leur travail avec en HTML. Vous pouvez cependant effectuer une variété de choses avec des PNG transparent, ou alternativement juste faire changer les couleurs de texte dans un capotage et vous inquiétez pas à changer les couleurs de l'onglet. Quoi qu'il en soit tout cela est un peu au-delà de la portée de ce tutoriel. Il suffit de dire le menu pourrait être un peu complexe à construire. "

J'ai donc essayé un dans le codage HTML et après que j'ai réussi la pensée de le partager avec vous tous.

Step Up 1.Gearing

Alors avant de commencer à coder ce genre d'une navigation par onglets dans le code html / css, vous devez d'abord apprendre comment en créer un dans photoshop premier. Le tutoriel ci-dessus est très détaillé et Collis fait un grand travail dans l'enseignement de la façon de construire un tel menu dans photoshop. J'ai construit une une simple spécialement pour ce tutoriel.

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

Étape 2. Tranchage Les onglets du PSD

Alignez les onglets verticalement à l'aide des grilles comme le montre l'image ci-dessus. Vous pouvez aussi aligner les onglets horizontalement plutôt que verticalement, mais alors l'image background-position CSS sera accessible d'une manière différente. Le choix dépend de la personne à l'autre mais les deux fonctionnent parfaitement. Bien que le découpage de l'image de suivre les directives correctement et notez 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 format PNG24. Un autre point à noter tout découper les images est que le premier onglet à-dire l'onglet «Accueil» ne doit pas avoir l'ombre sur son côté gauche à l'état inactif. Par conséquent, pour que l'onglet spécifique, nous devons créer un sprite sans l'ombre en elle.

Étape 3. Code Away

Maintenant que notre découpage est complet et nous avons toutes les images nécessaires, nous pouvons commencer à coder notre barre de navigation. Juste pour donner l'exemple, l'air bien, j'ai construit un échantillon Featured layout zone de contenu avec la barre de navigation se chevauchaient. L'aménagement complet 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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href =" css / styles.css "rel =" stylesheet "type =" text / css "/> </ head> <div <body> id="page-wrap"> <ul id="main-nav"> <li class =" actuelles "> <a href="index.html"> Accueil </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> Portfolio </ a> </ li> < li class = "services"> <a href="services.html"> Services </ a> </ li> <li class="about"> <a href="about.html"> À propos de nous </ a> </ li> <li class="contact"> <a href="contact.html"> Contact </ a> </ li> </ ul> <div class="clear"> </ div> <div id = "vedette"> <div id="featured-content"> </ div> </ div> </ div> </ body> </ html>

Regardons notre menu de navigation principal. J'ai utilisé une liste non-ordonnée simple que n'importe quelle barre de navigation et d'autres de style en utilisant une image de fond à la tag lien hypertexte de la liste.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Accueil </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> Portfolio </ a> </ li>
	 <li class="services"> <a href="services.html"> Services </ a> </ li>
	 <li class="about"> <a href="about.html"> À propos de nous </ a> </ li>
	 <li class="contact"> <a href="contact.html"> Contact </ a> </ li>
 </ ul>

 ul # principal li-nav (
	 float: left;
	 position: relative;
	 display: inline;
 )

Rappelez-vous que nous utilisons une image de sprite pour les onglets dans lesquels l'onglet le plus haut représente l'état actif, le milieu représente l'état inactif et la partie inférieure représente l'état hover. Par conséquent, nous allons utiliser le 'background-position' propriété à placer correctement les images pour leurs Etats respectifs, comme suit:

 ul # main-nav li a (
	 position: relative;
	 width: 110px;
	 height: 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 # main-li.home nav a (
	 background-image: url ('../ images / tab-home.png ');
 )
 ul # main-li.current nav a (
	 background-position: top;
	 color: # ffffff;
 )
 ul # principal li-nav a: hover (
	 background-position: bottom;
	 color: # ffffff;
 )
 ul # main-nav li.current a: hover (
	 background-position: top; / * pour prévenir l'onglet courant de changer la couleur on hover * /
	 color: # ffffff;
 )

Vous remarquerez que j'ai donné une classe correspondant à 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 attribuer différentes valeurs de z-index pour chaque onglet dans un ordre croissant de telle sorte que chaque onglet se trouve à une plus élevés z-axe que l'onglet suivant sa création. L'onglet avec la classe "courants" se situera au plus haut ordre 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 position pour l'élément de liste a la valeur relative. Sans aucune valeur le positionnement de la propriété z-index ne fonctionne pas du tout.

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

Même si nous avons attribué des valeurs différentes de z-index pour les onglets, ils ne semblent toujours pas terminée à patte ressemblera à ceci:

Pour donner la touche finale à notre barre de navigation, nous devons pousser chaque onglet au-dessus de l'autre. Nous avons affecté des valeurs du z-index par ordre décroissant de gauche à droite. Par conséquent, nous allons juste pousser chaque onglet partir de la droite à environ 20px à sa gauche en ajoutant une marge négative "gauche" bien à la «ul li # main-nav 'et poussez la barre de navigation toute liste non-ordonnée à gauche par l'ajout d'une marge positive 20px 'gauche' pour annuler le mouvement quartiers gauche de la barre.

 ul # main-nav (
	 margin-left: 20px;
 )
 ul # principal li-nav (
	 float: left;
	 position: relative;
	 margin-left:-20px;
	 display: inline;
 )

Mission accomplie

Après avoir assemblé toutes les CSS et XHTML ensemble, nous aurons notre menu à onglets de navigation principale se chevauchaient prêt à l'emploi. Cela a été mon prendre sur la manière de créer ce genre d'un menu et je suis sûr il existe de nombreuses façons de mieux à faire de même. Je serais heureux si vous pouviez partager n'importe quel autre manière de faire ceci ou simplement discuter des améliorations à cette procédure elle-même.
Voici quelques site et utilisent plus de rodage onglets comme leur menu de navigation principale:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS, la manière de, menu, navigation, plus de patte

Cet article a été publié le Mercredi, Octobre 14, 2009 à 1:09 pm et est classé dans Blog, Tutoriels. Vous pouvez suivre les réponses à ce bulletin avec le 2.0 feed RSS. Vous pouvez laisser une réponse, ou un trackback depuis votre propre site .

Réponses

FAQPAL
17 octobre
Excellent tutoriel et bien écrit. Merci pour le partage.

[Répondre]
Sumeet Chawla Réponse:
Octobre 17th, 2009 at 10:01
Thank You Pliggs .. Ce fut un honneur d'afficher le tutoriel à FaqPal trop
[Répondre]
Polprav

17 octobre
Bonjour de Russie!
Puis-je citer un billet sur votre blog avec le lien pour vous?
[Répondre]
Sumeet Chawla Réponse:
18 octobre 2009 à 12:21 am
Hey Salut de l'Inde! Vous souhaitez citer un billet du blog comme dans? citer une phrase particulière, la phrase ou quoi?
[Répondre]
Rakesh
20 octobre
Nice tutorial! .... vraiment utile
[Répondre]
knoli
25 octobre
Je tiens à présenter des demandes pour l'Apple iPhone et iPod Touch. Toutes sortes d'applications, mais je ne sais pas comment commencer et par où commencer à partir de ce que quelqu'un pourrait me donner un peu d'aide

[Répondre]
kopfkribbeln webdesign-blog »Überlappendes Tabmenü
29 octobre
[...] Lässt. Häufiger Eine sehr Art der Website-das ist Navigation Tab-Navigation-Menü. Hier ist ein Tutorial wie man ein überlappendes Tabmenü [...]
knoli
21 novembre
Je suis intéressé à apprendre à programmer pour l'iPhone. Quelle serait la langue de Windows qui ressemble le plus le langage de programmation iPhone. Je tiens à écrire pour les deux machines Windows et iPhone sans avoir à ré-apprendre un langage de programmation.
________________
[url = http://unlockiphone22.com/] déverrouiller iPhone [/ url]
[Répondre]
Sumeet Chawla Réponse:
Novembre 21, 2009 à 7:42
Eh bien, si vous obtenez le coup du langage C, vous pouvez le code dans tout langage de programmation. C est comme la mère de tous les langages de programmation.
[Répondre]
Santosh PINGALE
22 décembre
Want 2 sais quel site, un livre ou d'autres choses que je dois utiliser pour concevoir un site Web d'Adobe Photoshop ... ... Merci à l'avance .. u plz mail me if u can ..: D
[Répondre]
Sumeet Chawla Réponse:
Décembre 23, 2009 à 11:28
ainsi, la meilleure ressource pour la conception de l'apprentissage est l'Internet. Elle est mise à jour toutes les minutes avec les dernières tendances et des tutoriels.
Voici quelques liens pour vous aider à démarrer 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 est le niveau de créativité que vous avez.
[Répondre]
45 Powerful CSS / JavaScript-Techniques - Smashing Magazine
13 janvier
Triangles [...] toutes écrites par des CSS. Vous pouvez facilement modifier les couleurs dans le fichier CSS et l'utiliser pour free.How au code un chevauchement Tabbed MenuMain menu principal de navigation est la partie d'une conception de site Web qui rend l'ensemble du site regard vif et [...]
45 Powerful CSS / JavaScript-Techniques «Social-Presse
13 janvier
[...] Comment coder un chevauchement par onglets 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 courant de style de menu de navigation étant 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. [...]
45 Powerful CSS / JavaScript-Techniques | TipTe.com
14 janvier
[...] Comment coder un chevauchement Tabbed MenuMain 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 courant de style de menu de navigation étant 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. [...]
45 Powerful CSS / JavaScript-Techniques | Tutorial51
14 janvier
[...] Comment coder un chevauchement Tabbed MenuMain 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 courant de style de menu de navigation étant 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. [...]
Legars
14 janvier
Salut, je peux juste dire que, même si c'est une carte intéressante, vous ne devriez pas avoir l'onglet de la page actuelle comme un lien. C'est un UX et l'accessibilité Big No-No.
[Répondre]
Sumeet Chawla Réponse:
14 janvier 2010 à 3:13 pm
Bonjour,
Quelle part faites-vous allusion? J'ai la classe de page en cours sur l'élément de liste et non pas l'élément de liaison.
[Répondre]
Dean
26 janvier
Je ne peux pas le faire: s
Je ne sais pas comment
Pouvez-vous s'il vous plaît aidez-moi
Il ne prend pas même mes tranches sur png24's
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 plus lil
Pouvez-vous s'il vous plaît aidez-moi?
Pouvez-vous le faire pour moi, s'il vous plaît?
[Répondre]
Dean
30 janvier
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 + lien actif à l'avant?
[Répondre]
Sumeet Chawla Réponse:
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 mange correctement et le z-index des valeurs bien aussi. Je ne pense pas que vous ayez le moindre problème ...
[Répondre]