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