Hacer sticky el header de un radio/tab
Publicado por Javier (1 intervención) el 17/01/2021 04:59:03
Tengo el codigo de abajo, y me gustaría q al hacer scrool se mantuvieran fija la cabecera de las pestañas... Le he estado dando muchas vueltas. Si separo los radio buttons para envolverlos en un div no se muestra el contenido al hacer click, y sin separarlos no soy capar de aplicar clases sticky de ninguna manera. La idea es q la cabecera fuera como un menu sticky de toda la vida. He probado estructuras ul li, pero el enlazado entre pestañas deja de funcionar, con este codigo es tan sencillo como poner en el texto label for tab3, para irte a la pestaña 3 desde cualquier otra.
Ideas, soluciones... bienvenido será cualquier aporte. Gracias.
Ideas, soluciones... bienvenido será cualquier aporte. Gracias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<div class="layout">
<div class="tabs">
<!-- Tab 1 --><input type="radio" name="tab" id="tab1" role="tab" checked />
<label for="tab1" class="menutabs" id="tab1-label">VISIÓN GENERAL</label>
<section aria-labelledby="tab1-label">
<h2> Contenido Tab 1</h2>
<p>Hello World</p>
</section>
<!-- Tab 2 --><input type="radio" name="tab" id="tab2" role="tab" />
<label for="tab2" class="menutabs" id="tab2-label">LOCALIZACIÓN</label>
<section aria-labelledby="tab2-label">
<h2> Contenido Tab 2</h2>
<p>Hello World</p>
</section>
<!-- Tab 3 --><input type="radio" name="tab" id="tab3" role="tab" />
<label for="tab3" class="menutabs" id="tab3-label">ALOJAMIENTO</label>
<section aria-labelledby="tab3-label">
<h2>Contenido Tab 3</h2>
<p>Hello World</p>
</section>
<!-- Tab 4 --><input type="radio" name="tab" id="tab4" role="tab" />
<label for="tab4" class="menutabs" >CURSOS SNOWBOARD/SKI</label>
<section>
<h2>Contenido Tab 4</h2>
<p>Hello World</p>
</section>
<!-- Tab 5 --><input type="radio" name="tab" id="tab5" role="tab" />
<label for="tab5" class="menutabs" >¿QUÉ INCLUYE?</label>
<section>
<h2>Contenido Tab 5</h2>
<p>Hello World</p>
</section>
<!-- Tab 6 --><input type="radio" name="tab" id="tab6" role="tab" />
<label for="tab6" class="menutabs" >COVID-19</label>
<section>
<h2>Contenido Tab 6</h2>
<p>Hello World</p>
</section>
<!-- Tab 7 ENLACE --><input type="radio" onclick="window.location='/tienda';" name="tab" id="tab7" role="tab" />
<label for="tab7" class="menutabs" >Reservar</label>
</div>
</div>
<style>
.tabs p {
font-size: 2rem;
line-height: 2rem;
padding: 0 3rem;margin-bottom: 2rem;
}.menutabs:last-child {
border: 1px solid;}
.menutabs:last-child:hover {
color: white;background: #ff0000;
}.menutabs:hover {
border: 1px solid;}.menutabs label{
transition:all 0.3s ease;
}.tabs {
display: flex;flex-wrap: wrap;
max-width: 98%;
}.tabs > section {
order: 999;width: 100%;
display: none; }.tabs > input {
opacity: 0; position: absolute; }.tabs > input[type="radio"]:checked + label {
/*Highlight*/background-color: #ff0000;
color: white !important;
}.tabs > input[type="radio"]:checked + label + section {
display: unset; }.tabs > label {
padding: 0.5em 1em;
color: #ff0000;
width: 14%;
text-align: center;
transition:all 0.3s ease;
font-size: 0.9rem;
}.tabs > input[type="radio"]:checked + label {
color: #ff0000;
}.tabs section {
padding: 4em; }Valora esta pregunta
0