CSS - Menú con CSS

 
Vista:
sin imagen de perfil
Val: 3
Ha aumentado su posición en 10 puestos en CSS (en relación al último mes)
Gráfica de CSS

Menú con CSS

Publicado por Borja (5 intervenciones) el 15/12/2018 19:20:04
Hola:

Me gustaría hacer un menú con CSS para que pinchando en cada uno de los contenidos del menú, por ejemplo, "Quienes somos", "Registro", "primeros pasos" salga contenido en otra parte de la pantalla pero sin usar los frameset. Es decir que clickeando en cualquier botón me lleve a otro contenido pero sin usar la estructura de frameset, que el contenido salga en la misma página pero sin que desaparezca el menú. ¿Cómo podría hacerlo?. Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Menú con CSS

Publicado por xve (489 intervenciones) el 15/12/2018 19:51:29
Hola Borja, a que te refieres, a que tengas las partes de la web ocultas, y se vayan mostrando y ocultando según la opción del menú?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 3
Ha aumentado su posición en 10 puestos en CSS (en relación al último mes)
Gráfica de CSS

Menú con CSS

Publicado por Borja (5 intervenciones) el 15/12/2018 19:55:38
Gracias por contestar:
Pues a ver:
Yo tengo un index.html y bueno claro una hoja de estilos. Dentro de esa página tengo un menú CSS con varias opciones que dirigen obviamente a distintas páginas.
Yo lo que quiero es que cuando hagas click en alguna de esas opciones del menú (Que será un menú fixed) se cambie el contenido de la página a por ejemplo un formulario de registro sin que desaparezca la página o el menú. Es decir como si fuesen pestañas, pero sin serlo.
Como en esta página:
https://librosweb.es/libro/css/capitulo-14/sitios-web-de-inspiracion.html

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Xavi
Val: 612
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Menú con CSS

Publicado por Xavi (33 intervenciones) el 16/12/2018 08:52:09
Otra manera aparte de la que te ha comentado ScriptShow, es cargar el contenido mediante AJAX...

Aquí publique un ejemplo de como cargar el contenido de otras paginas en mi pagina con AJAX
https://www.lawebdelprogramador.com/codigo/AJAX/1494-Actualiza-el-contenido-de-la-pagina-con-AJAX.html

Espero que te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 407
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Menú con CSS

Publicado por ScriptShow (103 intervenciones) el 15/12/2018 21:47:45
Saludos Borja,

Ejemplo básico y ampliable, con CSS y JavaScript:

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
<!DOCTYPE html>
<html>
<body>
<h2>Tabs Simple</h2>
 
<button onclick="openC('cont1')" style="background:#DDFFFF;padding:4px;border:0px"><i>Quienes somos</i></button>
<button onclick="openC('cont2')" style="background:#FFDDDD;padding:4px;border:0px"><i>Primeros pasos</i></button>
<button onclick="openC('cont3')" style="background:#DDDDFF;padding:4px;border:0px"><i>Registro</i></button>
 
<span id="cont1" class="cont" style="display:none;padding:16px;background:#DDFFFF">
<b>Quienes somos</b>
<p>Texto, Imágenes y contenidos de la sección 1 ...</p>
</span>
<span id="cont2" class="cont" style="display:none;padding:16px;background:#FFDDDD">
<b>Primeros pasos</b>
<p>Texto, Imágenes y contenidos de la sección 2 ...</p>
</span>
<span id="cont3" class="cont" style="display:none;padding:16px;background:#DDDDFF">
<b>Registro</b>
<p>Texto, Imágenes y contenidos de la sección 3 ...</p>
</span>
 
<script>
function openC(tab) {
var i, x;
x = document.getElementsByClassName("cont");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tab).style.display = "block";
}
</script>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 3
Ha aumentado su posición en 10 puestos en CSS (en relación al último mes)
Gráfica de CSS

Menú con CSS

Publicado por Borja (5 intervenciones) el 15/12/2018 21:51:17
Muchas gracias ScripShow.

Estudiaré este código.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar