Notre Blog
Écrits, le partage des connaissances, Nouvelles, Tutoriels
Chargement en cours ...
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 utilisé un lot est le menu de navigation par onglets. Voici un tutoriel sur la façon de coder un menu à onglets qui se chevauchent.
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 <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>
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
Tags: CSS , comment , de menu , de navigation , plus rodé
A propos de l'auteur
Sumeet est le fondateur de code-pal. Il travaille en tant que développeur web, est un programmeur de hardcore, bourreau de travail, type d'amusement et aime sa famille. Le suivre sur Twitter et Facebook.
Vous pouvez suivre toutes les réponses à cette entrée via RSS 2.0 flux. Vous pouvez laisser une réponse , ou trackback depuis votre propre site.
Partager les connaissances
Autres Posts qui pourraient vous intéresser
47 réponses
Rétroliens et Pingbacks
- kopfkribbeln webdesign-Blog »Überlappendes Tabmenü
- 45 Puissant CSS / JavaScript Techniques - Smashing Magazine
- 45 Puissant CSS / JavaScript Techniques «social-Presse
- 45 Puissant CSS / JavaScript Techniques | TipTe.com
- 45 Puissant CSS / JavaScript Techniques | Tutorial51
- 45 Puissant CSS / JavaScript Techniques »Shai Perednik.com
- 45 Puissant CSS / JavaScript Techniques | moreInet.com | Webdesign, Service Design Graphique à Pattaya
- Chevauchement des onglets | Web Design Deux
- 45种有用的CSS / Javascript技巧| narco
- CSSFind
- 45 Puissant CSS / JavaScript Techniques | DX blog
- designfloat.com
- zabox.net
- joyoge.com
- 100 Grande Tutoriels CSS Menu
- Best 50 tutoriels CSS Menu avec effet Jquery | Desua le monde de la Connaissance
- 100 Grande Tutoriels Menu CSS - pocongseXy:: Art et Dezign::
- 100 Grande Tutoriels CSS Menu | Concepteur en Malaisie
- E-sitesweb »45 Puissant CSS / JavaScript Techniques
Laisser un commentaire
Parcourir
- Le «Sélectionner» Problème Après l'aide jqTransform et sa solution 70 commentaire (s)
- Comment coder un chevauchement onglets du menu principal 47 commentaire (s)
- Intégration Zoom Cloud avec WP e-Commerce d'or Panier Galerie 31 commentaire (s)
- Modèle Grunge 19 commentaire (s)
- iPhone Application Template 19 commentaire (s)
- Listify, Convertir le texte brut à des éléments HTML 17 commentaire (s)
- Modèle d'affaires 16 commentaire (s)
Excellent tutoriel et bien écrit. Merci pour le partage.
Merci Pliggs .. Ce fut un honneur d'afficher le tutoriel à FAQpal trop
Bonjour de la Russie!
Puis-je citer un billet dans votre blog avec le lien pour vous?
Hey Salut De l'Inde!
Vous souhaitez citer un post sur le blog comme dans? citer une phrase particulière, une phrase ou quoi? 
tutoriel sympa! .... vraiment utile
Je veux faire des applications pour l'Iphone d'Apple et l'iPod Touch. Toutes sortes d'applications, mais je ne sais pas comment commencer et par où commencer quelqu'un peut me donner un peu d'aide
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 voudrais écrire pour les machines Windows à la fois et les iPhones sans avoir à ré-apprendre un langage de programmation complet.
________________
[Url = http://unlockiphone22.com/] iPhone Unlock [/ url]
Eh bien, si vous obtenez le coup du langage C, vous pouvez coder dans n'importe quel langage de programmation. C est comme la mère de tous les langages de programmation.
Vous voulez savoir quel site web 2, un livre ou d'autres trucs que je dois utiliser pour concevoir un site Web d'Adobe Photoshop ... ... Merci d'avance .. u plz email me if u can ..: D
ainsi, la meilleure ressource pour l'apprentissage la conception est l'Internet. Il est mis à jour chaque minute avec les dernières tendances et des tutoriels.
Voici quelques liens pour vous lancer avec des
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.
Salut, je peux juste dire que même si c'est un menu intéressant, vous ne devriez pas avoir l'onglet page actuelle comme un lien. C'est un UX et l'accessibilité gros no-no.
Bonjour,
Quelle partie faites-vous allusion? J'ai la classe de page actuelle sur l'élément de liste et non l'élément de liaison.
Je ne peux pas faire: s
Ne savent pas comment
Pouvez-vous m'aider s'il vous plaît
Il n'a même pas prendre mon tranches hors du PNG24
Je ne suis pas si bon avec CSS et je veux vraiment ce menu se chevauchent
Je n'utilise que deux images et a donné le nom de la même chose que vous ne
mais ne fonctionne pas
Mon image est un peu plus faible mais plus lil
Pouvez-vous s'il vous plaît m'aider?
Pouvez-vous faire pour moi s'il vous plaît?
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 + en face?
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 bien aussi. Je ne pense pas que vous avez un problème ...
Wonerful! J'aime la façon dont ce blog est toujours à jour avec des produits frais content.I fait trois de mes amis abonner btw, lol
comment voulez-vous télécharger ce
c'est une boucle éternelle
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.
Vos commentaires sont toujours les bienvenus
Merci beaucoup. J'étais prêt à abandonner le codage de la navigation à partir du tutoriel de conception originale. Cela m'a aidé beaucoup!
Heureux que je pourrais être d'aider Tom
L'exemple qui fonctionne bien et est vraiment superbe prospectifs.
Toutefois, il 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
travaille avec cet exemple?
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 pure CSS
Heya. Tutoriel Awesome. 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 aux menus déroulants à plusieurs niveaux. Est-il possible de modifier ce code? Alors qu'un menu déroulant à plusieurs niveaux peuvent être atteints?
Thanx et salutations.
Dernier blog de Phoenix .. mais là encore, ne fut affichage
Yup, vous pouvez facilement le modifier pour ajouter des menus à plusieurs niveaux. Recherchez tous les menus à plusieurs niveaux tutoriel là-bas. Fondamentalement, l'élément li aura un élément ul avec le lien hypertexte. L'élément ul agira en tant que sous-menu (menu déroulant)
Je voulais juste vous donner un cri de la vallée du soleil, la grande information. Très apprécié.
Je viens de découvrir ce à partir Smashing Magazine. Merci pour ce tutoriel grande.
Que pensez-vous est le nombre maximum d'onglets du menu que je peux mettre sur le dessus de mon site - J'aimerais vraiment avoir 13 -, c'est que pour beaucoup?
Suppppppppppper tutoriel .... Merci beaucoup ... ... ... ...