Hola encontre este menu y me gusto bastante quisiera saber si alguien me ayuda para que me quede bien y poder usarlo en mi web yo le modifique lios link pero nose como tengo que hacer para que quede como corresponde me ayudan o dinganme que si funciona para PWG se los agradeceria.
este es el codigo:
Código: <!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=UTF-8">
<title>FocusMail Email Template - Preview</title>
<script src="a_data/jquery.js"></script>
<script type="text/javascript">
function set_frame_height(){
var head_h = $('#header').outerHeight();
$('#frame').height($(window).height() - head_h);
}
function change_template(src){
var start_x = 50;
var end_x = 180;
$('#loading').show().stop(true, true).animate({'left' : end_x}, function(){
$('#frame').attr('src', src);
});
$('#frame').load(function(){
$('#loading').animate({ 'left' : start_x });
});
}
$(document).ready(function(){
set_frame_height();
$(window).resize(function(){ set_frame_height(); });
$('.colors ol li a').click(function(){
$(this).parent().parent().find('a').removeClass('active');
$(this).addClass('active');
change_template($(this).attr('href'));
return false;
});
$('a.color').click(function(){
var last_ol = $('.colors > ul > li.active ol');
$('.colors > ul > li').removeClass('active');
$(this).parent().addClass('active');
$(this).parent().find('ol').slideDown();
last_ol.slideUp();
$(this).parent().find('ol a').removeClass('active');
$(this).parent().find('ol a').eq(0).addClass('active');
change_template($(this).attr('href'));
return false;
});
$('a.color:eq(0)').trigger('click');
});
</script>
<style type="text/css" media="screen">
* { padding:0; margin:0; outline:0; }
html { overflow:hidden; }
body { overflow:hidden; font-family: "Trebuchet MS", sans-serif; background:#fff; font-size:12px; line-height:14px; color:#754a27; }
.cl { font-size:0; line-height:0; height:0; display:block; clear:both; }
a { cursor:pointer;}
#customize { width:168px; background:#fef9ec; border:solid 1px #d7bb9d; position:absolute; top:10px; left:10px; z-index:10; padding:6px 6px 10px 6px; text-align: center; }
#customize { -moz-box-shadow:0 0 10px #999; -moz-border-radius:5px;}
#customize { -webkit-box-shadow:0 0 10px #999; -webkit-border-radius:5px; box-shadow:0 0 10px #999}
#frame { position:relative; z-index:1;}
h2 { font-size:18px; line-height:18px; }
h3 { font-weight: normal; font-size:13px; border-top:solid 1px #d7bb9d; border-bottom:solid 1px #d7bb9d; padding:8px 0; margin-top:5px; text-transform: capitalize; margin-bottom:1px;}
.colors { border-bottom:solid 1px #d7bb9d; padding-bottom:1px; }
.colors ul{ list-style-type: none; text-align: left; border-top:solid 1px #e9d7be; }
.colors ul li { }
.colors ul li ol{ padding:5px 0 5px 30px; display:none; border-bottom:solid 1px #e9d7be;}
.colors ul li ol li{ padding:0 0 3px 0; text-transform: capitalize;}
.colors ul li ol li a{ color:#754a27; text-decoration: none; display:block;}
.colors ul li ol li a:hover{ color:#d3b596;}
.colors ul li ol li a.active{ font-weight: bold; color:#333;}
.colors a.color { text-decoration: none; color:#754a27; display:block; height:21px; border-bottom:solid 1px #e9d7be; padding:4px 0 0 6px; }
.colors a.color:hover { color:#d3b596; }
.colors a.color strong{ float:left; white-space:nowrap; line-height:18px; font-size:13px; padding-left:7px; text-transform: capitalize;}
.colors a.color span{ float:left; width:13px; height:13px; border:solid 1px #e1d4c2; font-size:0; line-height:0; padding:1px; }
.colors a.color span{ -moz-box-shadow:0 0 5px #c5b099; -webkit-box-shadow:0 0 5px #c5b099; box-shadow:0 0 5px #c5b099; }
.colors a.color span em{ display:block; width:13px; height:13px; }
.colors a.color span em b{ display:block; width:13px; height:13px; }
.colors a.color span em b{ background:-moz-linear-gradient(#fff, #000); opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=50);}
.colors a.color span em b{ background:-webkit-gradient(linear, left bottom, left top, color-stop(1, #fff), color-stop(0, #000)); }
.colors a.color span,
.colors a.color span em,
.colors a.color span em b{ -moz-border-radius:3px; -webkit-border-radius:3px }
.colors a.color:hover span { border-color:#b8926f;}
.colors .active a.color { color:#333; background:-moz-linear-gradient(#fbf4e6, #f1e4cb); }
.colors a.color:hover,
.colors .active a.color { background:-moz-linear-gradient(#fbf4e6, #f1e4cb); }
.colors a.color:hover,
.colors .active a.color { background:#f8f0df; background:-webkit-gradient(linear, left bottom, left top, color-stop(1, #fbf4e6), color-stop(0, #f1e4cb)); }
.colors .active a.color span{ -moz-box-shadow:0 0 5px #492d13; -webkit-box-shadow:0 0 5px #492d13; box-shadow:0 0 5px #492d13; }
.colors .active a.color span{ border-color:#754a27;}
.colors .active a.color em b{ opacity: 0.1; -moz-opacity: 0.1; filter:alpha(opacity=10); }
#loading { position:absolute; top:21px; left:50px; z-index:3; display:none;}
#loading span{ width:90px; text-align: center; padding:8px 0 8px 22px; background:#fef9ec; border:solid 1px #edddc8; display:block; position:relative;}
#loading span{ -moz-border-radius:5px;}
#loading span{ -webkit-border-radius:5px;}
.mc-logos { font-size:0; line-height:0; padding:9px 0 0 0;}
.logo { font-size:0; line-height:0;}
</style>
</head>
<body>
<div style="display: block; left: 50px;" id="loading"><span>Loading...</span></div>
<div id="customize">
<div class="logo">
<img src="a_data/logo.gif" alt="">
</div>
<h3>MENU DESPLEGABLE</h3>
<div class="colors">
<div class="cl"> </div>
<ul>
<li class="">
<a href="#" class="color" style="color: rgb(0, 174, 239);"><span><em style="background: #00aeef "><b></b></em></span><strong>TITULO</strong></a>
<ol style="display: none;">
<li><a class="active" href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(22, 189, 4);"><span><em style="background: #16bd04 "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li class="active">
<a href="#" class="color" style="color: rgb(255, 152, 0);"><span><em style="background: #ff9800 "><b></b></em></span><strong>TITULO</strong></a>
<ol style="display: none;">
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(222, 36, 119);"><span><em style="background: #de2477 "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(242, 34, 12);"><span><em style="background: #f2220c "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(0, 0, 0);"><span><em style="background: #000000 "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(18, 87, 140);"><span><em style="background: #12578c "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombrer</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(108, 63, 48);"><span><em style="background: #6c3f30 "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(60, 78, 26);"><span><em style="background: #3c4e1a "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
<li>
<a href="#" class="color" style="color: rgb(171, 24, 23);"><span><em style="background: #ab1817 "><b></b></em></span><strong>TITULO</strong></a>
<ol>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
<li><a href="#">Nombre</a></li>
</ol>
</li>
</ul>
<div class="cl"> </div>
</div>
<div class="mc-logos"><img src="a_data/mc_cm_logos.gif" alt="0" height="42" width="168"></div>
</div>
<iframe style="height: 794px;" id="frame" src="a_data/layout1.htm" frameborder="0" scrolling="auto" width="100%"></iframe>
</body></html>