Accentsconagua

Créer une zone de contenu avec onglets lisses en utilisant CSS & jQuery

Code
Share

L'un des plus grands défis pour les concepteurs Web consiste à trouver le moyen de placer beaucoup d'informations sur une page sans perdre en convivialité. Le contenu à onglets est un excellent moyen de traiter ce problème et a été largement utilisé sur les blogs récemment. Aujourd’hui, nous allons créer un petit bloc d’informations à onglets en HTML, puis le faire fonctionner à l’aide de javascript, puis nous arriverons au même résultat avec la bibliothèque jQuery..

Étape 1

Tout d’abord, nous avons besoin de quelque chose qui ait l’air génial. Donc, un rapide voyage dans Photoshop et le tour est joué, nous avons une belle maquette de ce à quoi devrait ressembler notre composant à onglets. C'est assez simple avec quelques dégradés supplémentaires pour rendre les nettuts superbes. Vous pouvez récupérer le fichier PSD de Photoshop pour cette image si vous voulez regarder de plus près, mais c'est assez simple et nous pouvons le construire à partir d'un JPG plat vraiment.

Étape 2

La première chose à faire lors de la construction est bien sûr de vous donner une idée approximative de la façon dont vous allez le faire. Cela devient plus facile avec plus de choses que vous avez développées. En regardant cette image, je dirais que la meilleure chose à faire est:

  1. Avoir un conteneur
    que nous allons tout placer à l'intérieur de. De cette façon, si nous avions besoin de positionner notre boîte ou de la déposer dans une barre latérale, nous pouvons simplement tout saisir dans son emballage.
    et copier + coller quelque part.
  2. Ensuite, nous aurons la zone de titre, probablement avec un étiquette
  3. Puis en dessous de cela nous aurons une seconde
    balise qui contiendra les onglets et le contenu. Ceci est la boîte gris foncé dans l'image.
  4. Ensuite, à l'intérieur, nous utiliserons une liste non ordonnée

Donc, pour résumer, ce sera quelque chose comme ça:

Ne vous inquiétez pas si regarder cette image ne vous fait pas immédiatement penser à cette structure. Parfois, vous avez juste besoin de faire les choses par essais et erreurs. Dans mon cas, j’ai fait ces petites choses à onglets à quelques reprises et je sais que c’est une façon simple et agréable de les faire..

En outre, il est bon de penser à une telle structure avant d’avoir beaucoup de noms de classes, d’identifiants et de contenus car il peut être difficile de voir la forêt à partir des arbres plus tard. Surtout quand vous ajoutez le contenu pour tous les différents onglets.

Alors maintenant que nous avons une idée de la façon de construire notre structure, passons à cela!

Étape 3

Maintenant, si vous avez suivi mes tutoriels sur PSDTUTS, vous saurez que j'aime un bon fond dégradé. Donc, avant même de commencer avec la structure à onglets, obtenons-nous un beau fond!

Ouvrez Photoshop, créez un document de 1000 x 1000 pixels et tracez un joli dégradé radial (subtil) comme celui présenté ci-dessous. Notez que j'ai dessiné à partir du centre / haut et que je me suis assuré que le dégradé est terminé au moment où j'arrive au bord du document. Cela signifie que je peux définir la couleur d'arrière-plan en HTML sur la couleur la plus foncée. Si quelqu'un étend la fenêtre de son navigateur, il sera transparent..

Étape 4

Donc, créez un nouveau répertoire pour le projet, puis créez un deuxième répertoire à l'intérieur appelé images et enregistrez cette image à l'intérieur comme background.jpg. Lors de la sauvegarde utiliser Fichier> Enregistrer pour le Web et les périphériques et sélectionnez JPG avec un réglage de qualité d’environ 70. Cela revient à une taille de fichier de 16 ko, ce qui n’est pas si mal. Il était un temps où il fallait vraiment économiser et économiser, mais maintenant vous voulez juste vous assurer que vous ne gaspillez pas stupidement la taille de vos fichiers..

Maintenant, nous créons un document HTML et écrivons du code:

    Structure à onglets - régulière

Ce sera donc la base de notre code HTML. Maintenant, nous allons créer le style.css documentez et écrivez ce qui suit:

 body background-image: url (images / background.jpg); répétition de fond: non répétée; position de fond: en haut au centre; couleur de fond: # 657077; marge: 40 px;

Quelques points à noter ici:

  1. Il est possible d'écrire ce même CSS en utilisant un raccourci et de réduire le nombre de lignes utilisées, mais c'est beaucoup plus clair de cette façon et mieux pour l'écriture de tutoriel.!
  2. Nous avons une image d’arrière-plan (le dégradé) et nous l’avons définie sur non répétée, car nous ne voulons qu’elle apparaisse une fois, elle est centrée et enfin la couleur d’arrière-plan (# 657077) est la couleur la plus sombre..
  3. J'ai ajouté une marge de 40px. Ceci est juste pour positionner mes affaires plus tard afin qu'il soit beau.

Vous pouvez voir le document HTML résultant ici. Notez que si vous redimensionnez votre fenêtre, c’est un joli fond dégradé. Wunderbar!

Étape 5

Ensuite, nous ajoutons notre structure à la page pour pouvoir commencer à la styler..

    Structure à onglets - régulière

Donc, comme vous pouvez le constater, j’ai utilisé la même structure que celle mentionnée à l’étape 2. identifiants et Des classes et du contenu réel. Voici le raisonnement derrière ce que j'ai fait:

  1. Pour le titre, j'ai placé le sous-texte "Select a Tab" dans un élément. Cela me permet d'utiliser le

    élément de positionnement global et la élément pour reformater et positionner le sous-texte.

  2. Le conteneur
    a un id = "tabbed_box_1" et un class = "tabbed_box". Je l'ai fait parce que nous pourrions réutiliser ce code plusieurs fois sur la même page. Si nous faisions cela, nous pourrions utiliser les identifiants pour les positionner à des endroits différents. Mais nous aurions toujours la classe pour faire le style. Alors que si nous utilisions l'identifiant pour le style, nous finirions par devoir définir les mêmes styles encore et encore pour des identifiants différents.
  3. J'ai donné les identifiants des liens et des zones de contenu, car nous devons utiliser Javascript pour les manipuler plus tard..
  4. Enfin j'ai donné le
      element un nom de classe. En fait, nous pourrions le coiffer sans classe en le coiffant .tabbed_area ul mais cela pourrait se confondre avec l'avenir
        nous mettons dans la zone de contenu. Donc, il est préférable que cela ait un nom de classe pour nous de faire référence à.

OK, donc sans styles, ça ne ressemble pas beaucoup… encore!

Étape 6

Maintenant, avec les éléments de style, je pense qu'il est préférable de travailler à partir de l'élément extérieur. Nous allons donc commencer par cet élément -

- que nous utiliserons pour positionner la boîte bien au centre de notre document en utilisant ce code: 

 #tabbed_box margin: 0px auto 0px auto; largeur: 300px;

Étape 7

Maintenant, nous allons faire la zone de titre. Nous pouvons styler le titre comme ceci:

 .tabbed_box h4 font-family: Arial, Helvetica, sans-serif; taille de police: 23px; couleur: #ffffff; espacement des lettres: -1px; marge inférieure: 10px;  .tabbed_box h4 petit color: # e3e9ec; poids de police: normal; taille de police: 9px; famille de polices: Verdana, Arial, Helvetica, sans serif; text-transform: majuscule; position: relative; en haut: -4px; à gauche: 6px; espacement des lettres: 0px;

Quelques points à noter ici:

  1. Au lieu de simplement définir des styles pour h4, j'ai défini pour .tabbed_box h4. Ceci est important dans un document HTML plus volumineux, car vous pourriez avoir un autre style h4 ailleurs. Donc, vous voulez vous assurer que vous ne vous superposez pas ou ne causez pas de problèmes de chevauchement futurs.
  2. Vous remarquerez que j'ai également ajusté la marge inférieure du h4 à 10 px. C'est pour que l'espacement semble correct. Il est important de savoir que de nombreux éléments ont des valeurs par défaut. Par exemple, un h4 a déjà une marge inférieure et est plus grande que nous le souhaiterions. Donc, si nous n’avons pas défini cela nous-mêmes, il apparaîtrait avec une marge plus grande. Certaines personnes utilisent des feuilles de style spéciales qui réinitialisent toutes ces valeurs par défaut, mais je me suis habitué à les réinitialiser individuellement lorsque j'ai besoin de.
  3. Vous verrez que j'ai également utilisé l'attribut text-transform pour transformer le petit texte en majuscules. Nous aurions bien sûr pu simplement l'écrire en majuscules, mais j'aime bien le faire de cette façon!
  4. Vous remarquerez aussi que dans la petite définition, je lui ai donné la position suivante: définition relative, c’est pour que je puisse ajuster où elle apparaît, en la déplaçant de 4 pixels vers le haut et de 6 pixels vers la droite..
  5. Enfin, lors du style de l'élément h4, je lui ai donné un espacement négatif des lettres, mais cela signifie que le petit élément a le même espacement des lettres négatives, ce que nous ne voulons pas. Donc, je dois le définir à nouveau comme 0px là. Cela est dû au fait que les styles tombent en cascade - d'où le nom de Cascading Style Sheets. Souvent, vous remarquerez que quelque chose a l'air bizarre sur votre page et ce sera parce que l'élément a hérité d'un style que vous avez totalement oublié. Quand j’ai fait ce style pour la première fois, j’ai regardé le petit bout pendant des siècles en essayant de comprendre pourquoi il avait l’air si compact!

Étape 8

Ensuite, nous donnerons notre intérieur

un peu de style avec ce code:

 .tabbed_area border: 1px solid # 494e52; couleur de fond: # 636d76; rembourrage: 8px;

Cela lui donne juste un peu de définition et écarte les éléments intérieurs des côtés. Vous pouvez voir où nous en sommes dans l'image ci-dessous.

En travaillant de l’extérieur, nous avons donné à notre élément un peu de forme et il est beaucoup plus facile de voir comment il se présentera. De plus, vous aurez souvent des contraintes venant de l’extérieur, par exemple, il se peut que la zone doive s’inscrire dans une colonne d’une certaine largeur. Enfin, c’est aussi une bonne idée de sortir, car alors tout héritage de style est clair. Par exemple, si vous utilisez les éléments intérieurs en premier, les styles ultérieurs peuvent affecter ces éléments intérieurs et vous devez revenir en arrière et vous réajuster quand même..

Étape 9

Maintenant nous arrivons aux bonnes choses - les onglets! Si nous ajoutons ce petit morceau de CSS, nous ferons beaucoup pour que les onglets ressemblent davantage à des onglets:

 ul.tabs margin: 0px; remplissage: 0px;  ul.tabs li list-style: none; affichage: en ligne;

Ce code dit que le

Code
×