Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 9 de 9

Tema: Menu desplegable un poco decente. No se como ponerlo estoy muy perdido

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    16 mar, 11
    Mensajes
    48
    Poder de Reputación
    17

    Menu desplegable un poco decente. No se como ponerlo estoy muy perdido

    como puedo poner este menu desplegable en mi pagina?

    http://dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

    nose como hacerlo.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <title>Maitti Racing Rally Taldea</title>
    <link rel="stylesheet" href=" estilo-general.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="transmenuC.txt" type="text/javascript"></script>
    <script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
    </head>
    <body onload="init();">
    <div id="global">
    <!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
    <div id="cabecera">
    <div id="logotipo"><a href=" index.html"><img src=" objetos/dibujo.gif" width="400" height="200"
    alt="Hemen klik egin hasierara itzultzeko"></a></div>

    </div>
    <div id="curva-superior"></div>
    <div id="navegacion">
    <ul><li><a title="Elkarteari buruzko informazioa" href=" index.html">Maitti Racing Elkartea</a></li><li><a title="Elkarteak antolatutako ekitaldiak" href=" ekitaldiak.html">Ekitaldiak</a></li><li><a id="desplegable3" href="#">Babesleak</a></li><li><a id="desplegable1" href="#">Multimedia</a></li><li><a id="desplegable2" href="#">Maitti Racing Rally Taldea</a></li><li><a href=" babes-ekital-e.html"><img alt="Español" src=" objetos/espana.gif" height="17" width="25" /></a></li> <!--<li><a href=" souvenirs/souvenirs.html">Souvenirs</a></li> -->
    </ul>
    </div>

    <!-- FIN DE CODIGO DE CABECERA -->
    <div id="contenido3">
    <!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
    <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
    <p></p>
    <h1>Galdakaoko I. Ibilgailu Klasikoen kontzentrazioko babesleak</h1>
    <p></p>
    <p><img alt="" src="objetos/alonso%20seguros.jpg" height="138" width="275" /></p>
    <p><img alt="" src="objetos/autosdiamante.jpg" height="133" width="273" /></p>
    <p><img alt="" src="objetos/dentista.jpg" height="189" width="248" /></p>
    <p><img alt="" src="objetos/bizkarra.jpg" height="178" width="261" /></p>
    <p><img alt="" src="objetos/cocacola.jpg" height="153" width="317" /></p>
    <p><img alt="" src="objetos/galdakao%20hoy.jpg" height="104" width="387" /></p>
    <p><img alt="" src="objetos/galdakao.jpg" height="365" width="460" /></p>
    <p><img alt="" src="objetos/garkalde.jpg" height="186" width="339" /></p>
    <p><img alt="" src="objetos/heineken.jpg" height="200" width="267" /></p>
    <p><img alt="" src="objetos/jamones%20claudio.jpg" height="285" width="351" /></p>
    <p><img alt="" src="objetos/logo%20residencia%20san%20andres%201.jpg" height="111" width="311" /></p>
    <p><img alt="" src="objetos/martella.jpg" height="175" width="224" /></p>
    <p><img alt="" src="objetos/txakille.jpg" height="176" width="174" /></p>
    <p><img alt="" src="objetos/Vusa.jpg" height="267" width="192" /></p>
    <p></p>
    <p></p>
    </div>
    <!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
    <div id="pie">

    <div id="piedos">Los contenidos incluidos en esta web pertenecen a sus autores, por tanto queda prohibida su reproducción en otros medios sin consentimiento específico del </p><img src="objetos/ikurrina.gif" height="17" width="25" /> administrador. On-Line desde: 18/03/2011 Resolución recomendada: 1024x768 <img src="objetos/ikurrina.gif" height="17" width="25" /></div>

    </div>
    <!-- FIN CODIGO PIE DE PAGINA -->
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    HOJA DE ESTILOS

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color: black ; font-weight: bold ; text-decoration: none ; text-align: center;padding-bottom:5px}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    h3 {font-size: 1.2em; color: white ; font-weight: bold ; text-decoration: none ; text-align: left;padding-bottom:5px}
    body {text-align: center }
    #global {width:1000px ; margin:4px auto }
    #curva-superior { background-image: url(objetos/curva-superiore.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
    #cabecera { background-color: white ;height: 200px}
    #logotipo { float:left; margin-left:300px}
    #navegacion {background-color:#CD0000; height:20px ; border-left: black 1px solid ; border-right: black 1px solid; border-bottom: black 1px solid}
    #navegacion li {float: left ; list-style:none ; margin: 0px 16px 0px 16px }
    #navegacion ul { margin-left: 40px }
    #contenido {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: left }
    #contenido2 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
    #contenido2 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: right }
    #contenido3 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
    #contenido3 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: center }
    #contenido4 {background-color: #DCDCDC ; border-left: black 1px solid ; border-right: black 1px solid ; padding-top:10px ; padding-bottom:10px ;font-family:Comic Sans MS}
    #contenido4 p {padding: 5px 10px 5px 10px ; text-indent: 15px;text-align: justify }


    #menu { width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ;padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
    #pie { border-left: black 1px solid ;
    border-right: black 1px solid ;
    border-top: black 1px solid ;
    height: 35px ;}
    #pie li {list-style: none ; font-size: 12px }
    #piedos {font-size:12px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px; overflow: hidden }
    a {color: black ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
    <!--classes -->
    .izquierda {text-align:left}
    .derecha {text-align:right}
    .centrado {text-align:center;}
    .justificado {text-align:justify}

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    07 jul, 09
    Ubicación
    mexico
    Mensajes
    117
    Poder de Reputación
    20
    pues sigue las instrucciones . . . usa el trauctor de yahoo, para que traduscas la pagina y la traduccion si se entiende

    pon todo este codigo abajo de la etiqueta de <head>

    <!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" lang="en" xml:lang="en">

    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="ddsmoothmenu.js">

    /***********************************************
    * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    </script>

    <script type="text/javascript">

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    ddsmoothmenu.init({
    mainmenuid: "smoothmenu2", //Menu DIV id
    orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    //customtheme: ["#804000", "#482400"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })

    </script>

    y despues todo este codigo dentro de la etiqueta de body

    <body>


    <h2>Example 1</h2>

    <div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
    <li><a href="#">Folder 0</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    <li><a href="#">Sub Item 3.1.1.3</a></li>
    <li><a href="#">Sub Item 3.1.1.4</a></li>
    <li><a href="#">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>


    <h2 style="margin-top:200px">Example 2</h2>

    <div id="smoothmenu2" class="ddsmoothmenu-v">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
    <li><a href="#">Folder 0</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Folder 1</a>
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    <li><a href="#">Sub Item 1.3</a></li>
    <li><a href="#">Sub Item 1.4</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
    <ul>
    <li><a href="#">Sub Item 3.1.1.1</a></li>
    <li><a href="#">Sub Item 3.1.1.2</a></li>
    <li><a href="#">Sub Item 3.1.1.3</a></li>
    <li><a href="#">Sub Item 3.1.1.4</a></li>
    <li><a href="#">Sub Item 3.1.1.5</a></li>
    </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>

    y tambien tienes que descargarte estos archibos . . . :


    ddsmoothmenu.js
    ddsmoothmenu.css
    ddsmoothmenu-v.css
    2 images:

    y subirlos a la rais de tu web y despues hacer tus cambios para personalizar tus enlaces y todo eso

    y las imagenes de las flechas las copias ... haciendo click con : boton derecho/guardar imagen como y las guardas en la carpeta de objetos , ya despues tienes que quitar enlaces del menu o de los submenos ( dependiendo que nesecites ) y listo

    esa pagina esta buena , explorala mas y veras que tiene buenas cosas

    suerte
    Última edición por luis armando; 10/04/2011 a las 05:24
    http://latinodance.myartsonline.com/plantilla.html

    http://paginausada.myartsonline.com/plantilla.html

    El Exito No Depende De Lo Que Se Hace....!!!!
    Si No... De Como Se Hace!!!!

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    16 mar, 11
    Mensajes
    48
    Poder de Reputación
    17
    y en mi pagina como puedo ponerlo o que tengo que quitar? porque nose que quitar y que dejar

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    07 jul, 09
    Ubicación
    mexico
    Mensajes
    117
    Poder de Reputación
    20
    lo que puedes hacer es crear un div para el codigo que va dentro del body

    por ejemplo . . . :
    <div class="menusuabe">
    y aqui todo el codigo
    </div>


    y pues es cuestion de que elijas cuantos enlaces vas a tener en el menu y cuantos enlaces en los submenus . . ., tienes que empesar a cambiar los enlaces y las rutas que bienen en ese codigo ... por ejemplo :

    este es el primer enlace que que tiene ese menu

    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>


    entonces tienes que cambiar la parte que te puse de rojo y cambiarla por tu ruta y cambiarle el nombre que te puse en verde opor ejemplo :

    <li><a href="index.html">Pagina Principal</a></li>

    y asi sucesivamente con los demas enlaces ... si quieres nos ponemos de acuerdo y te voy ayudando via messenger, si tocas algo y lo descompones, no hay problema, simplemente regresas a la pagina de Dynamic Drive y copias otra ves el codigo, es importante que le metas mano a esos codigos para que te vallas dando una idea de como es su estructura y vallas aprendiendo otras cosas, . . .

    asi fue como yo pude arreglar mi menu flotante que tengo en esta pagina ( http://paginausada.myartsonline.com/plantilla.html ) por que no me funcionaba y me mate algunas horas buscando la falla ( no la encontre jajajaja ) . . . pero encontre la solucion

    suerte
    http://latinodance.myartsonline.com/plantilla.html

    http://paginausada.myartsonline.com/plantilla.html

    El Exito No Depende De Lo Que Se Hace....!!!!
    Si No... De Como Se Hace!!!!

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    07 jul, 09
    Ubicación
    mexico
    Mensajes
    117
    Poder de Reputación
    20
    ha, se me olvidaba . . .
    en el codigo .css tambien tienes que crear esto :
    .menusuabe {y ya aqui le pones las propiedades que quieras . . . .}

    OJO

    estas propiedades son solo para poder manipular el div menusuabe . . . ok?

    para que te des una idea . . . . imaginate que tienes 10 hojas de papel ( el menu ) y no sabes donde ponerlas ..... entonces para solucionar rapido el problema , . . . las metes en una caja <div class="menusuabe">, y asi le buscamos un lugar a la caja en el codigo html. . . . que podrias ponerlo en el div menu , para eso esta ese div
    http://latinodance.myartsonline.com/plantilla.html

    http://paginausada.myartsonline.com/plantilla.html

    El Exito No Depende De Lo Que Se Hace....!!!!
    Si No... De Como Se Hace!!!!

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    16 mar, 11
    Mensajes
    48
    Poder de Reputación
    17
    Hola me sale este error

    error.jpg

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    07 jul, 09
    Ubicación
    mexico
    Mensajes
    117
    Poder de Reputación
    20
    hola

    vi la imagen del error y en el mensaje dice que en la linea 52 de del codigo html kit esta el error y dice que : no se puede etablecer valor " classname " el objeto es nulo o esta sin definir


    osea que algo le moviste al script del menu y por eso manda ese error , asi que checalo ahi donde le moviste y dejalo como estaba y ya de ahi empiesa otra vez a modificar.

    suerte
    http://latinodance.myartsonline.com/plantilla.html

    http://paginausada.myartsonline.com/plantilla.html

    El Exito No Depende De Lo Que Se Hace....!!!!
    Si No... De Como Se Hace!!!!

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    16 mar, 11
    Mensajes
    48
    Poder de Reputación
    17
    la cosa es que yo no he tocado nada de esa pagina. jejeje

  9. #9
    Me va gustando esto... Habitante
    Fecha de Ingreso
    16 mar, 11
    Mensajes
    48
    Poder de Reputación
    17
    he reemplazado por el original y me sale el mismo error socorro!!!!!

Temas Similares

  1. un poco perdido
    Por miguelobando40 en el foro Sugerencias
    Respuestas: 0
    Último Mensaje: 26/08/2010, 16:59
  2. Como insrtar menu desplegable en mi web (Sothink DHTML Menu)
    Por Salvador_Valencia en el foro Foro General
    Respuestas: 3
    Último Mensaje: 03/08/2010, 11:33

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •