Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Menús (escribimos aquí sobre la cosa)
Menús
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 46 | 3:23 PM
Mejorar el plugin navegador desplegable en jQuery con efectos especiales

Implementamos efectos en el navegador desplegable jQuery, aplicando conocimientos de colas de efectos, para hacer un plugin de navegación más vistoso.

Uno de los ejemplos más típicos que podemos imaginar con jQuery es la realización de un plugin que implemente un navegador dinámico desplegable.

En este post vamos a mostrar cómo hacer unas mejoras sencillas en el plugin para utilizar efectos especiales.

Realmente veremos que lo que hemos estudiado para aprender a hacer efectos es incluso bastante más de lo que necesitaremos en ejemplos medianamente avanzados como el que tenemos entre manos.

Antes de empezar con las explicaciones de los cambios realizados, dejamos un enlace al ejemplo en funcionamiento.

Cambio método css("display", "block") por efecto slideDown()

En el evento mouseover definido para los enlaces principales hemos cambiado el método:

Quote
submenu.css("display", "block");

Por un efecto que abre el submenú con una cortinilla hacia abajo, con:

Quote
submenu.slideDown("slow");

Cambio método submenu.css('display', 'none') por efecto con slideUp()
De manera similar, cambiamos el evento mouseout para los enlaces principales, para que se oculten con una cortinilla hacia arriba. Esto se hizo cambiando las instrucciones:

Quote
retardo = setTimeout("submenu.css('display', 'none');",1000)

Por:

Quote
retardo = setTimeout("submenu.slideUp('slow');",1000)

Nota: los setTimeout() en este caso permanecen y no los cambiamos por delay() por mayor comodidad y porque no funcionaría (dado que en ocasiones ese retardo se anulará con clearTimeout() y delay() no lo permite).

Además, en el evento mouseout de las capas de los submenús, también hacemos este cambio de sentencias, también para que se oculten al salír de los submenús con un retardo y con un efecto.

Cambios en la función que oculta todos los submenús
Esta función es interesante, porque tiene un par de cambios importantes.

Quote
function ocultarTodosSubmenus(noOcultar){
$.each(arrayCapasSubmenu, function(ind){
if (ind!=noOcultar){
this.stop(true, true);
this.css("display", "none");
}
});
}

Este método oculta todas las capas de submenús y se invoca cuando mostramos un menú desde un enlace principal, para asegurarnos que no haya dos menús abiertos al mismo tiempo. Para empezar, ahora recibe un índice de submenú que no deseamos ocultar (porque deba permanecer abierto).

Pero lo importante es que hemos colocado un método stop(true, true), que sirve para hacer que se interrumpan todos los efectos de mostrar o ocultar una capa que pudieran haber en funcionamiento. Además marcamos con los dos true que la cola de efectos se limpie y que los efectos que se estaban ejecutando pasen directamente a su estado final.

Código completo del plugin navegador desplegable con efectos
Para que se pueda ver todo de una manera más global, dejamos el código completo de este plugin, una vez realizadas todas las modificaciones para aplicar los efectos.

Quote
////////////////////////////////////////////////////////////////////////////
//creación del plugin generaMenu.
//envío el menú de opciones como parámetro
////////////////////////////////////////////////////////////////////////////
(function($) {
$.fn.generaMenu = function(menu) {
this.each(function(){
var retardo;
var capaMenu = $(this);
//creo e inserto la lista principal
var listaPrincipal = $('<ul></ul>');
capaMenu.append(listaPrincipal);
//enlaces principales
var arrayEnlaces = [];
var arrayCapasSubmenu = [];
var arrayLiMenuPrincipal = [];
//recorro los elementos del menú
jQuery.each(menu, function(ind) {
//ahora en this tengo cada uno de los elementos.
var elementoPrincipal = $('<li></li>');
listaPrincipal.append(elementoPrincipal);
//creo el enlace e inserto
var enlacePrincipal = $('<a href="' + this.url + '">' + this.texto + '</a>');
elementoPrincipal.append(enlacePrincipal);

var capaSubmenu = $('<div class="submenu"></div>');
//guardo la capa submenu en el elemento enlaceprincipal y su indice
enlacePrincipal.data("capaSubmenu",capaSubmenu);
enlacePrincipal.data("indice",ind);
//creo una lista para poner los enlaces
var subLista = $('<ul></ul>');
//añado la lista a capaMenu
capaSubmenu.append(subLista);
//para cada elace asociado
jQuery.each(this.enlaces, function() {
//en this tengo cada uno de los enlaces
//creo el elemento de la lista del submenú actual
var subElemento = $('<li></li>');
//meto el elemento de la lista en la lista
subLista.append(subElemento);
//creo el enlace
var subEnlace = $('<a href="' + this.url + '">' + this.texto + '</a>');
//cargo el enlace en la lista
subElemento.append(subEnlace);

});
//inserto la capa del submenu en el cuerpo de la página
$(document.body).append(capaSubmenu);


/////////////////////////////////////////
//EVENTOS
/////////////////////////////////////////

//defino el evento mouseover para el enlace principal
enlacePrincipal.mouseover(function(e){
var enlace = $(this);
clearTimeout(retardo);
indice = enlace.data("indice");
ocultarTodosSubmenus(indice);
//recupero la capa de submenu asociada
submenu = enlace.data("capaSubmenu");
//la muestro
//submenu.css("display", "block");
submenu.slideDown("slow");
});

//defino el evento para el enlace principal
enlacePrincipal.mouseout(function(e){
var enlace = $(this);
//recupero la capa de submenu asociada
submenu = enlace.data("capaSubmenu");
//la oculto
clearTimeout(retardo);
//retardo = setTimeout("submenu.css('display', 'none');",1000)
retardo = setTimeout("submenu.slideUp('slow');",1000)

});

//evento para las capa del submenu
capaSubmenu.mouseover(function(){
clearTimeout(retardo);
})

//evento para las capa del submenu
capaSubmenu.mouseout(function(){
clearTimeout(retardo);
submenu = $(this);
retardo = setTimeout("submenu.slideUp('slow');",1000)
})

//evento para cuando se redimensione la ventana
if(arrayEnlaces.length==0){
//Este evento sólo lo quiero ejecutar una vez
$(window).resize(function(){
colocarCapasSubmenus();
});
}

/////////////////////////////////////////
//FUNCIONES PRIVADAS DEL PLUGIN
/////////////////////////////////////////

//una función privada para ocultar todos los submenus
function ocultarTodosSubmenus(noOcultar){
$.each(arrayCapasSubmenu, function(ind){
if (ind!=noOcultar){
this.stop(true, true);
this.css("display", "none");
}
});
}

function colocarCapasSubmenus(){
$.each(arrayCapasSubmenu, function(i){
//coloco la capa en el lugar donde me interesa
var posicionEnlace = arrayLiMenuPrincipal[i].offset();
this.css({
left: posicionEnlace.left,
top: posicionEnlace.top + 28
});
});
}


//guardo el enlace y las capas de submenús y los elementos li en arrays
arrayEnlaces.push(enlacePrincipal);
arrayCapasSubmenu.push(capaSubmenu);
arrayLiMenuPrincipal.push(elementoPrincipal);

//coloco inicialmente las capas de submenús
colocarCapasSubmenus();
});

});

return this;
};

})(jQuery);

El resultado, como decimos, es bastante más atractivo y los efectos no resultan incómodos en la operativa del menú, como podemos ver en la página donde mostramos el menú desplegable en marcha.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 47 | 1:38 PM
CSS3: Cómo crear un menú minimalista y elegante


Hoy haremos algo sencillo y práctico: Un simple menú de navegación animado con CSS3, el cual se verá aceptable en navegadores viejos, y funcionará a la perfección en la siguiente generación de navegadores. ¿Comenzamos?

Haz clic en este enlace para ver una demostración >>

El menú se organiza como una lista no ordenada. Esta es la mejor estructura para un menú, ya que es semánticamente correcta y a su vez, permite darle estilo fácilmente a los enlaces del menú. Aquí usaremos un poco de XHTML:

Quote
<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Home</span>
</a>
</li>

<li>
<a class="about" href="#">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="#">
<span>Services</span>
</a>
</li>

<li>
<a class="portfolio" href="#">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href="#">
<span>Contact us</span>
</a>
</li>
</ul>

Dentro de cada la tenemos un hipervínculo con un span dentro. Por defecto, estos spans estarán escondidos y sólo serán visibles cuando te posiciones sobre el enlace. Cada enlace tiene un nombre de class único, que es usado para darle un único fondo y estilo al span que contiene.

Una vez que hemos ubicado la estructura básica, ya podemos comenzar a crear los efectos y estilos CSS3. Esto funcionará incluso en navegadores que no soporten transiciones animadas en CSS3, como por ejemplo, IE6.

Quote
{

margin:0;
padding:0;
}

body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

Para darle estilo al fondo de body, primero seleccionamos un color de fondo. que actuará como respaldo, y luego añadiremos dos gradientes radiales con CSS3 como imágenes de fondo. En el caso de que el navegador de quien visita nuestro sitio no soporte gradientes, entonces serán salteados y se mostrará el color de fondo que seleccionamos como respaldo.

Quote
#navigationMenu span{

width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

-webkit-transition: 0.25s;

-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('img/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

La propiedad transition de CSS3 es una muy poderosa. Te permite animar los cambios que ocurren en un elemento cuando las pseudo-propiedades hacen efecto. Por ejemplo, en nuestro menú, cuando el usuario mueve el cursor sobre un enlace de navegación, la pseudo-propiedad :hover hace efecto, mostrando el span que de otra manera permanecería escondido.

Sin que haya sido definida la propiedad transition, el cambio sería instantáneo. Pero al definirla, podemos animarlo. Aquí estamos avisando al navegador de que la duración de la animación será de 250 milisegundos.

Las transiciones son soportadas, actualmente, sólo en navegadores basados en webkit (Safari y Chrome), pero se espera que Firefox 4 también lo soporte, por lo que nos preparamos para ello, especificando una -moz-transition.

Quote
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

Finalmente, especificamos cinco diseños diferentes para los enlaces de navegación. Todas las imágenes de fondo para los enlaces están contenidas dentro de un sólo archivo de sprite. Allí hay estado “normal” y “posicionado sobre”, uno debajo del otro.. Cuando el cursor se posicione sobre ellos, se mostrará la versión apropiada de la imagen de fondo.

¡Y listo! Haciendo clic en el siguiente enlace podrás descargar todos los archivos usados en este tutorial, incluyendo el archivo “navigation.jpg” (necesario para que el menú funcione) y un archivo .PSD para que puedas crear fácilmente tu propio diseño.

  • Haz clic en este enlace para descargar los archivos del tutorial >>
  • Haz clic en este enlace para ver una demostración >>

    ¡Esperamos que te sea de utilidad!


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • MrCazper
    Mensajes: 1084
    Reputación: 33
    Mensaje Nº 48 | 11:52 AM
    Super Post
    Me Encanto
    Solo Que Esta Muy Chido ^^

    Ucoz Manda! batman

    Contactame mediante mi sitio web:
    http://davidmorales.com.mx/
    Post editado por Fidarsegura - Lunes, 2010-12-20, 11:54 AM
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 49 | 5:35 PM
    Menú animado LavaLamp en jQuery con diferentes estilos gráficos

    Podemos directamente visitar la página de demos para darse una idea de lo que se puede lograr. Las librerías para descargar aquí son las mas actualizadas.

    Implementar el menú
    El marcado HTML es sencillo

    Quote
    <ul class="lavaLamp">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre mi</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>

    El CSS debe contener:

    Quote
    .lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
    }
    /* Force the list to flow horizontally */
    .lavaLamp li {
    float: left;
    list-style: none;
    }
    /* Represents the background of the highlighted menu-item. */
    .lavaLamp li.back {
    background: url("../image/lava.gif") no-repeat right -30px;
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
    }
    .lavaLamp li.back .left {
    background: url("../image/lava.gif") no-repeat top left;
    height: 30px;
    margin-right: 9px;
    }
    /* Styles for each menu-item. */
    .lavaLamp li a {
    position: relative; overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    font: bold 14px arial;
    color: #fff; outline: none;
    text-align: center;
    height: 30px; top: 7px;
    z-index: 10; letter-spacing: 0;
    float: left; display: block;
    margin: auto 10px;
    }


    Y finalmente, pero no menos importante, entre etiquetas <head> del HTML se debe colocar:

    Quote
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
    <!-- Opcional -->
    <script type="text/javascript" src="path/to/jquery.easing.js"></script>

    <script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
    </script>

    Obviamente cuidando que las rutas de los archivos .js sean los correctos en relación a la estructura de nuestro website. Pueden probar diferentes variaciones jugando con el CSS o bien utilizando los que ofrecen en este link.
    Para el caso de que deseen utilizar este menú lavaLamp con WordPress se recomienda utilizar la versión mas reciente de los scripts y si la versión de jQuery no es la necesaria en nuestra plataforma se puede utilizar una hosteada en Google.

    Quote
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.lavalamp.1.3.3-min.js"></script>
    <script type="text/javascript">
    var query = new Object();
    window.location.search.replace(
    new RegExp( "([^?=&]+)(=([^&]*))?", 'g' ),
    function( $0, $1, $2, $3 ){
    query[ $1 ] = $3;
    }
    );
    easing = query['e'] || 'Expo';

    function loadEasing(e) {
    location.href = location.pathname+'?e='+e;
    }

    function setEasing(e) {
    loadLamps(e);
    }

    // for dynamic easing changes
    function loadLamps(easing) {
    $('#lavaLampBasicImage').lavaLamp({
    fx: 'easeIn'+easing,
    speed: 800,
    homeTop:-1,
    homeLeft:-1
    });

    // jquery initialize:
    $(function() {
    $('#menu').lavaLamp({fx: 'swing', speed: 333});
    loadLamps(easing);

    $('select#easing option[value='+easing+']').attr('selected','selected');
    $('.easingLabel').text(easing);
    });
    //console.log();
    -->
    </script>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 50 | 7:06 PM
    Menu Mac Jquery

    Aquí les dejamos como hacer un menú estilo Mac utilizando Jquery.

    Puedes ver el demo en este link, esperamos les guste.

    PASO 1
    Creamos una nueva carpeta llamada menu dentro de la cual vamos a crear una carpeta llamada imágenes dentro de la cual vamos a colocar los iconos que nos servirán para nuestro menú.

    PASO 2
    Vamos a Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

    PASO 3
    Debajo de la etiqueta Menú Mac Con Jquery vamos a copiar el siguiente código html4strict.

    Quote
    <link rel="stylesheet" type="text/css" media="screen" href="css/estilo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/fisheye-iutil.min.js"></script>
    <script type="text/javascript" src="js/dock-example1.js"></script>
    <script type="text/javascript" src="js/stack-1.js"></script>
    <script type="text/javascript">
    $(function(){
    var jqDockOpts = {align: 'left', duration: 200, labels: 'tc', size: 48, distance: 85};
    $('#jqDock').jqDock(jqDockOpts);
    });
    </script>

    <style type="text/css">
    <!--
    body {
    background-color: #000000;
    }
    -->
    </style>
    <noscript>

    <style type="text/css">
    #dock { top: 0; left: 100px; }
    a.dock-item { position: relative; float: left; margin-right: 10px; }
    .dock-item span { display: block; }
    .stack { top: 0; }
    .stack ul li { position: relative; }
    </style>

    </noscript>

    PASO 4
    Presionamos el comando Ctrl + S para guardar nuestro documento dentro de la carpeta menu con el nombre menu.html.

    PASO 5
    Ahora presionamos el comando Ctrl + N y creamos un nuevo documento CSS.

    PASO 6
    Colocamos el siguiente código css

    Quote
    @charset "utf-8";
    /* CSS Document */

    * { margin: 0; padding: 0; }
    body { font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }

    /* ================ Div que contiene nuestro menú ================ */
    #dock { position: relative; top: 150px; }
    .dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; }
    /* ================ Div que contiene nuestro menú ================ */

    /* ================ Estilo de la fuente del menú ================ */
    a.dock-item {
    display: block;
    width: 50px;
    position: absolute;
    bottom: 0;
    text-align: center;
    text-decoration: none;
    color: #999999;
    }
    .dock-item span { display: none; padding-left: 20px; }
    .dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }

    PASO 7
    Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css.

    PASO 8
    Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4trict.

    Quote
    <div id="dock">
    <div class="dock-container">

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 1</span><img src="imagenes/home.png" alt="home" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 2</span><img src="imagenes/email.png" alt="contact" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 3</span><img src="imagenes/portfolio.png" alt="portfolio" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 4</span><img src="imagenes/music.png" alt="music" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 5</span><img src="imagenes/video.png" alt="video" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 6</span><img src="imagenes/history.png" alt="history" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 7</span><img src="imagenes/calendar.png" alt="calendar" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 8</span><img src="imagenes/link.png" alt="links" /></a>

    <!-- Finaliza icono -->

    <!-- Edita aquí el icono -->
    <a class="dock-item" href="http://www.tutorialesenlaweb.com"><span>Ejemplo 9</span><img src="imagenes/rss.png" alt="rss" /></a>

    <!-- Finaliza icono -->

    </div>
    </div>

    PASO 9
    Ahora dentro de la carpeta menu creamos una carpeta nueva llamada js dentro de la cual vamos a copiar los 4 archivos js que adjunto.

    PASO 10
    Listo ya tenemos terminado nuestro efecto.

    Descarga el editable de Menu Mac Jquery.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 51 | 1:21 PM
    Menu page navi Jquery

    En este tutorial te enseñaremos como utilizar Dreamweaver para editar un menu page navi en Jquery esperamos te guste. Esto es lo que podrás hacer mira aquí el demo online.

    PASO 1
    Creamos un nuevo documento de Adobe Dreamweaver HTML.

    PASO 2
    Debajo de la etiqueta Menu Animado con jQuery vamos a copiar el siguiente código html4strict.

    Quote
    <!-- Codigo CSS -->
    <link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />
    <!-- Codigo CSS -->

    <!-- Codigo Java Script-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.flipNav.js" type="text/javascript"></script>
    <!-- Codigo Java Script-->

    PASO 3
    Presionamos el comando Ctrl + S y guardamos nuestro documento dentro de la carpeta menu con el nombre menu.html.

    PASO 4
    Vamos al menú File – New y creamos un nuevo documento CSS.

    PASO 5
    Dentro del documento copiamos el siguiente código CSS.

    Quote
    body {
    text-align: center;
    background: #676767;
    font-family: helvetica;
    }

    ul, li {
    margin: 0; padding: 0;
    overflow: hidden;
    }

    ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
    position: relative;
    }

    li a {
    color: white;
    text-decoration: none;
    float: left;
    font-size: 30px;
    background: black;
    padding: 10px;
    }

    li a:hover {
    background: #292929;
    }

    /* Hover del menú, color de fondo y de fuente */

    li a span {
    display: block;
    background: white;
    color: maroon;
    padding: 10px;
    position: relative;
    font-weight: bold;
    }

    li a span:first-child {
    background: black;
    color: white;
    }

    PASO 6
    Presionamos el comando Ctrl + S y Guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css.

    PASO 7
    Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

    Quote
    <!-- Botones del menú -->
    <ul id="nav">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Portafolio</a></li>
    <li><a href="#">Misión</a></li>
    <li><a href="#">Contáctenos</a></li>
    </ul>

    <!-- Codigo Java Script -->
    <script type="text/javascript">
    $('#nav').flipNav();
    </script>

    PASO 8
    Dentro de la carpeta menu creamos una carpeta nueva llamada js dentro de la cual vamos a copiar los archivos JS que adjunto en este tutorial.

    PASO 9
    Listo ya tenemos nuestro menú Terminado.

    Descarga page Navi en Dreamweaver.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    PistolaEMI
    Mensajes: 143
    Reputación: 6
    Mensaje Nº 52 | 8:43 PM
    Hola GUARAGUAO.
    con respecto a como "Crear un menú horizontal simple con CSS"
    Disculpa mi ignorancia pero no se como crearlo trabajo con Dw y creo un nuevo tipo de pagina la cual es CSS
    y no se como van los codigos. si pudieras agregar todo el código del menú que tu hiciste serial genial.

    Muchas gracias por tu ayuda.
    PistolaEMI


    Mazterlocuras. una web de locos!
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 53 | 1:29 PM
    Elastic Thumbnail Menu


    Sproing! – Make An Elastic Thumbnail Menu; Si buscabas métodos alternativos para construir los menús de las web que desarrollas, el menú de miniaturas elásticas pueda ayudarte un poco a salir de lo habitual. ¿Qué hace exactamente?, Aumenta los elementos del menú cuando se posa sobre él. Y donde los elementos del menú se amplían hacia arriba.

    Ver Demo

    HTML:

    Quote
    <div id="menuwrapper">
    <div id="menu"><a class="menuitem" href="#"><img src="image.jpg" alt="" /></a><!--Template for each menu item--></div>
    </div>

    CSS:

    Quote
    /* The container which the menu is "locked" to the bottom of */
    #menuwrapper{ position:relative; height:210px; }
    /* Fixes the whole menu to the bottom of the parent div */
    #menu{position:absolute; bottom:0;}
    /* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
    .menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

    JavaScript:

    Quote
    $(document).ready(function(){
    $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size
    $('.menuitem').mouseover(function(){ //When mouse over menu item
    gridimage = $(this).find('img'); //Define target as a variable
    gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size
    }).mouseout(function(){ //When mouse no longer over menu item
    gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size
    });
    });

    Internet Explorer no realizara un buen trabajo a menos que agreguen la siguiente línea CSS:

    CSS:

    Quote
    img {ms-interpolación de modo: bicúbico;}

    Mas Info Sproing! – Make An Elastic Thumbnail Menu


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    vsbaires
    Mensajes: 64
    Reputación: 0
    Mensaje Nº 54 | 2:25 AM
    Quote (GUARAGUAO)
    Menú circular en CSS

    No sé porqué, pero algo me inspiró para crear un menú algo extraño. Quizá no sea del todo útil, pero fue un experimento interesante y me gustaría compartirlo con vosotros. Aquí está el ejemplo, para que vean de qué trata antes de leerse todo esto.

    El propósito

    El propósito de esta entrada es demostrar el poder que CSS tiene y que sinceramente no aprovechamos. Quizá sea algo difícil, pero créanme que vale la pena terminar y ver algo que funciona en casi cualquier ordenador sin importar su navegador, soporte de CSS, resolución, etc. Simplemente algo que FUNCIONA además de ser ÚTIL y ATRACTIVO. Esas tres palabras fueron las que se quedaron en mi mente mientras intentaba crear este menú. Al principio pensé que no serviría en Internet Explorer (pensaba usar pseudo-clases y algunas otras cosillas que IE no soporta bien); pero al final decidí crear algo más amigable al usuario y, sobretodo, más usable.

    La cosa ha sido probada en IE6.0, IE7.0, Opera9.10 y Firefox2.0.0.3. En todos funciona como se esperaba. Si pueden probarlo en otros navegadores se los agradeceré. Y ahora si; pasemos al tutorial que empieza en la siguiente página.

    Las imágenes
    Y bueno, lo primero es tener las imagenes listas. Estas son las imagenes que utilizaré para este tutorial:

    Las imágenes de los iconos miden 45px de ancho por 90px de alto. El fondo del menú mide 220px de alto y ancho. Por cierto, los iconos son parte del [utl=http://tango.freedesktop.org/Tango_Icon_Gallery]proyecto Tango[/url].

    Creando el HTML
    Y como siempre, empezaremos creando el esqueleto de nuestro HTML.

    Quote
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>

    <head>
    <title>Menu extraño</title>
    <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
    </head>

    <body>

    </body>
    </html>

    Ahora tenemos que crear nuestro menú. Si recordamos los contenidos semánticos, sabremos que un menú no es más que una lista de links. así que eso crearemos; una lista de links. Por lo tanto, nuestro menú debe ser una lista.

    Quote
    <div id="menwrap">
    <ul id="menu">
    <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
    <li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
    <li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
    <li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
    <li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
    <li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
    <li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
    <li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
    </ul>
    </div>

    Como pueden ver, nuestra lista contiene 3 elementos en cada <li>: un anchor (<a>), un <strong> y un <span>. El anchor contiene al <strong> y al <span>; el <strong> contiene el título de la sección y el <span> contiene una descripción breve de la sección. También he agregado un ID y una clase a cada anchor para poder identificar de qué sección del menú se trata y si está activa (menactive) o no (menitem).

    Ahora vamos a agregar un pequeño código que nos creará el header o título de la sección que actualmente estamos visitando. Tambien agregaré un div extra que se requiere para arreglar un pequeño bug en IE5.5.

    Quote
    <div id="menwrap">
    <div id="ie_height_fix">
    <h2 class="mail">Mail <span>Envíanos un mail</span></h2>
    <ul id="menu">
    <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
    <li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
    <li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
    <li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
    <li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
    <li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
    <li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
    <li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
    </ul>
    </div>
    </div>

    Con esto podrás ver que, como ejemplo, estoy usando la sección de Mail como activa. También hay que destacar que la tag <h2> contiene un <span> el cual contiene la breve descripción de la sección actual.

    Ya con todo esto, nuestro HTML debe haber quedado algo así:

    Quote
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>

    <head>
    <title>Menu extraño</title>
    <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
    </head>

    <body>

    <h1 id="header">Tutorial: Menu circular en CSS</span></h1>

    <h2>Ejemplo de menu</h2>

    <div id="menwrap">
    <div id="ie_height_fix">
    <h2 class="mail">Mail <span>Envíanos un mail</span></h2>
    <ul id="menu">
    <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
    <li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
    <li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
    <li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
    <li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
    <li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
    <li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
    <li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
    </ul>
    </div>
    </div>

    </body>
    </html>

    Ahora pasemos a lo divertido, el CSS.

    Creando el CSS
    Empezaremos dando estilo al contenedor y al div que creamos para arreglar el bug en IE5.5. El bug de IE5.5 que tratamos de arreglar es un problema con la forma en que representa las cajas. La cosa es así: si una caja tiene 200px de alto pero el contenido dentro de la misma es más alto que esto, IE5.5 se estira hasta cubrir todo el contenido en lugar de quedarse con su altura y seguir la propiedad de overflow respectiva (que puede ser mostrar scrollbars, esconder o mostrar el contenido). Esto rompía el fondo del menú y se veía todo chueco. También arregla algunos errores con la propiedad CSS ‘z-index’, pues IE requiere que esta propiedad sea aplicada al contenedor y no a los elementos contenidos. Con todo esto en mente, el CSS queda así:

    Quote
    /* contenedor */
    div#menwrap {
    width: 220px;
    height: 220px;
    margin: 5em auto;
    padding: 0;
    background: #fff url('background.jpg') no-repeat center 0;
    }

    div#ie_height_fix {
    width: 1px;
    height: 220px;
    margin: 0;
    padding: 0;
    }

    Seguiremos con nuestra lista. Le daremos un espacio de 50px de los elemento alrededor para darle espacio y que se vea bien; un ancho y alto de 220px; le quitaremos el padding y las bullets que por default tiene y por último lo posicionaremos relativamente para poder posicionar absolutamente los elementos contenidos dentro de ella.

    Quote
    ul#menu {
    margin: 50px auto;
    height: 220px;
    padding: 0;
    width: 220px;
    height: 220px;
    list-style: none;
    list-style-type: none;
    position: relative;
    }

    Seguimos con el elemento <li>. Este elemento será de 45px de alto y ancho; que es el alto y ancho de las imagenes de fondo; le quitaremos margin y padding y lo mostraremos como bloque. De nuevo, quitaremos las bullets que por default trae (algunos navegadores lo aplican a <li> otros a <ul>) y cambiaremos el tamaño de la fuente. El paso más importante es posicionar absolutamente estos elementos. Al posicionarlos absolutamente, se amontonarán en la esquina superior izquierda de nuestro menú lo cual es bueno, pues tendremos más control al posicionar nuestros items al rededor de nuestro círculo. También agregamos la propiedad z-index: 2;. Esta propiedad se encarga de acomodar los elementos en cascada, por así decirlo. El número 1 se mostrará primero, el número 2 detrás de el, el 3 detrás del 2 y así sucesivamente. Es poner elementos uno encima de otro. Cabe recordar que esta propiedad solo funciona con elementos que han sido posicionados, por ejemplo, con position: absolute; (como en nuestro caso).

    Quote
    ul#menu li {
    width: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;
    list-style-type: none;
    position: absolute;
    z-index: 2;
    font-size: 8pt;
    font-family: verdana, arial, tahoma, serif;
    }

    Con todo este embrollo de CSS, tenemos algo como esto:

    Como pueden ver, todo está amontonado. Eso es bueno. tambien pueden ver el header de nuestro menu encimado. Vamos a darle algo de estilo. Primero que nada, posicionaremos absolutamente la tag <h2>; le daremos un ancho de 150px y un alto de 35px. Con esto tenemos una pequeña cajita hasta arriba a la derecha; para centrarla le daremos algo de margin hacía arriba y abajo. Como queremos tener una imagen de fondo para esta tag, un padding centrara el texto y la imagen de la sección; alinearemos el texto a la izquierda e identaremos el texto unos 45px (que es más o menos el ancho de la imagen). Por último, le daremos un z-index de 0:

    Quote
    div#menwrap h2 {
    position: absolute;
    width: 150px;
    height: 35px;
    margin: 60px 0 0 45px;
    padding: 10px 0 0 0;
    text-align: left;
    font-size: 1.5em;
    z-index: 0;
    text-indent: 45px;
    }

    Ahora le daremos estilo al span que está dentro de nuestro header. Este span lo mostraremos como bloque de 90px de ancho y le daremos 5px de margin hacia arriba y 25px hacia la izquierda. Esto para colocarlo en su lugar (abajo del título de la sección, centrado en el círculo). Le daremos además un padding de 10px para poder darle un borde hacía arriba de 2px de ancho y de este modo “subrayar” el título de la página. Bajaremos un poco el tamaño de la fuente, eliminaremos el identado que dimos anteriormente a la tag <h2> y cambiaremos el color de la misma. Por último, alinearemos el texto al centro:

    Quote
    div#menwrap h2 span {
    display: block;
    text-indent: 0;
    font-size: .8em;
    width: 90px;
    border-top: 2px solid #abe9ab;
    margin: 5px 0 0 25px;
    padding: 5px 0 0 0;
    color: #666;
    text-align: center;
    }

    Ya hemos estilizado nuestro header, pero falta una cosa: la imagen. La imagen la colocaremos identificando la clase del <h2>. En el ejemplo tenemos class=“mail”, pero cada sección tiene una clase que se llama del mismo modo que el id del anchor de la sección. Por lo tanto, aplicaremos la imagen a todas las clases de cada sección. La imagen será posicionada a la izquierda y a -45px de arriba para ocultar la parte de la imagen que tiene el círculo verde a su alrededor:

    Quote
    /* Headers */

    div#menwrap h2.home {
    background: url('home.gif') no-repeat left -45px;
    }

    div#menwrap h2.tutos {
    background: url('tutos.gif') no-repeat left -45px;
    }

    div#menwrap h2.files {
    background: url('files.gif') no-repeat left -45px;
    }

    div#menwrap h2.search {
    background: url('search.gif') no-repeat left -45px;
    }

    div#menwrap h2.mail {
    background: url('mail.gif') no-repeat left -45px;
    }

    div#menwrap h2.id {
    background: url('id.gif') no-repeat left -45px;
    }

    div#menwrap h2.write {
    background: url('write.gif') no-repeat left -45px;
    }

    div#menwrap h2.logout {
    background: url('logout.gif') no-repeat left -45px;
    }

    Ahora nuestro menú se ve así:

    Ya va tomando forma. Ahora solo nos queda acomodar los iconos al rededor del círculo. Para esto, tenemos que acomodar cada icono por separado, con precisión de pixel y posicionando absolutamente cada elemento. Primero que nada, vamos a esconder la información; es decir, todo el texto dentro de nuestros anchors:

    Quote
    /* Esconder información */

    ul#menu li a.menitem span, ul#menu li a.menitem strong, ul#menu li a.menactive span, ul#menu li a.menactive strong {
    display: none;
    }

    Y ahora vamos a mostrar la información cuando pasemos el mouse sobre el anchor: Para esto posicionaremos el tag <strong> y el tag <span> absolutamente; los mostraremos como bloques y los pondremos a la izquierda del menu. El tag <hspan>, que es la descripción, será una caja amarilla con un borde un poco más oscuro, tendrá 120px de ancho, el atributo de z-index: 1; y le daremos 20px de padding hacia arriba para poder colocar ahí el tag <strong>, que es el título de la sección. Este tag (<strong>) tendrá un ancho de 100px y un borde al fondo de 1px color amarillo. También le daremos la propiedad de z-index: 2; para colocarlo sobre el tag <span>. A ambas tags les daremos el atributo left: 50px; para alejarlo 5px a la derecha de nuestro icono (¿recuerdas que la imagen es de 45px de ancho? Le vamos a dar 5px de espacio entre el icono y el tooltip; por lo que 45px+5px = 50px) y top:0; para que esté a la misma altura que nuestro icono. También he agregado el atributo opacity para los navegadores que lo soportan:

    Quote
    /* Mostrar información en :hover */

    ul#menu li a.menitem:hover strong {
    display: block;
    text-align: left;
    position: absolute;
    width: 100px;
    border-bottom: 1px solid #ffdb5e;
    padding: 2px 0 2px 0;
    margin: 0 0 0 5px;
    color: #333;
    left: 50px;
    top: 0;
    z-index: 2;
    }

    ul#menu li a.menitem:hover span {
    display: block;
    position: absolute;
    width: 120px;
    text-align: left;
    border: 1px solid #ffe897;
    background-color: #ffefb7;
    padding: 20px 2px 2px 2px;
    color: #333;
    left: 50px;
    top: 0;
    z-index: 1;
    opacity: .9;
    }

    Con todo esto ya practicamente hemos terminado. Solo nos falta dar algo de estilo a los iconos. Empezaremos con darles estilo cuando están activos y cuando no. Cuando un icono no está activo, queremos mostrar el fondo con el icono sin el círculo verde, por lo que posicionamos la imagen de fondo hasta abajo. Cuando el mouse pasa encima de un icono que no está activo, mostraremos la imagen con el círculo verde, por lo que posicionamos el fondo hasta arriba. Finalmente, cuando el icono está activo mostraremos la imagen con el círculo verde para diferenciarlo de los que no lo están. De nuevo, he agregado el atributo opacity para los navegadores que lo soportan:

    Quote
    /* Fondo en :active y :hover */

    /* Items del menu no activos */

    ul#menu a.menitem:link, ul#menu a.menitem:visited {
    background-position: left bottom;
    opacity: .7;
    }

    ul#menu a.menitem:hover, ul#menu a.menitem:active, {
    background-position: left top;
    background-color: transparent;
    opacity: .9;
    }

    /* Items del menu activos */

    ul#menu li a.menactive {
    background-position: left top;
    background-color: transparent;
    opacity: 1;
    }

    ul#menu li a.menactive:hover {
    opacity: 1;
    }

    Con todo esto lo único que nos queda es dar estilo a los anchos. Empezaremos con mostrarlos como un bloque de 45px por 45px posicionado absolutamente y quitando el borde (si es necesario):

    Quote
    /* Dando estilo a los anchors */
    ul#menu a {
    border: 0;
    position: absolute;
    width: 45px;
    height: 45px;
    }

    Ya solo nos queda especificar la imagen de cada icono y posicionarla en su lugar. Para posicionarlas usaremos los atributos tops y left. ¿Recuerdas que todos nuestros <li> están hasta arriba a la izquierda? Esto nos facilitará el posicionamiento de los iconos. Relativo a esta posición (hasta arriba a la derecha) daremos los valores de tops y left e iremos acomodando los iconos alrededor del círculo. También especificaremos la iamgen de fondo de cada anchor:

    Quote
    #home {
    top: -20px;
    left: 95px;
    background-image: url('home.gif');
    }

    #tutos {
    top: 20px;
    left: 170px;
    background-image: url('tutos.gif');
    }

    #files {
    top: 90px;
    left: 200px;
    background-image: url('files.gif');
    }

    #search {
    top: 155px;
    left: 170px;
    background-image: url('search.gif');
    }

    #mail {
    top: 195px;
    left: 95px;
    background-image: url('mail.gif');
    }

    #id {
    top: 155px;
    left: 10px;
    background-image: url('id.gif');
    }

    #write {
    top: 90px;
    left: -20px;
    background-image: url('write.gif');
    }

    #logout {
    top: 20px;
    left: 10px;
    background-image: url('logout.gif');
    }

    Y con todo esto ya hemos terminado. Pueden ver el producto terminado aquí. Es un rollo, yo sé; pero traten de analizarlo y no es tan difícil. Ahora bien, la aplicación de este menú sigue siendo un misterio para mi… pero tal vez alguien en algún lugar logre encontrarle un uso.


    Perdón por el tamaño del quote.

    Lo intente hacer en mi página web > http://vsbaires.do.am (esta abajo de todo la prueba), pero no me salió y no logro entender en que me equivoco ya que seguí todo al pie de la letra.
    En CSS me quedo esto:

    Quote

    /* contenedor */
    div#menwrap {
    width: 220px;
    height: 220px;
    margin: 5em auto;
    padding: 0;
    background: #fff url('background.jpg') no-repeat center 0;
    }

    div#ie_height_fix {
    width: 1px;
    height: 220px;
    margin: 0;
    }

    ul#menu {
    margin: 50px auto;
    height: 220px;
    padding: 0;
    width: 220px;
    height: 220px;
    list-style: none;
    list-style-type: none;
    position: relative;
    }

    ul#menu li {
    width: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;
    list-style-type: none;
    position: absolute;
    z-index: 2;
    font-size: 8pt;
    font-family: verdana, arial, tahoma, serif;
    }

    div#menwrap h2 {
    position: absolute;
    width: 150px;
    height: 35px;
    margin: 60px 0 0 45px;
    padding: 10px 0 0 0;
    text-align: left;
    font-size: 1.5em;
    z-index: 0;
    text-indent: 45px;
    }

    div#menwrap h2 span {
    display: block;
    text-indent: 0;
    font-size: .8em;
    width: 90px;
    border-top: 2px solid #abe9ab;
    margin: 5px 0 0 25px;
    padding: 5px 0 0 0;
    color: #666;
    text-align: center;
    }

    /* Headers */

    div#menwrap h2.home {
    background: url('http://vsbaires.do.am/home.gif') no-repeat left -45px;
    }

    div#menwrap h2.faq {
    background: url('http://vsbaires.do.am/faq.gif') no-repeat left -45px;
    }

    div#menwrap h2.venta {
    background: url('http://vsbaires.do.am/ventas.gif') no-repeat left -45px;
    }

    div#menwrap h2.contacto {
    background: url('http://vsbaires.do.am/contactar.gif') no-repeat left -45px;
    }

    div#menwrap h2.id {
    background: url('http://vsbaires.do.am/perfil.gif') no-repeat left -45px;
    }

    div#menwrap h2.logout {
    background: url('http://vsbaires.do.am/logout.gif') no-repeat left -45px;
    }

    /* Esconder información */

    ul#menu li a.menitem span, ul#menu li a.menitem strong, ul#menu li a.menactive span, ul#menu li a.menactive strong {
    display: none;
    }

    /* Mostrar información en :hover */

    ul#menu li a.menitem:hover strong {
    display: block;
    text-align: left;
    position: absolute;
    width: 100px;
    border-bottom: 1px solid #ffdb5e;
    padding: 2px 0 2px 0;
    margin: 0 0 0 5px;
    color: #333;
    left: 50px;
    top: 0;
    z-index: 2;
    }

    /* Fondo en :active y :hover */

    /* Items del menu no activos */

    ul#menu a.menitem:link, ul#menu a.menitem:visited {
    background-position: left bottom;
    opacity: .7;
    }

    ul#menu a.menitem:hover, ul#menu a.menitem:active, {
    background-position: left top;
    background-color: transparent;
    opacity: .9;
    }

    /* Items del menu activos */

    ul#menu li a.menactive {
    background-position: left top;
    background-color: transparent;
    opacity: 1;
    }

    ul#menu li a.menactive:hover {
    opacity: 1;
    }

    /* Dando estilo a los anchors */
    ul#menu a {
    border: 0;
    position: absolute;
    width: 45px;
    height: 45px;
    }

    #home {
    top: -20px;
    left: 95px;
    background-image: url('http://vsbaires.do.am/home.gif');
    }

    #faq {
    top: 20px;
    left: 170px;
    background-image: url('http://vsbaires.do.am/faq.gif');
    }

    #venta {
    top: 90px;
    left: 200px;
    background-image: url('http://vsbaires.do.am/ventas.gif');
    }

    #contacto {
    top: 155px;
    left: 170px;
    background-image: url('http://vsbaires.do.am/contactar.gif');
    }

    #id {
    top: 155px;
    left: 10px;
    background-image: url('http://vsbaires.do.am/perfil.gif');
    }

    #logout {
    top: 20px;
    left: 10px;
    background-image: url('http://vsbaires.do.am/logout.gif');
    }


    y en el editor de diseño me quedo esto:
    Quote
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>

    <head>
    <title>Menu extraño</title>
    <meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
    </head>

    <body>

    <h1 id="header">TEST: Menu circular en CSS</span></h1>

    <h2>Ejemplo de menu</h2>

    <div id="menwrap">
    <div id="ie_height_fix">
    <h2 class="faq">FAQ (Preguntas frecuentes)<span>Entra si necesitas ayuda.</span></h2>
    <ul id="menu">
    <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
    <li><a href="/faq" id="faq" class="menactive"><strong>FAQ (Preguntas Frecuentes)</strong> <span>¿Necesitas ayuda? Entra aquí.</span></a></li>
    <li><a href="/shop" id="venta" class="menitem"><strong>Artículos a la venta</strong> <span>Visita nuestros productos.</span></a></li>
    <li><a href="/index/0-3" id="contacto" class="menitem"><strong>Contactar</strong> <span>Envíanos tu consulta.</span></a></li>
    <li><a href="/index/8" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
    <li><a href="/index/10" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
    </ul>
    </div>
    </div>

    </body>
    </html>


    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 55 | 1:10 PM
    Menu Carrusel foto JQuery

    Aquí les dejamos como hacer un carrusel de fotos con JQuery.

    Puedes ver el demo en linea en este link de lo que te enseñaremos a hacer.

    PASO 1
    Creamos una carpeta nueva llamada carousel dentro de la cual vamos a crear una capeta llamada imágenes donde vamos a colocar las imágenes que vamos a utilizar en nuestro post.



    PASO 2
    Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML.



    PASO 3
    Debajo de la etiqueta Carousel Infinito con Jquery vamos a copiar el siguiente código html4strict.

    Quote
    <link href="css/estilo.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
     
    <script type="text/javascript">
     
    $.fn.infiniteCarousel = function () {
     
    function repeat(str, num) {
    return new Array( num + 1 ).join( str );
    }
     
    return this.each(function () {
    var $wrapper = $('> div', this).css('overflow', 'hidden'),
    $slider = $wrapper.find('> ul'),
    $items = $slider.find('> li'),
    $single = $items.filter(':first'),
     
    singleWidth = $single.outerWidth(),
    visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
    currentPage = 1,
    pages = Math.ceil($items.length / visible);
     
    // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
    if (($items.length % visible) != 0) {
    $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
    $items = $slider.find('> li');
    }
     
    // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
    $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
    $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
    $items = $slider.find('> li'); // reselect
     
    // 3. Set the left position to the first 'real' item
    $wrapper.scrollLeft(singleWidth * visible);
     
    // 4. paging function
    function gotoPage(page) {
    var dir = page < currentPage ? -1 : 1,
    n = Math.abs(currentPage - page),
    left = singleWidth * dir * visible * n;
     
    $wrapper.filter(':not(:animated)').animate({
    scrollLeft : '+=' + left
    }, 500, function () {
    if (page == 0) {
    $wrapper.scrollLeft(singleWidth * visible * pages);
    page = pages;
    } else if (page > pages) {
    $wrapper.scrollLeft(singleWidth * visible);
    // reset back to start position
    page = 1;
    }
     
    currentPage = page;
    });
     
    return false;
    }
     
    $wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
     
    // 5. Bind to the forward and back buttons
    $('a.back', this).click(function () {
    return gotoPage(currentPage - 1);
    });
     
    $('a.forward', this).click(function () {
    return gotoPage(currentPage + 1);
    });
     
    // create a public interface to move to a specific page
    $(this).bind('goto', function (event, page) {
    gotoPage(page);
    });
    });
    };
     
    $(document).ready(function () {
    $('.infiniteCarousel').infiniteCarousel();
    });
    </script>


    PASO 4
    Presionamos el comando Ctrl + S y guardamos nuestro documento HTML con el nombre carousel.html



    PASO 5
    Ahora vamos al menú File – New y creamos un nuevo documento CSS.



    PASO 6
    Dentro del documento copiamos el siguiente código CSS.

    Quote
    body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
    input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
    label { display: block; }
     
    .infiniteCarousel {
    width: 500px;
    position: relative;
    }
     
    .infiniteCarousel .wrapper {
    width: 420px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
    overflow: auto;
    min-height: 10em;
    margin: 0 40px;
    position: absolute;
    top: 0;
    }
     
    .infiniteCarousel ul a img {
    border: 5px solid #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
     
    .infiniteCarousel .wrapper ul {
    width: 9999px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
    }
     
    .infiniteCarousel ul li {
    display:block;
    float:left;
    padding: 10px;
    height: 85px;
    width: 85px;
    }
     
    .infiniteCarousel ul li a img {
    display:block;
    }
     
    .infiniteCarousel .arrow {
    display: block;
    height: 36px;
    width: 37px;
    text-indent: -999px;
    position: absolute;
    top: 37px;
    cursor: pointer;
    background-image: url(../imagenes/arrow.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    }
     
    .infiniteCarousel .forward {
    background-position: 0 0;
    right: 0;
    }
     
    .infiniteCarousel .back {
    background-position: 0 -72px;
    left: 0;
    }
     
    .infiniteCarousel .forward:hover {
    background-position: 0 -36px;
    }
     
    .infiniteCarousel .back:hover {
    background-position: 0 -108px;
    }
     
    #carouselc {
    height: 500px;
    width: 500px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }


    PASO 7
    Presionamos el comando Ctrl + S y guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css

    PASO 8
    Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

    Quote
    <div class="carouselc" id="carouselc">
    <h1>Infinite Carousel</h1>
     
    <div class="Carousel Infinito">
    <div style="overflow: hidden;" class="wrapper">
    <ul>
    <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/1.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/2.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/3.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/4.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/5.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/6.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/7.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/8.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/9.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/10.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/12.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
     
    <li class="cloned"><a href="http://www.tutorialesenlaweb.com" title="Tutoriales en la Web"><img src="imagenes/13.jpg" alt="Tutoriales en la web" width="85" height="85"></a></li>
    </ul>
    </div><a class="arrow back"><</a><a class="arrow forward">></a>
    </div>
    </div>

    PASO 9
    Por ultimo creamos una carpeta nueva llamada js donde vamos a copiar el archivo js que adjunto en este tutorial.

    PASO 10
    Listo ya tenemos nuestro tutorial terminado.



    Descarga el editable de Menu Carrusel Jquery


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 56 | 12:16 PM
    Menú multicolor con XHTML y CSS

    Ya hemos visto en otros ejemplos de menús realizados con HTML o XHTML y CSS, que las posibilidades para realizar diferentes efectos son muy bastas, y que estos lenguajes tienen como único límite la propia imaginación que pongamos en el desarrollo. En el ejemplo que traemos hoy, todos los ítems de menú tienen colores diferentes, consiguiendo un efecto muy atractivo.

    Generalmente los menús desarrollados en páginas web, tienen todos los ítems de menú del mismo color y forma. Sin embargo, es posible hacer que cada ítem se muestre diferente de los demás, simplemente aplicando un identificador a cada uno de ellos, y dando características diferentes en el archivo CSS.

    El ejemplo que mostraremos a continuación, es muy sencillo, pero el resultado es atractivo. Durante el desarrollo, explicaremos en forma detallada como funciona. En primer lugar, generaremos los documentos necesarios. Creamos un archivo XHTML 1.0 estricto, con el DTD que corresponde. En el encabezado pondremos el título y el enlace al archivo CSS, que en el caso del ejemplo se encuentra en la raíz del sitio. El siguiente es el código que deberemos introducir:

    Quote
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Menu de ejemplo</title>
        <link href="estilo.css" rel="Stylesheet" type="text/css" media="screen" />
      </head>

    Luego, dentro de la etiqueta “body”, crearemos una capa (div), cuya única finalidad es darle una posición al menú. Dentro de la capa, crearemos la lista sin ordenar (ul) con los seis ítems que tiene el menú de ejemplo. Cada ítem (li) del menú tendrá un identificador. Marcando en forma genérica a cada ítem, es decir, dando formato a los ítems de menú (li), daremos las características que les son comunes a todos los ítems, mientras que con el identificador lograremos darle las características particulares de cada uno de ellos. Como vemos en el código de ejemplo que damos a continuación, cada ítem tiene un identificador propio. Dentro de cada ítem, veremos los enlaces con sus respectivos textos.

    Quote
    <body>
     
        <div id="menu">
     
          <ul>
            <li id="item-uno">
              <a href="#">Enlace uno</a>
            </li>
     
            <li id="item-dos">
              <a href="#">Enlace dos</a>
            </li>
     
            <li id="item-tres">
              <a href="#">Enlace tres</a>
            </li>
     
            <li id="item-cuatro">
              <a href="#">Enlace cuatro</a>
            </li>
     
            <li id="item-cinco">
              <a href="#">Enlace cinco</a>
            </li>
     
            <li id="item-seis">
              <a href="#">Enlace seis</a>
            </li>
          </ul>
     
      </div>
     
    </body>

    Ahora veremos el archivo CSS con los elementos necesarios para que el menú se vea como deseamos.

    Quote
    body  {
      margin: 0;
      padding: 0;
      font: normal 13px arial, helvetica, sans-serif;
      background: #000;
      }
     
    #menu {
      width: 900px;
      margin: 0 auto;
      margin-top: 50px;
      }
     
    #menu ul  {
      list-style: none;
      margin: 0;
      }
     
    #menu ul li {
      margin: 0;
      float: left;
      }
     
    #menu ul li a {
      margin:0 2px;
      width: 138px;
      font-weight:bold;
      font-size:1.5em;
      text-align: center;
      line-height: 44px;
      display:block;
      text-decoration: none
      }
     
    #menu ul li a:hover {
      color:#000;
      }
     
    #item-uno a {
      border-bottom:5px solid #f00;
      color: #f00
      }
     
    #item-dos a {
      border-bottom:5px solid #f80;
      color: #f80;
      }
     
    #item-tres a {
      border-bottom:5px solid #ff0;
      color: #ff0;
      }
     
    #item-cuatro a {
      border-bottom:5px solid #8f0;
      color: #8f0;
      }
     
    #item-cinco a {
      border-bottom:5px solid #0ff;
      color: #0ff;
      }
     
    #item-seis a {
      border-bottom:5px solid #08f;
      color: #08f;
      }
     
    #item-uno a:hover {
      background:#f00;
      }
     
    #item-dos a:hover {
      background:#f80;
      }
     
    #item-tres a:hover {
      background:#ff0;
      }
     
    #item-cuatro a:hover {
      background:#8f0;
      }
     
    #item-cinco a:hover {
      background:#0ff;
      }
     
    #item-seis a:hover {
      background:#08f;
      }

    Como vemos, el fondo de la página es negro, y tiene como finalidad hacer que los colores de los ítems de menú se destaquen más por contraste. También se han eliminado los márgenes que algunos navegadores tienen por defecto y se han determinado las características de la fuente para todos los elementos de la página.

    Luego eliminamos los márgenes que las listas tienen por defecto y también el estilo de lista, de forma que no se muestren los botones que encabezan cada ítem (#menu ul). Debajo, hacemos que cada ítem de la lista sea flotante y también quitamos los márgenes que tienen por defecto (#menu ul li).

    Mediante #menu ul li a daremos los elementos comunes a cada ítem del menú. En primer lugar, determinamos márgenes, dimensiones, fuentes y alineación, además de agregar la propiedad display: block”, para hacer que los ítems de lista con enlace dejen de comportarse como elementos de línea. De otra forma, sería imposible hacer que tomen las dimensiones deseadas. Mediante el empleo de ls pseudo-clase:hover, determinamos el comportamiento del ítem (solo el color del texto del enlace) cuando el puntero pasa sobre él. El hecho de que hayamos incluido la propiedad display, hace que todo el ítem, no solo el texto, se modifique cuando el puntero pasa sobre él.

    Debajo, utilizando el identificador individual de cada ítem, damos formato a cada uno de los ítems de menú, dando un borde inferior (ver imagen) y color al texto. Más abajo, también empleamos la pseudo clase :hover en cada ítem particular, para darle un color de fondo cuando el puntero pasa sobre el ítem. El texto en este caso es negro, debido a que lo hemos determinado de esta forma en #menu ul li a:hover, como podemos ver en el código que entregamos.

    Otra forma de hacerlo
    También es posible hacerlo utilizando una imagen con los colores del menú. Si bien tiene muchas puntos en común con el menú que dejamos hoy, hay elementos que son totalmente diferentes, y que veremos en adelante.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    josemanuel3800
    Mensajes: 389
    Reputación: 10
    Mensaje Nº 57 | 0:37 AM
    GUARAGUAO,

    Quote (GUARAGUAO)
    Descarga el editable de Menu Mac Jquery.

    en link de ese menu va a dar a otra descarga :S

    Si lo intentas, puedes perder; si no lo intentas, ya has perdido.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 58 | 6:54 PM
    Menú animado con CSS 3

    Nuevo ejemplo de animaciones CSS 3, en el que construimos un menú animado con HTML y CSS, sin necesidad de Javascript ni jQuery

    En este nuevo artículo sobre animación con CSS 3 vamos a realizar un menú dinámico con tan solo HTML y CSS 3. Personalmente me ha parecido sencillo y puede darnos muchas posibilidades a la hora de maquetar nuestra web, ya que no necesitamos tener conocimientos de Javascript ni de jQuery.

    Antes de ponernos manos a la obra, sugiero ver el resultado final en este enlace. Pero recordar que solamente los navegadores que soporten animaciones CSS lo podrán ver correctamente. En el momento de escribir este artículo los navegadores con los que verás bien el ejemplo son: Google Chrome y Safari. Aunque cabe destacar que Opera y Mozilla Firefox están en base beta y algunas propiedades como transition y box-shadow funcionan.

    Nota: Como la especificación de las animaciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko (Firefox 4). Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, especificarías la propiedad de transición como -moz-transition, -webkit-transition y -o-transition.

    Lo primero que vamos a hacer es crearnos nuestro HTML, es decir, el código necesario que utilizaríamos para crearnos nuestro menú normalmente, eso si, realizado con DIVs y no con tablas.

    Quote
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">

    <html>
    <head>
       <title>Menú animado con CSS</title>
    <link rel="stylesheet" href="menu.css" type="text/css">
    </head>

    <body>

    <div class="menu-general">
    <ul class="nav">
    <li><a href="http://www.tusitio.com/html/">HTML</a></li>
    <li><a href="http://www.tusitio.com/css/">CSS</a></li>
    <li><a href="http://www.tusitio.com/javascript/">Javascript</a></li>
    <li><a href="http://www.tusitio.com/asp/">ASP</a></li>
    <li><a href="http://www.tusitio.com/php/">PHP</a></li>

    </ul>
    </div>
    </div>
    </body>
    </html>

    Como podéis ver no tiene nada del otro mundo, es simplemente un menú en el que utilizamos un listado.

    Bien pues ahora vamos a dar estilos a los DIV y al listado para crear nuestro menú dinámico.

    Lo primero que vamos a realizar es un fondo, simplemente para que el menú quede bien en nuestro ejemplo.

    Quote
    body{
       background: -webkit-gradient(linear, left top, left bottom, from(#34bdfc), to(#f5f8fa));
    }

    Este fono es de un color azul que va degradándose a un blanco de arriba hacia abajo.

    A continuación vamos a darle estilos a nuestro menú-general:

    Quote
    .menu-general {
       position: relative;
       float: left;
    }

    Simplemente vamos a hacer que flote a la izquierda y que tenga una posición relativa (Esto es importante para que nuestra animación funcione correctamente).

    Ahora ya pasamos a los estilos del listado de nuestro menú:

    Quote
    ul.nav {
       list-style: none;
       display: block;
       width: 200px;
       position: relative;
       top: 50px;
       left: 100px;
       padding: 60px 0 60px 0;
       -webkit-background-size: 50% 100%;
       -moz-background-size: 50% 100%;
       -o-background-size: 50% 100%;
    }

    Aquí lo que hacemos es quitar los guiones del listado, situamos el listado y le damos un tamaño. Al final le damos la animación de transformar el tamaño del 50% al 100%. esto nos dará la animación que queremos, es decir, que se haga grande el botón.

    Quote
    ul.nav li a {
       -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
       background: #f77e08;
       color: #174867;
       padding: 7px 15px 7px 15px;
       -webkit-border-top-right-radius: 10px;
       -moz-border-top-right-radius: 10px;
       -o-border-top-right-radius: 10px;
       -webkit-border-bottom-right-radius: 10px;
       -moz-border-bottom-right-radius: 10px;
       -o-border-bottom-right-radius: 10px;
       -webkit-border-top-left-radius: 10px;
       -moz-border-top-left-radius: 10px;
       -o-border-top-left-radius: 10px;
       -webkit-border-bottom-left-radius: 10px;
       -moz-border-bottom-left-radius: 10px;
       -o-border-bottom-left-radius: 10px;
       width: 100px;
       display: block;
       text-decoration: none;
       -webkit-box-shadow: 2px 2px 4px #0e169b;
       -moz-box-shadow: 2px 2px 4px #0e169b;
       -o-box-shadow: 2px 2px 4px #0e169b;
    }

    En este estilo lo que hacemos es construir los botones de nuestro menú. Le damos un color de fondo, unas esquinas redondeadas, y una sobra alrededor.

    Quote
    ul.nav li a:hover {
       background: #faef77;
       color: #67a5cd;
       padding: 7px 15px 7px 30px;
    }

    Y por ultimo le damos estilos a nuestro menú para cuando pasemos por encima con el ratón.

    Con esto ya tendría que funcionarnos nuestro menú, eso si, recordando siempre que en el momento de escribir este artículo sólo funcionaba completamente para los navegadores Safari y Chrome y parcialmente para Mozilla Firefox y Opera.

    Podemos ver el ejemplo en marcha en una página aparte.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 59 | 2:28 PM
    Visualizar menús desplegables por encima de películas Flash


    Este es un tip only for dummies, que es muy sencillo pero que da dolores de cabeza a la gente que apenas se inicia en el mundo de Ajax únicamente utilizando los códigos automáticos de Spry que trae Dreamweaver.

    El problema que muchos se encuentran es que los menús desplegables les quedan por debajo de las películas Flash, aun cuando está en un index inferior.



    Esto tiene una solución muy sencilla, y pasa por añadirle la propiedad wmode de la película Flash a valor transparente.

    De manera que si estamos utilizando SwfObject para colocar el SWF, utilizaríamos este código:

    Code
    <script type="text/javascript">        
            var flashvars = {};  
            var params = {};  
            var attributes = {};  
            params.wmode = "transparent";  
            swfobject.embedSWF("a.swf", "flash", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes);  
    </script>


    Esta línea de código es suficiente para resolver el problema.



    Aqui el ejemplo, por si alguien lo quiere ver.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 60 | 6:07 PM
    Menú imágenes con CSS


    A veces da la sensación que cargamos demasiado el blog con adornos y accesorios, pero en ocasiones es necesario cuando la temática y finalidad lo requiere como es el caso de blogs dedicados a manualidades y ventas donde las imágenes juegan un papel importante.

    Respondiendo una consulta reciente vamos a hacer algo sencillo y que nos llevará poco tiempo se trata de añadir unas imágenes que hagan las veces de menú y enlacen con las etiquetas del blog, de esa forma cada vez que marcamos sobre una imagen en concreto nos mostrará todas las entradas con la categoría asociada a esa imagen.

    También es posible, que las imágenes enlacen con alguna página estática donde mostraremos una descripción o una galería todo queda a elección de cada uno. El resultado sería algo así:


    Click on the image to view it in full size.


    Nos situamos en plantilla edición de HTML y justo antes de ]]>< / b : skin > añadimos los estilos:

    Code
    /* Crosscol-imagen
    ----------------------------------------------- */
    #crosscol-imagen {
    height: 270px;
    position: relative;
    }
    #crosscol-imagen .container {
    width: 850px;
    height: 180px;
    overflow: hidden;
    position: absolute;
    top: 40px;    
    left: 20px;     
    }
    #crosscol-imagen ul {
    list-style-type: none;
    width: 99999px;
    position: absolute;
    top: 0; left: 0;
    }
    #crosscol-imagen ul li {
    float: left;
    margin-right: 25px;
    }
    #crosscol-imagen ul li a {
    width: 180px;
    height: 160px;
    display: block;
    overflow: hidden;
    -moz-border-radius:2px 2px 2px 2px;
    -moz-box-shadow:2px 3px 5px #696969;
    background:none repeat scroll 0 0 #FFFFFF;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
    border:1px solid #C0C0C0;
    background-color: #fff;    
    padding: 10px;
    }
    #crosscol-imagen ul li img {    
    width: 180px;    
    height: 160px;
    }


    Guardamos los cambios y editamos un nuevo gadget de HTML en el crosscol:



    En su interior añadimos lo siguiente:

    Code
    <div id='crosscol-imagen'>
    <ul>
    <li><a href='#'><img alt="" src="Url-imagen" /></a></li>
    <li><a href='#'><img alt="" src="Url-imagen" /></a></li>
    <li><a href='#'><img alt="" src="Url-imagen" /></a></li>
    <li><a href='#'><img alt="" src="Url-imagen" /></a></li>
    </ul>
    </div>


    Sustituimos la almohadilla de href='#' por la url que vamos a enlazar.

    En Url-imagen añadimos la url de cada imagen, no es necesario que todas las imágenes tengan el mismo tamaño porque viene definido en los estilos y se mostrarán todas igual.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Menús (escribimos aquí sobre la cosa)
    Búscar: