Notre blog
Écrits, le partage des connaissances, Nouvelles, Tutoriels
Chargement en cours ...
Comment un chevauchement Code onglets Menu principal
14 octobre 2009 - Par Sumeet
menu principal de navigation est la partie de la conception de site Web qui rend l'ensemble du site regard vif et complet. Mais le type le plus commun du style de menu de navigation toujours utilisé un lot est le menu de navigation par onglets. Voici un tutoriel sur la façon de coder un chevauchement onglets du menu.
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 qui se chevauchent dans laquelle chaque onglet semble être située sur l'autre et, partant, de donner l'ensemble du menu une sensation très réaliste. Lors de 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 à partir de zéro puis créer un Grungy Web Design avec elle! Rédigé par Collis de NetTuts.com Cette fini par être la principale source d'inspiration pour mon site et en passant par le tutoriel, je trouve Collis disant que:
"Maintenant, si je le dis moi-même ces onglets ont une allure impressionnante, et la raison qu'ils le font parce qu'ils se chevauchent. Malheureusement, ce rend également plus difficile de travailler avec en HTML. Vous pouvez cependant faire une variété de choses avec PNG transparent, ou alternativement simplement faire changer les couleurs du texte dans un capotage et ne pas s'inquiéter en modifiant les couleurs onglet. Quoi qu'il en soit tout cela est un peu au-delà du champ d'application de ce tutoriel. Qu'il suffise de dire 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
Donc, avant de commencer à coder ce genre de navigation par onglets en html / css code, vous devez d'abord apprendre à créer une dans Photoshop en premier. Le tutoriel ci-dessus est très détaillé et Collis fait un excellent travail dans l'enseignement comment 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 la couleur d'acier bleu clair. Ainsi, plutôt que de découper les trois images pour chaque onglet, on peut couper à une image sprite.
Étape 2. Tranchage les languettes du PSD
Alignez les pattes à la verticale en utilisant des grilles comme le montre l'image ci-dessus. Vous pouvez également aligner les onglets horizontale plutôt que verticale, mais alors la position CSS image de fond seront accessibles d'une manière différente. Le choix dépend de la personne à l'autre mais les deux fonctionnent parfaitement. Bien que de culture de l'image de suivre les directives correctement et note que j'ai fait le fond transparent parce que nous allons avoir besoin d'un fond transparent si nous avons besoin de chevaucher les onglets. Recadrer l'image et l'enregistrer pour le web en format PNG24. Un autre point à noter tout trancher les images, c'est que le premier onglet à savoir l'onglet «Accueil» ne devrait pas être avoir aucune 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 complète et nous avons toutes les images nécessaires, nous pouvons commencer à coder notre barre de navigation. Juste pour l'exemple l'air bien, j'ai construit un échantillon vedette aménagement zone de contenu avec la barre de navigation se chevauchent. La mise en page l'ensemble 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 "> <meta content="text/html; <head> charset=utf-8" http-equiv="Content-Type" /> href lien <=" 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> < classe li = "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> <class="clear"> <div / div> <div id = "vedette"> <div id="featured-content"> </ div> </ div> </ div> </ body> </ html> Regardons notre menu de navigation principal. J'ai utilisé une simple liste à puces comme toute autre barre de navigation et de style en utilisant une image de fond à la 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 principale ( float: left; position: relative; display: inline; )
Rappelez-vous que nous utilisons un sprite sur l'image pour les onglets dans lesquels les plus haut onglet 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 le "background-position" propriété de bien placer les images de leurs Etats respectifs, comme suit:
ul # nav li-principale une position (: relative; largeur: 110px; height: 29px; display: block; background-image: url ('../ images / tabs.png '); background-position: center center; couleur : # 44403b; text-decoration: none; font-size: 14px; padding-top: 12px; text-align: left; padding-left: 30px; font-weight: bold;) ul # nav-li.home principal d'un (background-image: url ('../ images / onglet-home.png ');) ul # nav-li.current principale a (background-position: top; color: # ffffff;) ul li main-nav # a: hover (background-position: bottom; color: # ffffff;) ul # nav-li.current principale a: hover (background-position: top; / * Pour éviter l'onglet courant de l'évolution de la couleur sur le hover * / color: # ffffff;) Vous remarquerez que j'ai donné un cours 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 de chaque onglet dans un ordre croissant de telle sorte que chaque onglet est au plus d'axe z de l'onglet qui le suit. L'onglet avec la classe "courants" 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 position pour l'élément de liste est définie par rapport. Sans valeur le positionnement de la propriété z-index ne fonctionne pas à tous.
ul # main-nav (li.current z-index: 100; ) ul # main-nav (li.home z-index: 100; ) ul # main-nav (li.portfolio z-index: 99; ) ul # li.services principale-nav ( z-index: 98; ) ul # main-nav (li.about z-index: 97; ) ul # main-nav (li.contact z-index: 96; )
Même si nous avons attribué des valeurs différentes z-index pour les onglets, ils ne semblent toujours pas sur patte 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 gauche à droite. Par conséquent, nous suffit d'appuyer sur chaque onglet à partir de la droite à environ 20px à sa gauche en ajoutant une marge négative »à gauche de propriété à la« ul li # main-nav "et appuyez sur la barre de navigation toute liste non ordonnée vers la gauche l'ajout d'un 20px positive 'margin-left "pour annuler le mouvement de gauche pupilles de la barre.
ul # main-nav ( margin-left: 20px; ) ul # nav li principale ( 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 double emploi onglet menu principal de navigation prêt à l'emploi. C'était mon opinion sur la façon de créer ce genre de menu et je suis sûr qu'il existe de nombreuses façons de mieux à faire de même. Je serais heureux si vous pouviez partager n'importe quel autre moyen de le faire ou tout simplement discuter de certaines améliorations à cette procédure elle-même.
Voici quelques site qui utilisent plus que leurs pattes rodage menu principal de navigation:
ILove2Design.at
HiddenDepth.ie
HotCards.com
Tags: CSS , comment , menus , navigation , plus rodés
A propos de l'auteur
Sumeet est le fondateur de Code-pal. Il travaille en tant que développeur web, est un programmeur hardcore, bourreau de travail, Guy fun et qui aime sa famille. le suivre sur Twitter et Facebook.
Vous pouvez suivre les réponses à cette entrée par RSS 2.0 flux. Vous pouvez laisser une réponse , ou trackback depuis votre propre site.
Partager les connaissances
D'autres postes qui pourraient vous plaire
34 Réponses
Trackbacks et Pingbacks
- kopfkribbeln webdesign-blog »Überlappendes Tabmenü
- 45 CSS puissant / JavaScript-Techniques - Smashing Magazine
- 45 CSS puissant / JavaScript-Techniques «Social-Presse
- 45 CSS puissant / Techniques | TipTe.com-JavaScript
- 45 CSS puissant / JavaScript-Techniques | Tutorial51
- 45 CSS puissant / JavaScript-Techniques »Perednik.com Shai
- 45 CSS puissant / JavaScript-Techniques | moreInet.com | Webdesign, Graphic Design Service à Pattaya
- onglets qui se chevauchent | Web Design Deux
- 45种有用的CSS / Javascript技巧| narco
- CSSFind
- 45 CSS puissant /-Techniques | JavaScript DX blog
- designfloat.com
- zabox.net
- joyoge.com
Laisser un commentaire
Parcourir
- Le «problème Sélectionnez après l'utilisation et de sa solution jqTransform 37 commentaire (s)
- Comment un chevauchement Code onglets du menu principal 34 commentaire (s)
- Spice Up Your Twitter RSS Display Box L'utilisation de CSS 13 commentaire (s)
- Personal Computer adjoint 8 commentaire (s)
- Business Modèle 6 commentaire (s)
- Orange 4 commentaire (s)
- Summer of Love 3 commentaire (s)
-
Chris, sachez que ma méthode décrite ci-dessus le feu le «changement» ...
-
Chris, Il ya quelques options. 1. Vous pouvez appeler jqTransformReset ...
-
Testé uniquement sous jQuery 1.4, mais si vous ajoutez: select.trigger $ (le «changement» ...
-
Salut, Il s'agit d'un mod Merci vraiment utile - pour mettre l'effort dans les i. ..
-
J'ai le même problème, sauf que j'ai besoin de la valeur d'option, pas e ...
Excellent tutoriel et bien écrit. Merci pour le partage.
Merci Pliggs .. Ce fut un honneur pour écrire le tutoriel à FaqPal trop
Bonjour de la Russie!
Puis-je citer un post sur votre blog avec le lien pour vous?
Hey Salut De l'Inde!
Vous souhaitez citer un post du blog comme dans? cite une phrase en particulier, une phrase ou quoi? 
Nice tutoriel! .... vraiment utile
Je veux faire des applications pour l'Apple iPhone et iPod Touch. Tous les types 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 le iPhone. Quelle serait la langue de Windows qui ressemble le plus le langage de programmation iPhone. Je tiens à écrire pour les machines Windows et les deux iPhones sans avoir à ré-apprendre un langage de programmation complet.
________________
[url = http://unlockiphone22.com/] déverrouiller iPhone [/ url]
Eh bien, si vous obtenez le coup du langage C, vous pouvez le code dans un langage de programmation. C est comme la mère de tous les langages de programmation.
Want 2 savoir quel site web, un livre ou d'autres choses que je dois utiliser pour concevoir un site Web d'Adobe Photoshop ... ... u remercie à l'avance .. plz mail me if u can ..: D
ainsi, la meilleure adresse pour apprendre la conception est l'Internet. Il est mis à jour chaque minute 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.
Salut, je peux dire que, même si c'est un menu intéressant, vous ne devriez pas l'onglet en cours page en tant que lien. C'est un UX et l'accessibilité gros no-no.
Bonjour,
Quelle partie parlez-vous? J'ai la classe de page actuel sur la liste des éléments et non pas l'élément de liaison.
Je ne peux pas le faire: s
Je ne sais pas comment
Pouvez-vous m'aider s'il vous plaît
Il ne prend même pas mes les tranches de png24
Je ne suis pas tellement bien 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 n'avez
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 bien et mange les 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 mis à jour avec de nouvelles content.I fait trois de mes amis vous 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 accueillis
Merci beaucoup. J'étais sur le point de renoncer à la codification de la navigation de la conception originale tutoriel. Cela m'a aidé beaucoup!
Heureux de voir que je pouvais être utile Tom