Foros del Web - Ver Mensaje Individual

bkolores · #1 (**permalink**) 08/11/2010, 15:49

estoy tratando de hacer este efecto:
http://www.mastercafe.com/?jquery/jQ...nes/1537/po/es

segui el tutorial hice todo bien pero no funciona HELPPPPP

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
 
<style>
ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(http://www.mastercafe.com/ejemplos/slideboxmenu/images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}
body { background-color:#000; }
</style>
 
 
</head>
 
<body>
 
    <div class="content">
 
            <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
 
            <ul id="sdt_menu" class="sdt_menu">
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">About me</span>
 
                            <span class="sdt_descr">Get to know me</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/1.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Portfolio</span>
 
                            <span class="sdt_descr">My work</span>
 
                        </span>
 
                    </a>
 
                    <div class="sdt_box">
 
                            <a href="#">Websites</a>
 
                            <a href="#">Illustrations</a>
 
                            <a href="#">Photography</a>
 
                    </div>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/2.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Inspiration</span>
 
                            <span class="sdt_descr">Where ideas get born</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/4.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Photos</span>
 
                            <span class="sdt_descr">I like to photograph</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/5.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Blog</span>
 
                            <span class="sdt_descr">I write about design</span>
 
                        </span>
 
                    </a>
 
                </li>
 
                <li>
 
                    <a href="#">
 
                        <img src="http://www.mastercafe.com/ejemplos/slideboxmenu/images/6.jpg" alt=""/>
 
                        <span class="sdt_active"></span>
 
                        <span class="sdt_wrap">
 
                            <span class="sdt_link">Projects</span>
 
                            <span class="sdt_descr">I like to code</span>
 
                        </span>
 
                    </a>
 
                    <div class="sdt_box">
 
                        <a href="#">Job Board Website</a>
 
                        <a href="#">Shopping Cart</a>
 
                        <a href="#">Interactive Maps</a>
 
                    </div>
 
                </li>
 
            </ul>
 
        </div>
</body>
</html>