Ene 25, 2009

Escrito por Joselite | 0 Comentarios

Javascript para manipular contenido

Navegando por la red he encontrado una curiosa recopilación de técnicas javascript para tratar todo tipo de contenidos: menús, imágenes, portafolios, …

En este mini tutorial se expone tanto el código fuente como las demos correspondientes de cada una de las opciones, así como el link a la página oficial del creador.

Podemos encontrar varios carruseles, un portafolio con jQuery, …

Enlace: 10 Smart Javascript

Leer Más
Ene 15, 2009

Escrito por Joselite | 0 Comentarios

Menú Descriptivo con CSS

Esta es una buena manera de reducir el peso de tu página Web, ya que éste menú no usa Javascript, se hace todo con CSS. Ver demo

  1. Creamos una lista con una pequeña descripción del contenido que contiene el vínculo del botón del menú.


    2. ?Ver código HTML
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

     <div class="baseofmenu">  
 <ul class="boxedmenu">  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci t leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Entertainment</small>Celeb Gossip</a></li>  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Technology</small>Softwares</a></li>  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Sports</small>Live Cricket</a></li>  
 </ul>  
 </div>


  2. Éste es el CSS que convierte nuestra lista en un menú / desplegable.
    3. ?Ver código CSS
    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
70
71
72
73
74

    <br \>
 body {  
     font-family:Georgia, "Times New Roman", Times, serif;  
 }  
 .baseofmenu{  
     height:104px;  
     background-color:#99CC33;  
     -moz-border-radius: 10px;  
     -webkit-border-radius: 10px;  
     width: 760px;  
 }  
 .boxedmenu {  
     list-style-type:none;  
     display:block;  
     margin: 0px;  
     padding: 0px 5px 0px 5px;  
     position: absolute;  
     width: 750px;  
 }  
 .boxedmenu li{  
     display:inline  
 }  
 
 /* Styling A link START */  
 .boxedmenu li a, .boxedmenu li a:link, .boxedmenu li a:visited{  
     display: inline;  
     text-decoration:none;  
     font-size: 25px;  
     background-color: #339966;  
     color: #a3e9c6;  
     margin: 10px 5px;  
     padding: 10px;  
     letter-spacing: 3px;  
     border: 1px solid #306F4F;  
     -moz-border-radius: 10px;  
     -webkit-border-radius: 10px;  
     float:left;  
     width: 29%;  
 }  
 .boxedmenu li a:hover, .boxedmenu li a:active{  
     background-color: #206442;  
     border-color: #a3e9c6;  
     color: #fff;  
 }  
 /* Styling A link END */  
 
 /* Styling SMALL text item START */  
 .boxedmenu small{  
     display:block;  
     font-size:16px;  
     background-color: #206442;  
     padding: 0px 10px;  
     margin: 0px -10px 5px -10px;  
     line-height: 25px;  
     color: #339966;  
     letter-spacing: 8px;  
 }  
 .boxedmenu li a:hover small, .boxedmenu li a:active small{  
     background-color: #339966;  
     color: #206442;  
 }  
 /* Styling SMALL text item END */  
 
 /* Styling Paragraph within each menu item START */  
 .boxedmenu li a p {  
     font-size: 11px;  
     padding: 5px;  
     margin: 0px;  
     display: none;  
 }  
 .boxedmenu li a:hover p, .boxedmenu li a:active p{  
     display: block;  
 }  
 /* Styling Paragraph within each menu item END */

Visto en: Witty Sparks

Leer Más