Plus Lapped | Codepal

Posts Tagged 'plus rodée »

Comment coder un chevauchement onglets du menu principal

Wednesday, 14th Octobre, 2009

Il ya 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 se chevauchaient dans lequel chaque onglet semble être couché sur l'autre et donc de donner le menu entier 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 a été appelé ce tutoriel Photoshop Texture papier à partir de zéro puis de créer un Web Design Grungy avec elle! Écrit par Collis partir NetTuts.com Ce fini par être la principale inspiration pour mon site et tout en passant par le tutorial que j'ai trouvé Collis disant que:

"Maintenant, si je ne dis moi-même ces onglets un super look, et la raison qu'ils ne sont parce qu'elles se chevauchent. Malheureusement, cela les rend également plus difficile de travailler avec en HTML. Vous pouvez cependant faire une variété de choses avec des PNG transparents, ou alternativement juste faire changer les couleurs de texte dans les capotages et ne pas vous soucier de changer les couleurs onglet. 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 codage html un dans et après j'ai réussi pensé partager avec vous tous.

Étape 1.Gearing Up

Alors avant de commencer à coder ce genre de navigation par onglets en html / css, vous devez d'abord apprendre à 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 un simple spécialement pour ce tutoriel.

Maintenant laissez-moi préciser que il ya 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 de couleur d'acier bleu clair. Ainsi, plutôt que de découper les trois images pour chaque onglet, on peut sortir une tranche de sprite image.

Étape 2. Tranchage Les onglets du 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 rogner l'image de suivre les directives correctement et noter que j'ai fait le fond transparent, car nous aurons besoin d'un fond transparent si nous avons besoin de chevaucher les onglets. Recadrer l'image et l'enregistrer pour le web en PNG24 format. Un autre point à noter tout saucissonnage les images, c'est que le premier onglet à savoir l'onglet 'Accueil' ne devrais pas avoir la moindre ombre sur son côté gauche à l'état inactif. Ainsi, pour cet onglet spécifique que nous avons à créer un autre sprite sans l'ombre en elle.

Étape 3. Loin de code

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 faire bien paraître l'exemple, j'ai construit un échantillon vedette aménagement zone de contenu avec la barre de navigation se chevauchent. Le tracé 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 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 class="current"> <a href="index.html"> Accueil </ a> </ li>
			 <li <a class="portfolio"> href="portfolio.html"> Portfolio </ a> </ li>
			 <li class="services"> <a href="services.html"> Services </ a> </ li>
			 href="about.html"> <li <a class="about"> 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 principal. J'ai utilisé une simple liste non ordonnée comme toute autre barre de navigation et de style en utilisant une image de fond pour tag hyperlien 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"> A propos de nous </ a> </ li> <li class="contact"> <a href="contact.html"> Contact </ a> </ li> </ ul>

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

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

 ul # nav li-principale a {
	 position: relative;
	 largeur: 110px;
	 hauteur: 29px;
	 display: block;
	 ('../ images / url tabs.png ');: background-image
	 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 une {
	 images ('../ url / tab-home.png ');: background-image
 }
 ul # nav principale-li.current une {
	 background-position: top;
	 color: # ffffff;
 }
 ul # nav li-principale a: hover {
	 background-position: bottom;
	 color: # ffffff;
 }
 li.current ul # nav principale-a: hover {
	 background-position: top; / * Pour éviter l'onglet courant du changement de couleur au survol * /
	 color: # ffffff;
 }

Vous remarquerez que j'ai donné une classe correspondant à chacun des éléments de la liste et une classe nommée «actuel» à 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 croissant de telle sorte que chaque onglet se trouve à un plus haut l'axe z que l'onglet qui le suit. L'onglet des "courants" de la classe sera au plus haut niveau de l'axe z, car elle représente la page en cours et sera toujours rester sur quel sommet 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 la liste est fixée au relatif. 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;
 }
 li.contact ul # nav {principale-
	 z-index: 96;
 }

Même si nous avons attribué différentes valeurs de z-index pour les 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 sur le dessus de l'autre. Nous avons attribué les valeurs de z-index dans l'ordre décroissant de la gauche vers la droite. Par conséquent, nous allons juste 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 ajoutant 'margin-left' une 20px positifs pour annuler le mouvement de gauche des pupilles de la barre.

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

Mission Accomplie

Après le montage de tous les CSS et le XHTML ensemble, nous aurons notre menu à onglets de navigation se chevauchent principaux prêt à l'emploi. Ce fut mon point de vue 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 simplement discuter de quelques améliorations à cette procédure elle-même.
Voici quelques sites qui utilisent plus le rodage onglets que leur menu de navigation principale:
ILove2Design.at
HiddenDepth.ie
HotCards.com