Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Identifiez-vous Inscrivez-vous Accueil du forum Aide sur le forum
CE FORUM EST FERMÉ DEFINITIVEMENT
NOUVEAU FORUM A CETTE ADRESSE: https://forum.lauyan.com
Forum TOWeb|-TOWeb| |-Tutoriaux pour les utilisateurs| | |-Onglets responsives en CSS pur, sans jQuery. « sujet précédent | | sujet suivant »
Pages: [1] Bas de page Imprimer
Auteur Fil de discussion: Onglets responsives en CSS pur, sans jQuery.  (Lu 3942 fois)
Utev
Full Member
***

Nombre de "j'aime" : 0
Messages: 163


C++ & music: http://www.reverbnation.com/snupulus


WWW
« le: 09 Octobre 2018 à 09h20 »
Bonjour,

J'écris ce post car j'ai simplifié ceci (https://stanhub.com/tutorials/responsive-horizontal-css-only-tabs/) à TOWeb et ça fonctionne vraiment bien.
Il y a deux parties :
- Le code CSS pour la présentation.
- Le code HTML pour le contenu.

Sources et explications de l'auteur ici : https://stanhub.com/create-responsive-tabs-using-css-only-no-jquery/
En ôtant ça et là du code, de façon empirique, j'en suis à une version minimaliste que vous pourrez adapter à votre site.

CSS simplifié :
Code:
<style>
   .main {margin: 0 auto;}  
   .content { margin-top: -16px; }
   .content > div {display: none; margin-top: -16px; }
 
   input {display: none;}
   label {display: inline-block; text-align:left;}
   label:hover {background: rgba(178,190,172,0.5); cursor: pointer;}
   input:checked + label {background: rgba(178,190,172,0.5);}
 
   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   .
   .
   .
   #tabN:checked ~ .content #contentN {
     display: block;
   }
</style>

Ce code CSS est à copier dans le bouton '<head> ...' de chaque page où ces onglets sont utilisés.
Ne pas confondre avec le bouton 'Section <HEAD>...' du (4ème) menu TOWeb : Options de sécurite & HTML !

HTML simplifié :
Code:
<div class="main">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Titre onglet 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Titre onglet 2</label>
.
.
.
<input id="tabN" type="radio" name="tabs">
<label for="tabN">Titre onglet N</label>
 
<div class="content">
<div id="content1">
// Votre code ici.
</div>
<div id="content2">
// Votre code ici.
</div>
.
.
.
<div id="contentN">
// Votre code ici.
</div>
</div>
</div>

Ce code HTML est à placer dans un champ HTML.
Ne pas avoir oublié le code CSS dans le bouton head de la page concernée !

Ne connaissant pas bien CSS et HTML, si vous trouvez des corrections/améliorations à faire pour cette adaptation à TOWeb n'hésitez pas, merci d'avance !

Bonne journée.
« Dernière édition: 11 Octobre 2018 à 10h29 par Utev » Journalisée
TOWeb V7 édition Studio. 5ème version achetée.
http://utev.online
yannexpress
Full Member
***

Nombre de "j'aime" : 0
Messages: 101



WWW
« Répondre #1 le: 09 Octobre 2018 à 10h18 »
Ben voila ça  c est le genre de thème que je voudrais trouver dans toweb 7: Simple et léger.
Journalisée
www.yannexpress.com
Utev
Full Member
***

Nombre de "j'aime" : 0
Messages: 163


C++ & music: http://www.reverbnation.com/snupulus


WWW
« Répondre #2 le: 09 Octobre 2018 à 10h25 »
Je suis parti du thème Baysnap de TOWeb : http://www.lauyan.com/test-rwd/index.php?mode=twtpl&tplid=baysnap&lang=fr
Journalisée
TOWeb V7 édition Studio. 5ème version achetée.
http://utev.online
frangin62
Invité
« Répondre #3 le: 10 Octobre 2018 à 09h14 »
Bonjour
C'est vrai que l'utilisation d'onglets est parfois un plus. Il me semble que cela a été supprimé avec l'arrivée de la V5, si je me trompe corrigez moi les anciens.
Seulement, la majorité des TOWébiens ont choisi ce logiciel parce qu'il n'y a pas à programmer, je pense même que beaucoup ne connaissent ni HTML ni CSS. S'ils vont voir ton site et découvrir l'usage que tu en as fait, ils se sauvent vite fait  Clin d'oeil
Tu devrais adapter les termes au langage TW, c'est à dire  'une macro',  ici c'est un champ HTML,
'//Votre code ici',    Votre texte ici  est plus explicite. C'est vraiment très minimalisé, comment font les gens s'il veulent insérer une image, du texte en gras, modifier la taille du texte etc...etc...

Une remarque sur le CSS  les ' margin-top -16px ' font écrire les textes sur les onglets, je pense que le " - " est une erreur.

Autrement l'idée est bonne mais pour un programmeur.

Cdlt
frangin62
Journalisée
Ghost
Moderateur
Hero Member
*****

Nombre de "j'aime" : 106
Messages: 4546
« Répondre #4 le: 10 Octobre 2018 à 13h13 »
Citation de: frangin62 le 10 Octobre 2018 à 09h14
Bonjour
C'est vrai que l'utilisation d'onglets est parfois un plus. Il me semble que cela a été supprimé avec l'arrivée de la V5, si je me trompe corrigez moi les anciens.
Tu ne te trompes pas  Clin d'oeil

Sur le second point je rejoins tout à fait l'avis de Frangin, si vous vous voulez qu'on puisse pleinement admirer et surtout utiliser vos talents de programmateurs, alors il faut aller au fond du sujet et créer un VRAI tuto, c'est à dire un truc où chaque étape est détaillée à fond. Un truc où même tata "Ginette"  Souriant qui n'y connait rien de rien puisse utiliser votre script.  Souriant Souriant

Je profite un peu du sujet, il y a une fonction qu'offre toweb et que je n'ai jamais vu utilisée sur un site toweb. Ca ne remplace pas les onglets mais ça permet une présentation sympa. Lauyan l'utilise dans son aide en ligne ici: https://www.lauyan.com/fr/catalogues.html. Vous remarquerez en haut de page un "précédent" et un "suivant" et en bas de page un "sommaire". Toweb offre la possibilité d'agencer ça comme on veut, un sommaire en haut de page, ou en haut et bas de page, précédent et suivant en bas de page...bref, faites le test et vous verrez (je l'avais utilisé sur un site en guise de carnet de note, ça avait de la gueule et de mémoire il me semble que Jacmgt qui était friand des onglets avait trouvé le sujet intéressant).
Pour cela il faut aller dans "menu du site" / "nouvel article" et sur la droite il y a toutes les options pour gérer la navigation  Clin d'oeil Clin d'oeil
« Dernière édition: 10 Octobre 2018 à 13h15 par Ghost » Journalisée
v2 à v10.
Utev
Full Member
***

Nombre de "j'aime" : 0
Messages: 163


C++ & music: http://www.reverbnation.com/snupulus


WWW
« Répondre #5 le: 11 Octobre 2018 à 10h07 »
Merci pour vos retours.

Merci frangin62, j'ai rectifié mon vocab' -> Champ HTML.Pour ce -16px, c'est la valeur empirique trouvée pour que le texte se rapproche le plus de l'onglet, je ne suis pas encore arrivé à le coller. Comme je l'ai écris je connais pas grand chose  en HTML/CSS. Par exemple : sur le lien posté juste en dessous, si vous placez la souris sur 'comprendre header', le fond devient blanc, comme lorsque vous placez la souris sur un des onglets non actif. Je crois que TOWeb partage avec le code CSS une sorte de balise mais là je décroche. Si quelqu'un peut éclairer ma lanterne ?

Mix de ce que Ghost a dit juste avant : Articles + accordéon + onglets : http://philippe.reynier1.free.fr/www/utev/base-fr.html. J'ai longtemps cherché comment présenter mon code de façon optimale, surtout pour moi d'ailleurs, pour bien voir où j'en suis dans ce projet. Donc impossible de me passer des onglets pour ce projet.

En ce quiconcerne tata Ginette, vous lui passerez bien le bonjour !

Bonne journée !
« Dernière édition: 11 Octobre 2018 à 10h41 par Utev » Journalisée
TOWeb V7 édition Studio. 5ème version achetée.
http://utev.online
Ghost
Moderateur
Hero Member
*****

Nombre de "j'aime" : 106
Messages: 4546
« Répondre #6 le: 11 Octobre 2018 à 13h06 »
Citation de: Utev le 11 Octobre 2018 à 10h07
Mix de ce que Ghost a dit juste avant : Articles + accordéon + onglets : http://philippe.reynier1.free.fr/www/utev/base-fr.html. J'ai longtemps cherché comment présenter mon code de façon optimale, surtout pour moi d'ailleurs, pour bien voir où j'en suis dans ce projet. Donc impossible de me passer des onglets pour ce projet.

Ah, tu vois que c'est sympa cette fonction, et les towebiens la boudent, certainement par manque de curiosité  Souriant Souriant
Journalisée
v2 à v10.
frangin62
Invité
« Répondre #7 le: 11 Octobre 2018 à 15h00 »
Bonjour
Citation de: Utev le 11 Octobre 2018 à 10h07
Merci pour vos retours.
Merci frangin62, j'ai rectifié mon vocab' -> Champ HTML.
Clin d'oeil
Bizarre, chez moi, avec -16px, le texte couvre les onglets en utilisant ton code tel quel.

Citation de: Utev le 11 Octobre 2018 à 10h07
Par exemple : sur le lien posté juste en dessous, si vous placez la souris sur 'comprendre header', le fond devient blanc, comme lorsque vous placez la souris sur un des onglets non actif. Je crois que TOWeb partage avec le code CSS une sorte de balise mais là je décroche. Si quelqu'un peut éclairer ma lanterne ?
Pour moi, il n'y a pas de modification du fond !
TOWeb partage beaucoup le CSS, tout se trouve dans les différents fichier .css suivant la nature de la rubrique et des objets utilisés, les principaux sont style.css et bootstrap.css
Quand tu es dans Thème, cliques sur l'élément à analyser, et à gauche, la ligne correspondante va se griser, et les onglets correspondent au CSS utilisé pour cet élément. Seulement, les réglages sont pour tout le site, si d'autres éléments utilisent ces réglages, ils seront impactés. Souvent, il n'y a rien dans les cases, dans ce cas les réglages sont ceux de base du thème.

Cdlt
frangin62
Journalisée
Utev
Full Member
***

Nombre de "j'aime" : 0
Messages: 163


C++ & music: http://www.reverbnation.com/snupulus


WWW
« Répondre #8 le: 12 Octobre 2018 à 15h11 »
Citation
Bizarre, chez moi, avec -16px, le texte couvre les onglets en utilisant ton code tel quel.

Ok merci ta phrase m'a donné une piste : C'est SyntaxHighlighter et le code pour les onglets qui interfèrent à mon avis.

https://alexgorbatchev.com/SyntaxHighlighter/

J'investigue et reviens asap avec la soluce.

Bon we...
« Dernière édition: 12 Octobre 2018 à 15h20 par Utev » Journalisée
TOWeb V7 édition Studio. 5ème version achetée.
http://utev.online
Utev
Full Member
***

Nombre de "j'aime" : 0
Messages: 163


C++ & music: http://www.reverbnation.com/snupulus


WWW
« Répondre #9 le: 13 Octobre 2018 à 10h50 »
Bonjour.

J'ai enlevé le code de SyntaxHighliter pour le remplacer par une image.
La valeur -16px pour coller l'image au plus près de l'onglet est devenue -2px. Placer -3px ne rapproche pas plus.
Donc le CSS devient (pour une image):
Code:
<style>
   .main {margin: 0 auto;}  
   .content { margin-top: -2px; }
   .content > div {display: none; margin-top: -2px; }
 
   input {display: none;}
   label {display: inline-block; text-align:left;}
   label:hover {background: rgba(178,190,172,0.5); cursor: pointer;}
   input:checked + label {background: rgba(178,190,172,0.5);}
 
   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   .
   .
   .
   #tabN:checked ~ .content #contentN {
     display: block;
   }
</style>


AJOUT du 21/10 :
J'ai replacé du code sur le lien posté ci dessus mais n'ai pas eu le temps de bidouiller dans le css de syntaxhighliter. Donc je suis revenu à -16px  pour le coller au plus près de l'onglet...

bon dimanche.

AJOUT 23/10 :
Hier soir j'ai regardé longuement les tutos de frangin62. Eh bien un grand merci frangin62 ! J'utilise TOWeb depuis 10 ans et ne savait pas qu'il y avait moyen de faire des sous-menus, depuis la v 6.12 en plus !!! Un grand merci donc pour ce travail !

Les tutos de frangin62 : http://frangin62.free.fr/index.php

Bonne journée.
« Dernière édition: 23 Octobre 2018 à 09h54 par Utev » Journalisée
TOWeb V7 édition Studio. 5ème version achetée.
http://utev.online
Pages: [1] Haut de page Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  

Cliquez ici pour vous abonner au flux RSS du forum  -  
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines