23/08/2012, 12:24
|
| | | Fecha de Ingreso: febrero-2011 Ubicación: Santiago, Chile
Mensajes: 5
Antigüedad: 13 años, 10 meses Puntos: 0 | |
| Cómo agregar submenu <li> a esta linda botonera CSS
Estimados amigos, por favor alguien puede decirme cómo puedo agregar submenu (<li>) a este bonito menu, la idea es que cuando se pase el mouse sobre una cuadro se despliegue un menu hacia abajo.
Gracias por cualquier ayuda.
PD. abajo pegué el código del HTML y CSS. CÓDIGO HTML
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creative CSS3 Animation Menus</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative CSS3 Animation Menus" />
<meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="style6.css" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions & Animations</span></h1>
<div class="content">
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized to your needs</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Creative Storytelling</h2>
<h3 class="ca-sub">Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">N</span>
<div class="ca-content">
<h2 class="ca-main">Infographical Education</h2>
<h3 class="ca-sub">Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Sophisticated Team</h2>
<h3 class="ca-sub">Professionals in action</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Unconditional Support</h2>
<h3 class="ca-sub">24/7 for you needs</h3>
</div>
</a>
</li>
</ul>
</div><!-- content -->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</body>
</html>
Código:
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding:0;
margin:20px auto;
width: 1020px;
}
.ca-menu li{
width: 200px;
height: 300px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-right: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 150px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.ca-content{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 50%;
}
.ca-main{
font-size: 30px;
opacity: 0.8;
text-align: center;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff;
font-size: 90px;
}
.ca-menu li:hover .ca-main{
color: #00ccff;
-webkit-animation: moveFromLeftRotate 300ms ease;
-moz-animation: moveFromLeftRotate 300ms ease;
-ms-animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #fff;
-webkit-animation: moveFromBottom 500ms ease;
-moz-animation: moveFromBottom 500ms ease;
-ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes moveFromLeftRotate{
from {
-webkit-transform: translateX(-100%) rotate(-90deg);
}
to {
-webkit-transform: translateX(0%) rotate(0deg);
}
}
@-moz-keyframes moveFromLeftRotate{
from {
-moz-transform: translateX(-100%) rotate(-90deg);
}
to {
-moz-transform: translateX(0%) rotate(0deg);
}
}
@-ms-keyframes moveFromLeftRotate{
from {
-ms-transform: translateX(-100%) rotate(-90deg);
}
to {
-ms-transform: translateX(0%) rotate(0deg);
}
}
@-webkit-keyframes moveFromBottom {
from {
-webkit-transform: translateY(100%);
}
to {
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
-moz-transform: translateY(100%);
}
to {
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
-ms-transform: translateY(100%);
}
to {
-ms-transform: translateY(0%);
}
}
|