Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje01-07-2011, 18:17 (UTC)    
Título del mensaje: Me ayudan con este Codigo

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">&nbsp;</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">&nbsp;</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>
Mensaje01-07-2011, 18:21 (UTC)    
Título del mensaje:

Te falta lo mas importante, la galeria de códigos:

Remplaza este fragmento:
Código:
 <script src="a_data/jquery.js"></script>


Por este:
Código:
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>


Me dices si te funciona.
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mensaje01-07-2011, 18:26 (UTC)    
Título del mensaje: hii

disculpa mi torpesa pero tendria que pegar todo el codigo junto ?? o hay que cortarlo como una plantilla css
Mensaje01-07-2011, 18:27 (UTC)    
Título del mensaje: Re: hii

probador-ocio-anime escribió:
disculpa mi torpesa pero tendria que pegar todo el codigo junto ?? o hay que cortarlo como una plantilla css


Si en realidad te recomiendo a asistir a algún taller, ya que tienen que adaptarle todo el código.

Saludes y suerte,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mensaje01-07-2011, 18:29 (UTC)    
Título del mensaje: hii

gracias por la ayuda
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group