📣 Seu anúncio aqui? Anuncie no ForoBeta

Como criar um menu vertical suspenso com setas no Blogger

  • Autor Autor Mugiwara
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Mugiwara

Mugiwara

Gamma
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Alguien tiene idea de como hacer un menú vertical desplegable como este Vertical jQuery Accordion Nav Menu pero con flechas como este
sshot-32.webp
algo simple para muchas opciones , pero que tenga la flecha , de antemano les doy las gracias
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Este te puede agradar


Inserir CODE, HTML ou PHP: 
#cssmenu {
	margin: 0;
	padding: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cssmenu{
	width: 193px;
}
#cssmenu ul{
	list-style: none;
	text-indent: 0px;
}
#cssmenu li{
	margin-top: 3px;
}
#cssmenu a{
	font: 12px Verdana;
	padding: 4px;
	color: #646464;
	display:block;
	padding: 6px 30px;
	height: 20px;
	text-decoration: none;
	background: url('https://lh4.googleusercontent.com/-Tph9qJoXFBw/UJptQz-eGsI/AAAAAAAACTA/8DF9Q_MDZcs/s220/background.gif');
}
#cssmenu a:hover{
	background: url('https://lh4.googleusercontent.com/-7dpLZ1fbM4s/UJptQz2qTPI/AAAAAAAACTE/8uiVjpE4qkg/s220/highlight.gif') no-repeat right;
	padding: 6px 40px;
}:148px;background:url(https://lh4.googleusercontent.com/-7dpLZ1fbM4s/UJptQz2qTPI/AAAAAAAACTE/8uiVjpE4qkg/s220/highlight.gif) no-repeat;color:#b18211;}

HTML: 
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
 
Hola gracias otra vez por comentar, me gusta el menu , pero no es desplegable, quiero uno para ponerle subcategorias como el de link que puse :-(
 
o primero que haremos será insertar el script en la plantilla, para ello entra en Plantilla | Edición de HTML y antes de </head> agrega lo siguiente:

Inserir CODE, HTML ou PHP: 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://lh5.googleusercontent.com/-BBN4_uSiCs4/TlQJSAXI5CI/AAAAAAAABnk/cmdGRetC38U/flecha-arriba.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://lh5.googleusercontent.com/-BBN4_uSiCs4/TlQJSAXI5CI/AAAAAAAABnk/cmdGRetC38U/flecha-arriba.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png)"});
});
});

//]]>
</script>

Ahora antes de ]]></b:skin> añade los estilos:
Inserir CODE, HTML ou PHP: 
/* Menú vertical desplegable
----------------------------------------------- */
.menu_list {
width: 180px; /* Ancho del menú */
}
.menu_head {
padding: 5px 10px;
color:#848484; /* Color de las pestañas principales */
cursor: pointer;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
background-color: #424242; /* Color de fondo */
background-image: url(https://lh5.googleusercontent.com/-mQHPLQrjxcI/TlQJSHgEsZI/AAAAAAAABno/HbkoM9nbaWQ/flecha-abajo.png);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#848484; /* Color de los enlaces */
background-color:#BDBDBD; /* Color de fondo de los enlaces */
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}

Por último entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del menú.
Si quieres el que se activa al hacer click pega este código:

HTML: 
<div id="firstpane" class="menu_list">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>

Si quieres el que se activa al pasar el cursor entonces pega este código:

HTML: 
<div class="menu_list" id="secondpane">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>

Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.

Si quieres agregar más subpestañas sólo añade debajo de la última subpestaña una línea como esta:

HTML: 
<a href="URL del enlace">Sub pestaña 3</a>

Y si quieres agregar otra pestaña con sus respectivas subpestañas agrega antes del último </div> un código como este

HTML: 
<p class="menu_head">Pestaña 4</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

Como siempre en color verde he puesto las anotaciones donde puedes personalizar el menú como es el color de fondo, el texto, etc.
Las flechas son unas imágenes, si quieres cambiarlas deberás cambiar las URLs de estas imágenes que se encuentran tanto en el primer como en el segundo código.

Es un menú sencillo pero con la facilidad de agrupar varios enlaces y además con esos efectos deslizantes que a todos gusta.
 
Gracias, creo que ese menú usare 😀
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

Nikkygeek
Criar menu vertical e filtros no WordPress com plugins
Respostas
2
Visitas
159
Nikkygeek
Nikkygeek
eruizr82
Como criar um menu suspenso ao clicar
Respostas
2
Visitas
108
byzarz
byzarz
E
Como adicionar menu vertical fora do tema
Respostas
1
Visitas
332
Carlos Arreola
C
P
Tutorial: Como criar um menu suspenso com HTML e CSS sem JavaScript.
Respostas
5
Visitas
449
PHOTOPEA
P
draquio
Como criar um menu suspenso com submenu usando toggle no meu site
Respostas
3
Visitas
515
Alexk
Alexk
Voltar
Topo