CSS - Menú con CSS

Pos: 94

Val: 8

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 624

Menú con CSS

Publicado por xve (490 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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 94

Val: 8

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

Comentar

Pos: 4

Val: 560

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

Comentar

Pos: 3

Val: 571

Menú con CSS

Publicado por ScriptShow (125 intervenciones) el 15/12/2018 21:47:45

Saludos Borja,

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

<!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

Comentar

Pos: 94

Val: 8

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

Comentar

Libros de CSS

Etiquetas <i> generadas solas