• Publicidad
  • Contacto
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech Blog
Sin resultados
Ver todos los resultados

Crear un vistoso menú vertical con jQuery

Diego CambiasoporDiego Cambiaso
19/08/2010
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura3 minutos
0

jquery-vertical-menuEn queness.com publicaron tutorial para crear con jQuery un vistoso menú vertical que tiene una flecha que flota hasta el elemento que se selecciona.

El ejemplo de este tutorial está disponible para descargar en un archivo ZIP que contine un demo funcional, los gráficos y las bibliotecas jQuery.

EntradasRelacionados

4 Tips de Oracle para iniciarte en el mundo de la programación

Ventajas, desventajas y consejos al crear tu sitio web

Resúmen de la implementación

Implementar este tipo de menú es muy simple, primero tenemos que enlazar las bibliotecas en la sección HEAD del HTML:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Agregar el código Javascript que implementa el menú:

<script>
$(document).ready(function () {
//Set the height of the block
$('#menu .block').height($('#menu li').height());
//go to the default selected item
topval = $('#menu .selected').position()['top'];
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
$('#menu li').hover(
function() {
//get the top position
topval = $(this).position()['top'];
//animate the block
//you can add easing to it
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
//add the hover effect to menu item
$(this).addClass('hover');
},
function() {
//remove the hover effect
$(this).removeClass('hover');
}
);
});
</script>

Agregar los estilos visuales del menú:

<style>
#menu {
font-family:verdana;
font-size:12px;
position:relative;
margin:0 auto;
width:200px;
}
#menu ul {
/* remove list style */list-style:none;
padding:0;
margin:0;
/* set the layer position */position:relative;
z-index:5;
}
#menu li {
/* set the styles */background:#ccc url(bg.gif) no-repeat 0 0;
padding:5px;
margin:2px;
cursor:pointer;
border:1px solid #ccc;
}
#menu li.hover {
/* on hover, change it to this image */background-image:url(bg_hover.gif) !important;
}
#menu li a {
text-decoration:none;
color:#888;
}
#menu .block {
/* allow javascript to move the block */position:absolute;
top:0;
/* set the left position */left:150px;
/* display above the #menu */z-index:10;
/* the image and the size */background:transparent url(arrow.png) no-repeat top right;
width:39px;
padding:4px;
cursor:pointer;
}
/* fast png fix for ie6 */* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
</style>

Ahora sólo nos queda el código HTML:

<div id="menu">
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li class="selected"><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 05</a></li>
</ul>
<div class="block png"></div>
</div>

Clean and Attractive jQuery Vertical Menu Tutorial

Sitio: www.queness.com/post/710/clean-and-attractive-jquery-vertical-menu-tutorial

Tags: crear menu con jqueryCSSJavascriptjQueryjquery uimenu desplegable jquerymenu jqueryplugin jqueryRecursosSoftware libreTutorialestutoril jquery
Diego Cambiaso

Diego Cambiaso

Comunicador Social y Desarrollador de Software. Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

Microsoft Teams - Interface

Microsoft Teams disponible para usuarios de Office 365 en el mundo

20/03/2017
El tutorial ‘Minecraft’ Hora del Código tiene como objetivo introducir a millones de jóvenes a la creatividad de la informática

Tutorial de codificación Minecraft para los estudiantes y educadores

20/11/2015

Note Links: Conoce una función de Evernote para conectarte con los contenidos esenciales

18/01/2015
HEX: Shards of Fate - Open BEta

Hex: Shards Of Fate – Disponible en Open Beta

05/12/2014

HONOR X8 liviano y con diseño ultra-delgado

08/08/2022

Camon 19 Pro – ¿Qué tan bueno es?

08/08/2022

X80 conoce el smartphone más premiun de vivo con cámaras potenciadas por IA

03/07/2022

Moto Edge 30 Pro ¿Qué tan bueno es? VIDEO

02/07/2022

Serie Camon 19 – Conoce los detalles de los nuevos equipos de Tecno Mobile

01/07/2022

Una mujer supera su propio récord y calcula el valor del “Número Pi” en 100 billones de dígitos

12/06/2022
Pixelco Tech News Pride 2022 logo
Pixelco Tech News Pride 2022

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...