Como criar sub menus, abas suspensas em um menu

RaulOrCase disse:

Hola [MENTION=115910]rikrdomat[/MENTION], lo que debes hacer es jugar con las etiquetas <ul> y <li>

si no conoces mucho sobre html y css te dejo aca documentacion para que puedas revisar :encouragement:

un video (Para Blogger): Como Hacer Un Menú Desplegable En Blogger Con Subpestañas-Johan Tabo - YouTube
css menu maker: CSS MenuMaker | HTML, CSS, & jQuery Menus
Uno muy bueno: Menú horizontal con subpestañas y buscador integrado 2 | Ciudad Blogger - Trucos y tutoriales para tu blog

Todo esto te puede servir para tu menu.. ahora para que quede con el estilo de tu pagina lo mismo debes empezar a modificar los estilos

Clique para expandir...

rikrdomat disse:

Gracias por responder [MENTION=121546]RaulOrCase[/MENTION] no conozco mucho de HTML pero Googleando y preguntando hago las cosas..
He buscado bastante pero solo encuentro como crear un menu desplegable, Osea el menu completo, y yo lo que quiero es dejar el menu tal cual como esta pero agregarle a una sola de las pestañas un submenú.

En esos en laces que me dejaste puedo lograr eso? Se que debo editar el codigo HTML del menú pero el problema es que no se exactamente que agregar

Clique para expandir...

RaulOrCase disse:

Todo es cuestion de aprender.. en el primero video que te deje te enseñan como crear un menu desplegable.. ya de ahi tu debes empezar a ponerle el estilo de tu web. :encouragement:

Clique para expandir...

rikrdomat disse:

Veo que en el video te explican como agregar un menu desplegable. Osea el menu entero con otro diseño, yo lo que quier es no tocar el diseño de mi menú, que queda excatamente como esta y a una de las pestañas colocarle el sub menu.

Clique para expandir...

rikrdomat disse:

Veo que en el video te explican como agregar un menu desplegable. Osea el menu entero con otro diseño, yo lo que quier es no tocar el diseño de mi menú, que queda excatamente como esta y a una de las pestañas colocarle el sub menu.

Clique para expandir...

RaulOrCase disse:

aer regalame 5 min :3 te lo paso

- - - Actualizado - - -



Por cierto quieres el desplegable en se boton del menu?.. en Diseño??

Clique para expandir...

RaulOrCase disse:

Quedaria asi, ya desde aqui tu tendras que modificar algunas cosas para que el diseño quede mejor :encouragement:

PERDO LA DEMORA 🙄🙄

DEMO: CodePen - Pen

Inserir CODE, HTML ou PHP:

<style>
.navbar{display:none;}
body{
background: url(http://1.bp.blogspot.com/-UGxay_3orfc/UgXfe6oaP2I/AAAAAAAAACg/H5E97-0SHAo/s1600/bg.png);
color: #666;
font-family: 'Lora', serif;
font-size: 14px;
font-weight: normal;
line-height: 22px;
margin: 0;
padding: 0;
text-decoration: none;
}
#nav {
background: url(http://1.bp.blogspot.com/-KaDO6tjWXlQ/UgXhJg9rKWI/AAAAAAAAACw/gzsbhfRKqEo/s1600/nav.png);
clear: both;
overflow: hidden;
text-transform: uppercase;
height:48px;
}
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
padding: 12px 15px 14px;
color: #d9cca6;
font-size: 13px;
text-decoration: none;
font-family: oswald;
}
#menu{
text-align: center;
padding-right: 45px;
width: 950px;
margin: 10px auto 0px auto;
}
#menu li a:hover {
color:white;
}

#menu ul{
color: #fff;
box-shadow: 1px 1px 3px #000;
border-radius: 5px;
position: absolute;
z-index: 99999;
display: none;
list-style-type: none;
list-style: none;
width: 90px;
margin-left: 260px;
background: #66635B;
border: inset 1px #B0AFAB;
}
#menu ul li a:hover {
background-color: #93a613;
}

#menu li:hover > ul{
display: block;
}

</style>

<div id="nav">
<div class="wrap">
<ul id="menu">
<li>
<a href="/">INICIO</a>
</li>
<li>
<a href="#">DISEÑOS</a>
<ul>
<li>Diseños 1</li>
<li>Diseños 2</li>
<li>Diseños 3</li>
<li>Diseños 4</li>
</ul>
</li>
<li>
<a href="#">SERVICIOS</a>
</li>
<li>
<a href="#">ACERCA DE NOSOTROS</a>
</li>
<li>
<a href="#">CONTÁCTENOS</a>
</li>
</ul>
</div>
</div>

remplaza todos los CSS y agrega lo que falta y agrega el sub menu debjo de <li>diseño</li> tal cual esta... te recomiendo ver el demo.. esta mejor explicado 😛

Clique para expandir...

esmigol disse:

¿Y hacer esto con las categorías de wordpress y que se desplieguen las entradas?

Lo intenté hace un mes y no me terminó de salir...

Clique para expandir...

RaulOrCase disse:

Quedaria asi, ya desde aqui tu tendras que modificar algunas cosas para que el diseño quede mejor :encouragement:

PERDO LA DEMORA 🙄🙄

DEMO: CodePen - Pen

Inserir CODE, HTML ou PHP:

<style>
.navbar{display:none;}
body{
background: url(http://1.bp.blogspot.com/-UGxay_3orfc/UgXfe6oaP2I/AAAAAAAAACg/H5E97-0SHAo/s1600/bg.png);
color: #666;
font-family: 'Lora', serif;
font-size: 14px;
font-weight: normal;
line-height: 22px;
margin: 0;
padding: 0;
text-decoration: none;
}
#nav {
background: url(http://1.bp.blogspot.com/-KaDO6tjWXlQ/UgXhJg9rKWI/AAAAAAAAACw/gzsbhfRKqEo/s1600/nav.png);
clear: both;
overflow: hidden;
text-transform: uppercase;
height:48px;
}
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
padding: 12px 15px 14px;
color: #d9cca6;
font-size: 13px;
text-decoration: none;
font-family: oswald;
}
#menu{
text-align: center;
padding-right: 45px;
width: 950px;
margin: 10px auto 0px auto;
}
#menu li a:hover {
color:white;
}

#menu ul{
color: #fff;
box-shadow: 1px 1px 3px #000;
border-radius: 5px;
position: absolute;
z-index: 99999;
display: none;
list-style-type: none;
list-style: none;
width: 90px;
margin-left: 260px;
background: #66635B;
border: inset 1px #B0AFAB;
}
#menu ul li a:hover {
background-color: #93a613;
}

#menu li:hover > ul{
display: block;
}

</style>

<div id="nav">
<div class="wrap">
<ul id="menu">
<li>
<a href="/">INICIO</a>
</li>
<li>
<a href="#">DISEÑOS</a>
<ul>
<li>Diseños 1</li>
<li>Diseños 2</li>
<li>Diseños 3</li>
<li>Diseños 4</li>
</ul>
</li>
<li>
<a href="#">SERVICIOS</a>
</li>
<li>
<a href="#">ACERCA DE NOSOTROS</a>
</li>
<li>
<a href="#">CONTÁCTENOS</a>
</li>
</ul>
</div>
</div>

remplaza todos los CSS y agrega lo que falta y agrega el sub menu debjo de <li>diseño</li> tal cual esta... te recomiendo ver el demo.. esta mejor explicado 😛

Clique para expandir...