DevBlab » Menus http://devblab.net Wed, 08 Sep 2010 00:31:09 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Como Hacer un Menu Horizontal con Efecto Sliding http://devblab.net/como-hacer-un-menu-horizontal-con-efecto-sliding/ http://devblab.net/como-hacer-un-menu-horizontal-con-efecto-sliding/#comments Sat, 20 Jun 2009 02:38:08 +0000 cuisi http://devblab.net/?p=467 More >]]>
Menu Horizontal con Efecto Sliding

Menu Horizontal con Efecto Sliding

En esta ocación les traigo un pequeño menu con un efecto sliding, que puede llegar hacer muy vistoso, si lo usamos bien.

Este pequeño menu esta escrito con CSS y HTML, unicamente, nada de Javascript o alguna otra tecnologia.

Bueno pues sin mas ahora vamos a ver el codigo y dar una pequeña descripcion, que no sera muy grande ya que el codigo es muy sencillo de entender.


Codigo CSS:

PLAIN TEXT
CSS:
  1. #menu {
  2.   margin:0;
  3.   padding:0;
  4.   width: 50em;
  5.   height: 4.5em;
  6.   overflow:hidden;
  7.   }
  8. #menu li {
  9.   display:inline;
  10.   list-style-type:none;
  11.   }
  12. #menu li a {
  13.   display:block;
  14.   float:center;
  15.   text-decoration:none;
  16.   margin:0;
  17.   }
  18. #menu li a img {
  19.   opacity:0.7;
  20.   margin:0.5em;
  21.   border:0;
  22.   float:left;
  23.   }
  24. #menu li a span {
  25.   display:none;
  26.   }
  27. #menu li a:hover {
  28.   background:transparent;
  29.   }
  30. #menu li a:hover span {
  31.   width:10em;
  32.   color:#aaa;
  33.   display:block;
  34.   cursor:pointer;
  35.   float:left;
  36.   }
  37. #menu .h2 {
  38.   margin:0 5px;
  39.   padding:0;
  40.   color:#fc0;
  41.   font-variant:small-caps;
  42.   font-size:1.25em;
  43.   border:0;
  44.   }
  45. #Layer1 {
  46.     position:absolute;
  47.     left:339px;
  48.     top:39px;
  49.     width:306px;
  50.     height:259px;
  51.     z-index:1;
  52. }
  53. h1 {
  54.     font: normal 310%/110% Garamond, Georgia, serif;
  55.     letter-spacing: -2px;
  56.     text-transform: uppercase;
  57.     text-align: center;
  58.     padding: 20px 0 0;
  59.     margin: 0;
  60. }
  61. .credits {
  62.     font: 130%/110% Garamond, Georgia, serif;
  63.     text-align: center;
  64.     color: #999;
  65.     width: 300px;
  66.     margin: .5em auto 1.5em;
  67.     padding-top: 8px;
  68.     border-top: 1px solid #ededed;
  69.     letter-spacing: 2px;
  70. }
  71. .credits em {
  72.     color: #999;
  73. }
  74. .credits a {
  75.     color: #333;
  76.     text-decoration: none;
  77.     text-transform: uppercase;
  78. }
  79. .credits a:hover {
  80.     text-decoration: underline;
  81. }
  82.     #Layer2 {
  83.     position:absolute;
  84.     left:83px;
  85.     top:309px;
  86.     width:861px;
  87.     height:172px;
  88.     z-index:2;
  89. }
  90. #Layer3 {
  91.     position:absolute;
  92.     left:315px;
  93.     top:67px;
  94.     width:657px;
  95.     height:86px;
  96.     z-index:3;
  97.     visibility: inherit;
  98. }

Codigo HTML:

PLAIN TEXT
HTML:
  1. <div id="Layer3">
  2.   <ul id="menu">
  3.  
  4.     <li>
  5.   <a href="#"><img src="gmail.png" alt="Gmail" width="62" height="80" title="Mail" />
  6.      <span><br />
  7.       <b class="h2">Gmail</b><br />
  8. devblab[arroba]gmail.com    </span>
  9.     </a>
  10.    </li>
  11.     <li>
  12.   <a href="http://feeds2.feedburner.com/devblab/feed"><img src="rss.png" alt="Feed" width="62" height="80" title="Feed" />
  13.      <span><br />
  14.       <b class="h2">RSS</b><br />
  15. Suscribete a mi Feed </span>
  16.     </a>
  17.    </li>
  18.     <li>
  19.   <a href="http://twitter.com/cuisi"><img src="twitter.png" alt="Twittwe" width="62" height="80" title="Twitter" />
  20.      <span><br />
  21.       <b class="h2"><a href="http://devblab.net/tag/twitter/"title="Twitter">Twitter</a></b><br />
  22. Sigueme en Twitter    </span>
  23.     </a>
  24.    </li>
  25.  
  26.   <li>
  27.     <a href="#"><img src="delicious.png" alt="Delicious" width="62" height="80" title="Delicious" />
  28.      <span><br />
  29.       <b class="h2">Delicious</b><br />
  30. Agregar a Delicious     </span>
  31.     </a>
  32.    </li>
  33.     <li>
  34.     <a href="#"><img src="digg.png" alt="Digg" width="62" height="80" title="Digg" />
  35.      <span><br />
  36.       <b class="h2">Digg</b><br />
  37. Agragar a Digg     </span>
  38.     </a>
  39.    </li>
  40.        <li>
  41.     <a href="#"><span><br />
  42.       <b class="h2">Digg</b><br />
  43. Agragar a Digg     </span>
  44.     </a>
  45.    </li>
  46.   </ul>
  47. </div>

Bueno pues ese es el codigo, basicamente se trata de jugar un poco con codigo css. Algo que tenemos que tener en cuenta en caso de que el icono sea mas grandes que los de la demo, es, que tendremos que editar la parte de la css donde dice height: 4.5em, ya sea para hacerlo mas grande o mas pequeño


Demo




Descargar Archivos del Tutorial

]]> http://devblab.net/como-hacer-un-menu-horizontal-con-efecto-sliding/feed/ 0 Navegación Alfabetica gracias a ListNav http://devblab.net/navegacion-alfabetica-gracias-a-listnav/ http://devblab.net/navegacion-alfabetica-gracias-a-listnav/#comments Sun, 17 May 2009 22:38:35 +0000 cuisi http://devblab.net/2009/05/17/navegacion-alfabetica-gracias-a-listnav/ More >]]> Navegacion Alfabetica jQuery

ListNav es un plugin jQuery para crear listas de navegación alfabética.

Una vez configurado, y perzonalisado (a través de CSS) la barra de navegación aparece encima de la lista, que muestra las letras de la A a la Z. Cuando se hace clic en una letra, los elementos que comienzan con esa letra se mostraran.

ListNav muestra el número de artículos  o elementos que contenga alguna letra sobre la que nos posicionemos.

El plugin está optimizado para listas largas y puede trabajar con dos listas ul y ol.

También soporta múltiples navegaciones en la misma página y trabaja con todos los principales navegadores.

Demos

]]> http://devblab.net/navegacion-alfabetica-gracias-a-listnav/feed/ 0 20 Excelentes Técnicas de Navegación y Ejemplos en JavaScript http://devblab.net/20-excelentes-tecnicas-de-navegacion-y-ejemplos-en-javascript/ http://devblab.net/20-excelentes-tecnicas-de-navegacion-y-ejemplos-en-javascript/#comments Fri, 01 May 2009 21:32:12 +0000 cuisi http://devblab.net/2009/05/01/20-excelentes-tecnicas-de-navegacion-y-ejemplos-en-javascript/ More >]]> Javascript permite que agreguemos la interactividad y retroalimentacion a nuestros proyectos, haciendo que la experiencia del usuario sea mejor y más intuitiva.

En este post les mostrare algunos ejemplos de navegación que he encontrado, espero les sean de utilidad.

  1. MenuMatic

  2. Animated Menu using jQuery

  3. Garagedoor Effect using jQuery

  4. JGlide Menu

  5. Vertical Sliding jQuery Menu

Fuente:20 Excelentes Técnicas de Navegación y Ejemplos en JavaScript

]]> http://devblab.net/20-excelentes-tecnicas-de-navegacion-y-ejemplos-en-javascript/feed/ 1 Como Crear un Menu CSS con Efecto OnMouseOver http://devblab.net/como-crear-un-menu-css-con-efecto-onmouseover/ http://devblab.net/como-crear-un-menu-css-con-efecto-onmouseover/#comments Sat, 18 Apr 2009 23:33:57 +0000 cuisi http://devblab.net/2009/04/18/como-crear-un-menu-css-con-efecto-onmouseover/ More >]]> Menu Css

En esta ocasión les traigo un pequeño codigo hecho en CSS con el cual podremos crear un menu con efecto OnMouseOver, el cual es muy similar a muchos scripts escritos en javascript, que nos brindan el mismo efecto.

Este efecto basicamente es el siguiente, cuando esta en reposo la seccion del menú tiene un color y cuando esta activo tiene uno diferente, al igual que cuando damos click, toma un tercer color.

Bueno sin mas explicaciones les dejo el codigo.
CSS:

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. #menu div.barraMenu,
  3. #menu div.barraMenu a.botonMenu {
  4. font-family: sans-serif, Verdana, Arial;
  5. font-size: 8pt;
  6. color: white;
  7. }
  8.  
  9. #menu div.barraMenu {
  10. text-align: left;
  11. }
  12. #menu div.barraMenu a.botonMenu {
  13. background-color:#0099FF;
  14. color: white;
  15. cursor: pointer;
  16. padding: 4px 6px 2px 5px;
  17. text-decoration: none;
  18. }
  19. #menu div.barraMenu a.botonMenu:hover {
  20. background-color:#0066FF;
  21. }
  22. #menu div.barraMenu a.botonMenu:active {
  23. background-color:#0000CC;
  24. color: white;
  25. }
  26. </style>

HTML:

PLAIN TEXT
HTML:
  1. <div id="menu">
  2.     <div class="barraMenu">
  3.       <div align="center">
  4.             <a class="botonMenu" href="">Inicio</a>
  5.             <a class="botonMenu" href="">Servicios</a>
  6.             <a class="botonMenu" href="">Portafolio</a>
  7.             <a class="botonMenu" href="">Contacto</a>
  8.       </div>
  9.     </div>
  10. </div>

]]> http://devblab.net/como-crear-un-menu-css-con-efecto-onmouseover/feed/ 2 10 Brillantes Tecnicas de Menus Multinivel http://devblab.net/10-brillantes-tecnicas-de-menus-multinivel/ http://devblab.net/10-brillantes-tecnicas-de-menus-multinivel/#comments Tue, 17 Feb 2009 07:50:36 +0000 cuisi http://devblab.net/2009/02/17/10-brillantes-tecnicas-de-menus-multinivel/ More >]]> Uno de los factores que hacen mas relevante nuestro diseño web, puede ser el tipo de menu que utilizamos. El estilo del menu puede dar a nuestro diseño una mayor seriedad o una verdadera risa :lol: , aca les dejo   10 tecnicas para crear menus multinivel de una calidad bastante bastante buena.

1.-MenuMatic

Horizontal Menu Demo | Vertical Menu Demo | Download source code

2.- Create Vimeo-like top navigation

Demo | Download source code

 

3.-Fancy Sliding Menu for Mootools

View Demo | Download source code

4.-Collapsable menu

View Demo | Download source code

5.-jQuery File Tree

View Demo | Download source code

Fuente: devsnippets.com

]]> http://devblab.net/10-brillantes-tecnicas-de-menus-multinivel/feed/ 0 StyledMenus.com – Menús para tus Proyectos Web http://devblab.net/styledmenuscom-menus-para-tus-proyectos-web/ http://devblab.net/styledmenuscom-menus-para-tus-proyectos-web/#comments Sat, 03 Jan 2009 22:40:48 +0000 cuisi http://devblab.net/2009/01/03/styledmenuscom-menus-para-tus-proyectos-web/ More >]]> Styledmenus.com

En ocaciones cuando nos sale algun trabajo de diseño/desarrollo web, comenzamos armar la estructura, pero en ocaciones no sabemos o simplemente no tenemos ganas de armar un menú y comenzamos a buscar por el gran mundo que es la web. Pues ahora styledmenus.com nos hace el trabajo mas sencillo, con una buena cantidad de menus de gran calidad y lo mejor de todo (como siempre digo) gratis.

Link: styledmenus.com

]]> http://devblab.net/styledmenuscom-menus-para-tus-proyectos-web/feed/ 0 Sliding Side Bar – Hermoso menu lateral http://devblab.net/sliding-side-bar-hermoso-menu-lateral/ http://devblab.net/sliding-side-bar-hermoso-menu-lateral/#comments Mon, 21 Apr 2008 03:11:49 +0000 cuisi http://devblab.net/?p=36 More >]]> tum1.jpg

 

Sliding side bar es un hermoso menu lateral creado con mootools, este menu funciona y tiene un aspecto muy hermoso que lo podemos integrar de manera sencilla en algun costado de nuestro sitio. bueno sin mas que decir aqui les dejo el codigo CSS y Html para su utilizacion, y tambien los archivos necesarios como lo son mootools.js y side-bar.js, tambien les dejo una ejemplo en fucionamiento.

Codigo CSS:

PLAIN TEXT
CSS:
  1. <style media="all" type="text/css"> body{       position:relative;         paddign:0px;       font-size:100%;    }
  2.  
  3. h2{         color:#FFFFFF;   font-size:90%;     font-family:arial;       margin:10px 10px 10px 10px;       font-weight:bold;  }
  4.  
  5. h2 span{       font-size:105%;       font-weight:normal;    }
  6.  
  7. ul{         margin:0px 0px 0px 0px;         padding:0px 0px 0px 0px;    }
  8.  
  9. li{         margin:0px 10px 3px 10px;     padding:2px;   list-style-type:none;       display:block;         background-color:#DA1074;     width:177px;  }
  10.  
  11. li a{     width:100%;   }
  12.  
  13. li a:link,  li a:visited{       color:#FFFFFF;         font-family:verdana;       font-size:70%;         text-decoration:none;     display:block;       margin:0px 0px 0px 0px;       padding:0px;     width:100%;   }
  14.  
  15. li a:hover{         color:#FFFFFF;   text-decoration:underline;   }
  16.  
  17. #sideBar{     position: absolute;     width: auto;   height: auto;       top: 13px;         right:-8px;         background-image:url(images/background.gif);       background-position:top left;   background-repeat:repeat-y;  }
  18.  
  19. #sideBarTab{       float:left;       height:137px;   width:28px;  }
  20.  
  21. #sideBarTab img{       border:0px solid #FFFFFF;  }
  22.  
  23. #sideBarContents{     overflow:hidden !important;   }
  24.  
  25. #sideBarContentsInner{   width:200px;     }
  26.  
  27. </style>

Codigo js:
(Las siguientes lineas las deben ir antes de la etiqueta /head)

PLAIN TEXT
JavaScript:
  1. <script src="js/mootools.js" type="text/javascript"></script>
  2. <script src="js/side-bar.js" type="text/javascript"></script>

Codigo Html:

PLAIN TEXT
HTML:
  1. <p id="sideBar">    <a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a></p>
  2. <p id="sideBarContents" style="width: 0px">&nbsp;</p>
  3. <p id="sideBarContentsInner">&nbsp;</p>
  4.  
  5. <h2>Me<span>nu</span></h2>
  7.     <li><a href="http://www.devblab.net">Devblab.net</a></li>
  8.     <li><a href="#">Link Two</a></li>
  9.     <li><a href="#">Link Three</a></li>
  10.     <li><a href="#">Link Four</a></li>
  11.     <li><a href="#">Link Five</a></li>
  12. </ul>

Ejemplo en Funcionamiento

archivos-sliding-side-bar.rar

]]> http://devblab.net/sliding-side-bar-hermoso-menu-lateral/feed/ 2