Skip to Content

Código fuente wiki de Cabecera principal

Última modificación por Publicador Documentos el 08/04/2026 09:45
Mostrar los últimos autores
1 {{html clean="false"}}
2 <style>
3
4 ul[role="menu"] {
5 padding: 0px;
6 }
7
8 li[role="menuitem"] {
9 padding: 0px;
10 }
11
12 .navbar-header {
13 padding-top: opx;
14 margin-top: -5px;
15 }
16
17 /* Contenedor del menú */
18 .menu-bar {
19 display: flex;
20 align-items: center;
21 gap: clamp(8px, 2vw, 20px); /* gap dinámico progresivo */
22 padding: 5px 10px;
23 background: transparent;
24 flex-wrap: wrap;
25 transition: gap 0.3s, padding 0.3s;
26 }
27
28 /* Lista de enlaces */
29 .menu-items {
30 display: flex;
31 gap: clamp(8px, 2vw, 15px); /* gap dinámico */
32 margin: 0;
33 padding: 0;
34 list-style: none;
35 transition: gap 0.3s, padding 0.3s;
36 background: black;
37 border-radius: 8px;
38 }
39
40 /* Botones del menú */
41 .menu-items a {
42 color: white;
43 text-decoration: none;
44 padding: clamp(6px, 1.5vw, 12px) clamp(12px, 2.5vw, 20px); /* padding dinámico */
45 border-radius: 8px;
46 background: black;
47 transition: background 0.3s, padding 0.3s, gap 0.3s;
48 display: inline-block;
49 }
50
51 .menu-items a:hover {
52 background: #555;
53 }
54
55 /* Botón hamburguesa */
56 .hamburger {
57 display: none;
58 flex-direction: column;
59 cursor: pointer;
60 gap: 4px;
61 }
62
63 .hamburger div {
64 width: 25px;
65 height: 3px;
66 background: black;
67 border-radius: 2px;
68 }
69
70 /* Responsive: pantalla <1100px -> compacta progresivamente */
71 @media (max-width: 1100px) {
72 .menu-bar {
73 gap: clamp(4px, 2vw, 20px);
74 }
75 .menu-items {
76 gap: clamp(4px, 2vw, 15px);
77 }
78 .menu-items a {
79 padding: clamp(2px, 1vw, 5px) clamp(4px, 2vw, 10px);
80 }
81 }
82
83 /* Responsive: pantalla <1100px -> hamburguesa */
84 @media (max-width: 1100px) {
85 .hamburger {
86 display: flex;
87 }
88 .menu-items {
89 display: none;
90 flex-direction: column;
91 width: 100%;
92 gap: 10px;
93 }
94 .menu-items.show {
95 display: flex;
96 }
97 }
98 </style>
99
100 <div class="menu-bar">
101 <!-- Botón hamburguesa -->
102 <div class="hamburger" onclick="document.querySelector('.menu-items').classList.toggle('show')">
103 <div></div>
104 <div></div>
105 <div></div>
106 </div>
107
108 <!-- Menú -->
109 <ul class="menu-items">
110 <li><a href="/manualsamur/bin/view/Main/"><img src="/manualsamur/resources/icons/silk/house.png" alt="house">&nbsp;Inicio</a></li>
111 <li><a href="/manualsamur/bin/view/Menu/Cabecera%20principal/Vademécum/WebHome">📚 Vademécum</a></li>
112 <li><a href="/manualsamur/bin/view/Menu/Cabecera%20principal/Abreviaturas/WebHome">🔤 Abreviaturas</a></li>
113 <li><a href="/manualsamur/bin/view/Menu/Cabecera%20principal/Colaboradores/WebHome">🚑 Colaboradores</a></li>
114 <li><a href="/manualsamur/bin/download/Menu/Cabecera%20principal/WebHome/AvisoImportante.pdf">⚠️ Aviso Importante</a></li>
115 <li><a href="mailto:samur@madrid.es">📧 Enviar correo a SAMUR</a></li>
116 </ul>
117 </div>
118 {{/html}}