Lors de la création de balises pour des écritures plus longues sur une seule page, il est souvent important de créer des structures de navigation permettant de naviguer entre différentes parties de ce texte. Ceci est supporté nativement en HTML, ce qui nous permet de passer directement aux sections d’une page et même de les visiter directement à partir de liens externes..
Une liste À part, vous voyez le lien de section et l’identificateur de fragment (balise de hachage…) dans l’URL.La documentation d'aide sur GitHub est un autre endroit où vous trouverez des liens de section dynamiques.
Dans ce tutoriel, nous aborderons une technique permettant de générer dynamiquement ces liens avec JavaScript, puis de les animer à l'aide de CSS. Plongeons dedans!
Balisage
La première étape nécessaire consiste à créer un balisage adapté à votre pièce écrite. Nous supposerons que vous avez un article, et à l'intérieur de cet article, il y a beaucoup sections, chacun avec son propre h1 tag et contenu suivant.
Voici à quoi pourrait ressembler votre code HTML:
Voici une partie
Mobilisez votre fierté lors de la campagne de financement, les critères de la fondation sauvent des vies Droits de l’homme, don de pouvoir. Générosité changement climatique, leaders mondiaux de la population vulnérable changement durable. Résultats, honnêteté, pays en développement perturbant la conception centrée sur l’être humain; progrès de la mise en œuvre du processus du HCR à de nombreuses voix.
Les aînés; la complexité célèbre; aide juridique diversification assainissement entrepreneuriat social source ouverte assistance contribution agents de santé communautaires.
Voici un autre
Élargir la propriété communautaire; Kickstarter service public consommation collaborative, emploi Rockefeller partenariats public-privé transformationnel. Partenaire Aga Khan Économies informelles Nécessités Villes collaboratrices Institutions publiques Opportunité Nutrition.
Et encore un de plus
La liberté d'expression du secteur public est significative, facilitatrice; Andrew Carnegie Bloomberg, implication émergente, situation de crise de la mondialisation. Genre, égalité des sexes vérité amélioration à long terme de la qualité engagement civique des jeunes égalité évolutive et famine durable Agence de Médecins du Monde qui changent des vies.
Analyse sociale, affiliation; pierre angulaire des bénéficiaires qui sauvent la vie Jane Addams liberté d'expression et mouvements de changement élevant les gens vers le haut des défis sociaux changement social positif perturbateur avenir.
Remarque: comme vous pouvez le constater, nous appliquons un identifiant aux sections séparées. Nous avons choisi de le faire parce que le identifiant est en fait liée à la section elle-même, pas à la h1 étiquette.
Pour sauter à un élément avec une donnée identifiant sur une page, vous créez une balise d'ancrage avec un href valeur égale à la marque de hachage suivie par le identifiant. Par exemple, dans notre exemple de contenu ci-dessus, pour passer à la deuxième section, nous pourrions créer le lien suivant:
Deuxième section
Il existe de nombreuses façons de le faire: vous pouvez coder les liens à la main, vous pouvez utiliser une abstraction qui construit votre section HTML, y compris le lien. Dans ce tutoriel, cependant, nous allons utiliser JavaScript pour générer les liens de manière dynamique..
Vanilla JS
Voici le JavaScript:
var sections = document.querySelectorAll ('section'); pour (var i = 0; i < sections.length; i++) var section = sections[i]; var id = section.id; var h1 = section.querySelectorAll('h1')[0]; var text = h1.innerHTML; h1.innerHTML = ""+ text +""+" "+ id +" ";
Version jQuery
Et voici une version jQuery, réalisant essentiellement la même chose:
$ ('article section'). each (fonction (i, el) var id = $ (this) .attr ('id'); var h1 = $ (this) .find ('h1'). first () ; var t = h1.text (); h1.html (""+ t +""); h1.append (" # "+ id +" "););
Les deux donnent le même résultat. Nous recherchons tous les descendants de la section d'un article donné, et pour chacun de ceux-ci nous trouvons la identifiant de cette section. Ensuite, nous construisons un lien qui pointe vers identifiant et l'ajouter à la entête élément. Nous encapsulons également le texte existant dans un intervalle pour un style plus flexible.
En parlant de style…
Appliquons ensuite quelques CSS de base pour fournir un effet de masquage et de révélation:
@import url (http://fonts.googleapis.com/css?family=Fira+Sans:300,400,700); body font-family: "Fira Sans", sans serif; couleur: # 444; article width: 90%; marge: 0 auto; h1 position: relative; span float: left; a transition: all .4s; opacité: 0; couleur: # FD9148; poids de la police: 300; marge gauche: 12px; texte-décoration: aucun; &: hover a text-indent: 0; opacité: 1;
Ces règles définissent d’abord certains styles de base; Police de caractère, Couleur, article largeur etc. Ensuite, nous déclarons que le une (que nous avons ajouté précédemment via JavaScript) aura des transitions appliquées et aura une opacité de 0 par défaut. Lorsque nous la survolons, son opacité passe à 1, ce qui nous donne l'effet d'atténuation..
Et c'est tout! Nous avons maintenant une implémentation relativement simple de cette technique en action:
Conclusion
Nous venons de créer une amélioration très utile pour les pages Web riches en contenu! La solution de rechange est également gracieuse: si JavaScript est désactivé, les liens ne s'affichent tout simplement pas - et si une balise de hachage est présente à la fin de l'URL, elle est ignorée..
Notre effet de fondu est un moyen simple de présenter le lien. Comment pouvez-vous l’améliorer? Quels types d'animations pourriez-vous appliquer? Souhaitez-vous positionner le lien de la même manière? Nous attendons avec impatience vos idées (et surveillez le projet communautaire que nous allons bientôt lancer sur ce sujet!)
Accentsconagua
Share
Une liste À part, vous voyez le lien de section et l’identificateur de fragment (balise de hachage…) dans l’URL.
La documentation d'aide sur GitHub est un autre endroit où vous trouverez des liens de section dynamiques.