ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » menu http://www.zoneartcss.com Tips de Diseño y Desarrollo Web Wed, 26 Oct 2011 18:31:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Menu Tabs Generator no CSS by Maumas http://www.zoneartcss.com/webdesign/css/tabs-generator-by-maumas/ http://www.zoneartcss.com/webdesign/css/tabs-generator-by-maumas/#comments Thu, 20 Aug 2009 04:21:52 +0000 Liz Palacios http://www.zoneartcss.com/diseno_grafico/tabs-generator-by-maumas/

Generador de imagenes para un menu con pestañas

Navigation Tab Menu Generator with CSS – Tabs Generator

Navegando por la web me encontre un sitio llamado Tabs Generator que te ayuda a crear de una manera muy sencilla y rapida pestañas para tu web, que bien puedes usar para algun menu o lo que quieras.

Les paso la Liga!!

http://www.tabsgenerator.com/

Granito de Arena de: Maumas

Reseña Alex:
Tabs Generator es una herramienta web que es muy util para los desarrolladores que no tienen tiempo para abrir su photoshop y hacerse con un bonito botonsito, ahorra tiempo es practico, y personabilisable, es decir podemos indicar ancho,alto,borde, fondo, etc… y el resultado final podemos descargarlo en PNG, nuestro boton, aun que no vendria mal que nos arrojara igual XHTML y CSS, pero en esta herrienta aun no lo trae. aun que no deja de ser una buena opcion no esta de mas probarla chao!…

PD: Muchas gracias Maumas

]]> http://www.zoneartcss.com/webdesign/css/tabs-generator-by-maumas/feed/ 3 Menu con Javascript y jQuery – Efecto Sombra http://www.zoneartcss.com/webdesign/css/menu-con-javascript-y-jquery-efecto-sombra/ http://www.zoneartcss.com/webdesign/css/menu-con-javascript-y-jquery-efecto-sombra/#comments Tue, 04 Aug 2009 19:37:22 +0000 miguelortega http://www.zoneartcss.com/?p=449

menu deslizable

Menu deslizable

Este es un efecto de sombra exelente de un menu sencillo hecho con javascript y las librerias del JQuery, en donde logramos un efecto de movimiento de una sobra para enfocar una sección.

Paso 1: El HTML

Dado que la mayoría de los desarrolladores creen que la interfaz de usuario una lista desordenada (ul) representa la correcta estructura semántica de un menú / barra Navbar, vamos a comenzar por escribir precisamente eso.

1
2
3
4
5
6

<ul class="lavaLamp"> 
             <li><a href="#">Home</a></li> <li> <a href="#"> Inicio </ a> </ li> 
             <li><a href="#">Plant a tree</a></li> <li> <a href="#"> Planta un árbol </ a> </ li> 
             <li><a href="#">Travel</a></li> <li> <a href="#"> Viajes </ a> </ li> 
             <li><a href="#">Ride an elephant</a></li> <li> <a href="#"> paseo un elefante </ a> </ li> 
         </ul> </ ul>

Paso 2 : El Css

Puede esta css de muchas maneras diferentes lograr su propio menú personalizado. La siguiente hoja de estilo no es más que una posibilidad.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/ * Estilos para la totalidad del menú LavaLamp * / 
 .lavaLamp { . lavaLamp ( 
     position: relative; posición: pariente; 
     height: 29px; width: 421px; altura: 29px; ancho: 421px; 
     background: url("../image/bg.gif") no-repeat top; fondo: url ("../ imagen / bg.gif ") no-repeat top; 
     padding: 15px; margin: 10px 0; padding: 15px; margin: 10px 0; 
     overflow: hidden; desbordamiento: oculto; 
 } ) 
     /* Force the list to flow horizontally */ / * Fuerza de la lista para el flujo horizontal * / 
     .lavaLamp li { . lavaLamp li ( 
         float: left; flotador: izquierda; 
         list-style: none; lista de estilo: ninguno; 
     } ) 
         /* Represents the background of the highlighted menu-item. / * Representa el fondo del menú resaltado. */ * / 
         .lavaLamp li.back { . lavaLamp li.back ( 
             background: url("../image/lava.gif") no-repeat right -30px; fondo: url ("../ imagen / lava.gif ") no se repita la derecha 30px; 
             width: 9px; height: 30px; anchura: 9PX; altura: 30px; 
             z-index: 8; z-index: 8; 
             position: absolute; position: absolute; 
         } ) 
             .lavaLamp li.back .left { . lavaLamp li.back. izquierda ( 
                 background: url("../image/lava.gif") no-repeat top left; fondo: url ("../ imagen / lava.gif ") de no repetir parte superior izquierda; 
                 height: 30px; altura: 30px; 
                 margin-right: 9px; margen derecha: 9PX; 
             } ) 
         /* Styles for each menu-item. / * Estilos para cada menú. */ * / 
         .lavaLamp li a { . lavaLamp una li ( 
             position: relative; overflow: hidden; posición: pariente; desbordamiento: oculto; 
             text-decoration: none; text-decoration: none; 
             text-transform: uppercase; texto-transformar: mayúsculas; 
             font: bold 14px arial; font: 14px Arial negrita; 
             color: #fff; outline: none; color: # fff; esbozo: ninguno; 
             text-align: center; alinear texto: centro; 
             height: 30px; top: 7px; altura: 30px; arriba: 7px; 
             z-index: 10; letter-spacing: 0; z-index: 10; carta de espaciamiento: 0; 
             float: left; display: block; flotador: izquierda; pantalla: bloque; 
             margin: auto 10px; margin: 10px auto; 
         } )


Paso 3: El Javascript

Este JavaScript lo colocaras en el Head

1
2
3
4
5
6
7
8

 <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.js"> </ script> 
 <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"> </ script> 
 <!-- Optional --> <! - Opcional -> 
 <script type="text/javascript" src="path/to/jquery.easing.js"></script> <script type="text/javascript" src="path/to/jquery.easing.js"> </ script> 
 
 <script type="text/javascript"> <script type="text/javascript"> 
     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); $ (function () ($ ( ". lavaLamp"). lavaLamp ((fx: "backout", velocidad: 700 })}); 
 </script> </ script>

y listo tenemos nuestro menu en css.

Para descargar:
Librerias JQuery
Plugin Facil
LavaLamp Plugin

Ver el Demo Aquí

]]> http://www.zoneartcss.com/webdesign/css/menu-con-javascript-y-jquery-efecto-sombra/feed/ 2 Menu Dock – Solo Con CSS http://www.zoneartcss.com/webdesign/css/menu-dock-solo-con-css/ http://www.zoneartcss.com/webdesign/css/menu-dock-solo-con-css/#comments Sun, 19 Jul 2009 05:14:03 +0000 miguelortega http://www.zoneartcss.com/?p=326

Menu Dock Mac OS Solo con CSS

CSS Animations no hace posible programar con CSS un menu dock al estilo MacOS. Aun que solo es posible con el navegador Safari (desde 3+) y el Google Crhome.

Codigo CSS del Menu

1
2
3
4
5
6
7
8

*{margin:0;padding:0;border:0;outline:0;}a{ text-decoration:none;}
.all{margin:20px auto;width:900px;text-align:center;font-family:"Century Gothic";position:relative;}
.dock{ display:block; margin-top:50px;}
.dock li {display:inline-block;}
.dock img {width:86px; opacity: 0.7; -webkit-transition: all 1s ease-in; }
.dock span {position:absolute;top:40px;left:0;opacity:0;-webkit-transition:all 1s ease-out;width:100px;}
.dock li a:hover img, .dock li a:hover span{width:114px;opacity:1; margin-top:20px; vertical-align: bottom;}
.dock li a:hover span{left:45%;}

Todo está en la propiedad -webkit-transition. y all que durará 1 segundo con el método ease-in. Y al pasar el mouse el elemento cambiará la opacidad, que -webkit-transition aplico en la propiedad anterior y que tiene en el :hover.

Codigo HTML del Menu

1
2
3
4
5
6
7
8
9
10

<div class="all">
	<h1>Menu Dock MacOS solo con CSS Animations</h1>
    <ul class="dock">
        <li><a href="#"><img src="z.jpg" alt="Imagen" /><span>Z - Letra zeta</span></a></li>
        <li><a href="#"><img src="a.jpg" alt="Imagen" /><span>A - Letra a</span></a></li>
        <li><a href="#"><img src="c.jpg" alt="Imagen" /><span>C - Letra ce</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>            
    </ul>
</div>

Es una pena que solo para el Safari y Chrome funcionen, igual el CSS 2.1 es inválido.

Ver demo en linea

]]> http://www.zoneartcss.com/webdesign/css/menu-dock-solo-con-css/feed/ 3 Menús desplegables solo con CSS http://www.zoneartcss.com/webdesign/css/menus-desplegables-solo-con-css/ http://www.zoneartcss.com/webdesign/css/menus-desplegables-solo-con-css/#comments Thu, 09 Jul 2009 21:53:44 +0000 miguelortega http://www.zoneartcss.com/?p=188

meu solo con css

Hola ahora intentaremos, crear un menu solo con css… para luego agregarle un submenu desplegable… igual solo con css, primero lo primero…

1. Nuestro codigo para el menu, algo sencillo, 6 link, dentro de una lista y su enlace.

1
2
3
4
5
6
7
8
9
10

<div class="menu">
    <ul>
        <li><a href="#">Menu uno</a></li>
        <li><a href="#">Menu dos</a></li>
        <li><a href="#">Menu tres</a></li>
        <li><a href="#">Menu cuatro</a></li>
        <li><a href="#">Menu cinco</a></li>
        <li><a href="#">Menu seis</a></li>
    </ul>
</div>

2. Ahora le daremos estilo a lo anterior…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*Nuestras propiedades generales*/
*{margin:0;padding:0;outline:0;text-decoration:none;border:0;}
body{width:900px;margin:50px auto;}
/*Relevante*/
ul{
	list-style:none;/*Importante aqui le quitamos todas las viñetas a nuestro sitio*/
}
.menu{
	width:850px; 
	margin:auto;
}
.menu ul{
	width:620px;
	height:50px;
	margin:auto;
	padding:0 25px;
	background:url(bg_mn.gif) no-repeat;
}
.menu ul li{
	display:inline; /*Importante para que todas nuestras listas, esten en una misma linea, igual podemos usar el "float:left;" pero tendriamos que darle un "width" para evitar "advertencias" CSS,*/
	position:relative; /*Importante para el submenu pero por ahora no*/
}
.menu ul li a{
	float:left; /*Aqui prodriamos usar el "display:inline;" pero no respetaba sus medidas, asi que podriamos cambiarlo a "display:inline-block;" y se veria correcto, pero ie 6 y 7, aun no lo llevan asi que para evitar problemas, seguimos con el viejo "float:left"*/
	margin:0 5px;
	padding:0 5px;
	text-align:center;
	width:80px;
	height:50px;
	font:bold 10px/4.5em Verdana;/*Siempre me han pedido un manual para abreviar el CSS, trankilos ya viene... aqui, le di el font:weight, size, line-heigth, y font-family"*/
	color:#FFF;
	background:url(bg_mn_a.gif);
}
.menu ul li a:hover{
	background:url(bg_mn_a.gif) 0 50px; /*Usuamos una sola imagen y al pasar el cursor se baja el fondo 50px para hacer el efecto sin JS*/
	color:#35608B;
}

Y listo tenemos neustro menu solo con CSS, valido, ligero y sobretodo sin JS;
de hecho confiezo que no tengo ni puñ…era idea de como hacerlo con JS jeje pero bueno… para eso tenemos al amigo CSS…

Ver demo en linea

Bien, ahora simplemente le agregamos estas lineas para tener nuestro “submenu“…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="menu">
    <ul>
        <li><a href="#">Menu uno</a></li>
        <li><a href="#">Menu dos</a></li>
        <li>
        	<a href="#">Menu tres</a>
            <ul>
                <li><a href="#">SubMenu uno</a></li>
                <li><a href="#">SubMenu dos</a></li>
                <li><a href="#">SubMenu tres</a></li>
                <li><a href="#">SubMenu cuatro</a></li>
            </ul>
        </li>
        <li><a href="#">Menu cuatro</a></li>
        <li><a href="#">Menu cinco</a></li>
        <li><a href="#">Menu seis</a></li>
    </ul>
</div>

Nota: Lo malo que como haremos uso del li:hover no funcionara en ie6, mas adelante les doy una alternativa… para que funcione en todos los navegadores… pero con el codigo html invalido… o igual podemos hacer uso de este fix para los hover en ie6.

y ahora los estilos para el submenu…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

*{margin:0;padding:0;outline:0;text-decoration:none;border:0;}
body{
	width:900px;
	margin:50px auto;
}
ul{
	list-style:none;
}
.menu{
	width:850px;
	margin:auto;
}
.menu ul{
	width:620px;
	height:50px;
	margin:auto;
	padding:0 25px;
	background:url(bg_mn.gif) no-repeat;
}
.menu ul li{
	position:relative;
	width:auto;
	float:left;/*Esta vez le dimos un float left... para que no de problemas la posision relativa*/
}
.menu ul li a{
	float:left;
	margin:0 5px;
	padding:0 5px;
	text-align:center;
	width:80px;
	height:50px;
	font:bold 10px/4.5em Verdana;
	color:#FFF;
	background:url(bg_mn_a.gif);
}
.menu ul li a:hover{
	background:url(bg_mn_a.gif) 0 50px;
	color:#35608B;
}
/*MENU DESPLEGABLE*/
.menu ul li:hover ul{ display:block;} /*Indicamos que en hover del menu muestre el submenu*/
.menu ul ul{
	display:none; /*indicamos que al cargar la web no muestre el submenu*/
	width:200px;/*Le cambiamos el ancho sino hereda del ul anterior*/
	position:absolute;
	top:50px;
	height:auto;
	background:#5696C1;
	padding:5px 0 10px;
	left:5px;
}
.menu ul ul li, .menu ul ul li a{
	float:none;
	display:block;
	width:auto;	
}
.menu ul ul li a{
	background:none;
	border-bottom:1px solid #A3CADB;
	height:25px;
	text-align:left;
	line-height:2em;
	width:180px;
	color:#A3CADB;
}
.menu ul ul li a:hover{
	background:none;
	color:#FFF;
}

Ver demo en linea

]]> http://www.zoneartcss.com/webdesign/css/menus-desplegables-solo-con-css/feed/ 5 Fix CSS “#Loquesea:hover” para IE 6 http://www.zoneartcss.com/webdesign/css/fix-css-loqueseahover-para-ie-6/ http://www.zoneartcss.com/webdesign/css/fix-css-loqueseahover-para-ie-6/#comments Mon, 29 Jun 2009 16:00:05 +0000 miguelortega http://www.zoneartcss.com/?p=60

#loquesea:hover fix para internet explorer 6 y otros

Bueno a la hora de revisar nuestros proyectos en diferentes navegadores y todos nos topamos con la inminente llegada del “FCK IE” y mas aun el IE6, siempre el enojo que por alguna razon que enverdad me la suda, no funcionan algunas propiedades CSS… y en este caso el ” *:hover ”

Si aveces… muchos implementadores con experiencia, ni saben que en el IE6 esta y otras propiedades CSS no andan, ya que maquetan a XHTML/CSS sin importarles si funciona o no en algun explorador, cumplen en tener sus codigos estandarizados (validos por la W3C); pero nosotros no somos asi (chiste) y nos gusta ser lo mas optimo para con nuestros clientes y/o visitantes de estos… asi que aqui les pongo 2 opciones o bien soluciones a este y otros problemas con el FKC IE…

Primera solución:
Whatever:hover
Link de la web del autor

Esta enfocada a solo resolver el “loquesea:hover” en IE6… es ligera, discreta y nos
vale para tener el famoso “li:hover” en nuestros menus y submenus… o igual nuestas “img:hover” en algunas ocaciones.

Descargar:
Esta ultima version nos arregla tambien el
:hover
:active
:focus

Descargar version ligera/paquetada

Descargar el codigo de fuente/sin empaquetar

Y como lo aplicamos?
Tan facil y sencillo como agregar esto en el body de nuestra hoja de estilos

1

body {behavior: url("csshover3.htc");}

Segunda Opcion:
En lo personal me gusta esta opcion ya que tiene mas arreglos… y aveces hace que nuestros proyectos, se vean casi igual en todos los IE…
:hover
:first-child
:background-image (transparencia PNG; pero no con imagenes en mosaico o bien que se repita)
:max-height – :min-height
:max-width – :min-width
position:fixed;
etc, etc… enfin una buena libreria js que nos ahorrara mucho tiempo y evitariamos miles de “Hacks” que solo nos dan un codigo CSS sucio, feo, e invalido… y diria que casi debe ser un complemento mas e imprescindible en nuestros proyectos.

Descargar:
La version actual es 2.0 beta 3
y podemos ver las otras versiones aqui del ie7 js en google

http://ie7-js.googlecode.com/svn/version/

Y como lo aplicamos?
Igual es sencillo si queremos una solucion rapida y externa podemos usar este codigo para actualizar cualquier version del IE anterior al IE7 con esto

1
2
3

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

tambien podemos usar esta libreria para actualizar cualquier version del IE anterior al IE8

1
2
3

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

si queremos podemos descargarnos la libreria e integrarla en nuestros proyectos y solo cambiamos la url del destino del archivo js ejemplo:

1
2
3

<!--[if lt IE 8]>
<script src="miproyecto/js/IE8.js" type="text/javascript"></script>
<![endif]-->

Ver demo enlinea

]]> http://www.zoneartcss.com/webdesign/css/fix-css-loqueseahover-para-ie-6/feed/ 0