jquery fg.menu dentro de un div

harryems · #1 (**permalink**) 25/10/2010, 15:03

Que tal??

alguien ha usado este magnifico plugin para hacer menus??

mi problema viene cuando el menu lo meto dentro del layout de jquey, o mas en especifico dentro de cualquier div.

el menu se muestra, pero no hace ningun cambio.

supongo que el error biene de alguna propiedad que al tener un padre (div) no la esta encontrando, soy nuevo en esto del jquery, asi que no se bien que metodo dela clase hay que modificar, ni como.

si alguien haya tenido el mismo problema, mucho agradecer la ayuda.

caricatos · #2 (**permalink**) 25/10/2010, 16:19

Tema movido desde javascript

mayid · #3 (**permalink**) 25/10/2010, 18:43

POdrías empezar por facilitar un link a la pagina del autor?

harryems · #4 (**permalink**) 26/10/2010, 07:05

jeje buena idea.

les dejo el link jquery_ipod_style

masterojitos · #5 (**permalink**) 26/10/2010, 08:16

En esa pagina hay iframes.... y uno de ellos es este:
http://www.filamentgroup.com/example...d.php?noheader

Me doy cuenta que como dices, si los elementos se incluyen en un contenedor, ya no funciona el efecto....

Pero en todo caso, para que lo pones en un contenedor ??
No lo hagas y funcionara !!

Lo mas seguro que esa libreria use algun codigo que impida estar en un contenedor, asi que simplemente no lo hagas.

Por ultimo, te vuelvo a decir, que indiques porque lo pones en un contenedor, lo mas seguro que no exista necesidad de hacerlo y lo soluciones ^^

Suerte

harryems · #6 (**permalink**) 26/10/2010, 08:27

use el layout de jquery, lo que buscabo es que se oculte el div.

haciendo un par de preubas, veo que el problema de los contenedores es solo con firefox, en IE funciona, aunque en IE hay otro bug que al hacer click sobre el boton del menu, si el menu es de funete externa, te manda a la funte.

pero creo que es un issue documentado, en estoy, en cuanto encuentre algo lo pongo. o si alguien mas tiene algo, que mejor.

saludos

masterojitos · #7 (**permalink**) 26/10/2010, 08:54

Amigo gracias por el dato.... disculpa que me haya demorado en responder pero estaba viendo todos los ejemplos del jquery layuot y me quede sorprendido xD

Pero aun asi, repito, por que no pones el div del menu fuera del layout y lo ubicas con posiciones absolutas o algo asi.... por que si no, vas a tener que elegir entre u otro (y supongo que buscaras otro menu ^^)

Suerte

harryems · #8 (**permalink**) 26/10/2010, 09:31

la verdad es que el menu se ajustaba justo a lo que necesitaba, un menu vertical multinivel de un ancho fijo, asi que dejarlo hasta el final del dia, mientras me dare de topes con el, e ir avanzando en otros punto del proyecto.

Mil gracias

masterojitos · #9 (**permalink**) 26/10/2010, 14:16

Seria Bueno que des el link de la web... para ver como se ve y aver si por ahi se puede solucionar....

Danos el enlace online de la web y quizas solucionemos el menu.... por que tambien es muy buen menu... lastima ese problemilla ^^

Suerte

harryems · #10 (**permalink**) 26/10/2010, 15:08

estaria bien :(:(:( pero es un intranet.
y ni a golpes me podria sacar el codigo, aun menos subirlo a host.

:(:(

masterojitos · #11 (**permalink**) 26/10/2010, 15:33

Podrias subir solo una web de ejemplo.... para ver como estas usando el layout y el menu... asi te podremos ayudar mejor....

Pero bueno, si es confidencial.... te deseo suerte ^^

Bye

harryems · #12 (**permalink**) 26/10/2010, 15:58

oki, espero hacerlo, para el dia de mañana, ademas sirve para mas gente.

Saludos

harryems · #13 (**permalink**) 26/10/2010, 17:34

bueno, ya hando armando el paquete, esperemos que no se sepa, si uds no dicen nada yo tampoco :p

el problema es que si funciona dentro del layout, pero en firefox solo funciona con las teclas de cursor, no con el mouse, y al contrario en IE (no me importa que no funcione con las teclas)

el problema es que cuando pinta el menu, o mejor dicho hace visible ese div, lo hace de forma absoluta, en el caso especifico que estoy haciendo, lo pinta debajo de de mi div west :S:S:S

mañana ya tengo el paquete listo

masterojitos · #14 (**permalink**) 26/10/2010, 17:40

Lamentablemente no te entendi nada xD
Por eso te decia que subas una muestra para ayudarte mejor ^^

harryems · #15 (**permalink**) 26/10/2010, 19:09

Me hubiera gustado mas subir un paquete, pero no tengo permisos, y el firewall del trabajo no me deja abrir alguna pagina para compartir archivos :S:S:S
espero sea claro y que las bibliotecas nos ea un problema :D

este es el index :

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Filament Group Lab</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="fg.menu.js"></script>

    <script type="text/javascript" src="jquery.layout.js"></script>

 
    <link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" />

    <link type="text/css" href="JqueryLayoyt.css" media="screen" rel="stylesheet" />

    <link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" />

 
    <!-- styles for this example page only -->

    <style type="text/css">

    body { font-size:62.5%; margin:0; padding:0; }

    </style>

 
    <!-- style exceptions for IE 6 -->

    <!--[if IE 6]>

    <style type="text/css">

        .fg-menu-ipod .fg-menu li { width: 95%; }

        .fg-menu-ipod .ui-widget-content { border:0; }

    </style>

    <![endif]-->

 
    <script type="text/javascript">

    $(function(){

        $('.fg-button').hover(

            function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },

            function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }

        );

 
        $.post('menuContent.html', function(data){ // grab content from another page

            $('#flyout1').menu({

                        content: data,

                        backLink: false});

        });

         $("body").layout({

            defaults: {

               fxName:                       "slide"

            ,  fxSpeed:                      "slow"

            ,  north__fxName:                "none"

            ,  south__fxName:                "none"

            ,  south__spacing_closed:        8

            ,  initClosed:                   false

            },

 
              west:{

                  minSize:230

                  ,togglerLength_closed:  "90%"

                  ,maskIframesOnResize: true

                ,slideTrigger_close : "mouseout"

                ,hideTogglerOnSlide : true

              },

              north:{

                  minSize:30

                  , maskIframesOnResize: true

              }

        }

    );

    });

    </script>

</head>

       <body>

             <div class="ui-layout-west">

                    <a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout1"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a>

             </div>

             <div class="ui-layout-center">

             </div>

       </body>

</html>

el menuContent.html:

Código PHP:

  <ul>

    <li><a href="#">Breaking News</a>

        <ul>

            <li><a href="#">Entertainment</a></li>

            <li><a href="#">Politics</a></li>

            <li><a href="#">A&amp;E</a></li>

            <li><a href="#">Sports</a>

                <ul>

                    <li><a href="#">Baseball</a></li>

                    <li><a href="#">Basketball</a></li>

                    <li><a href="#">A really long label would wrap nicely as you can see</a></li>

                    <li><a href="#">Swimming</a>

                        <ul>

                            <li><a href="#">High School</a></li>

                            <li><a href="#">College</a></li>

                            <li><a href="#">Professional</a>

                                <ul>

                                    <li><a href="#">Mens Swimming</a>

                                        <ul>

                                            <li><a href="#">News</a></li>

                                            <li><a href="#">Events</a></li>

                                            <li><a href="#">Awards</a></li>

                                            <li><a href="#">Schedule</a></li>

                                            <li><a href="#">Team Members</a></li>

                                            <li><a href="#">Fan Site</a></li>

                                        </ul>

                                    </li>

                                    <li><a href="#">Womens Swimming</a>

                                        <ul>

                                            <li><a href="#">News</a></li>

                                            <li><a href="#">Events</a></li>

                                            <li><a href="#">Awards</a></li>

                                            <li><a href="#">Schedule</a></li>

                                            <li><a href="#">Team Members</a></li>

                                            <li><a href="#">Fan Site</a></li>

                                        </ul>

                                    </li>

                                </ul>

                            </li>

                            <li><a href="#">Adult Recreational</a></li>

                            <li><a href="#">Youth Recreational</a></li>

                            <li><a href="#">Senior Recreational</a></li>

                        </ul>

                    </li>

                    <li><a href="#">Tennis</a></li>

                    <li><a href="#">Ice Skating</a></li>

                    <li><a href="#">Javascript Programming</a></li>

                    <li><a href="#">Running</a></li>

                    <li><a href="#">Walking</a></li>

                </ul>

            </li>

            <li><a href="#">Local</a></li>

            <li><a href="#">Health</a></li>

        </ul>

    </li>

    <li><a href="#">Entertainment</a>

    <ul>

        <li><a href="#">Celebrity news</a></li>

        <li><a href="#">Gossip</a></li>

        <li><a href="#">Movies</a></li>

        <li><a href="#">Music</a>

        <ul>

            <li><a href="#">Alternative</a></li>

            <li><a href="#">Country</a></li>

            <li><a href="#">Dance</a></li>

            <li><a href="#">Electronica</a></li>

            <li><a href="#">Metal</a></li>

            <li><a href="#">Pop</a></li>

            <li><a href="#">Rock</a>

                <ul>

                    <li><a href="#">Bands</a>

                        <ul>

                            <li><a href="#">Dokken</a></li>

                        </ul>

                    </li>

                    <li><a href="#">Fan Clubs</a></li>

                    <li><a href="#">Songs</a></li>

                </ul>

            </li>

        </ul>

        </li>

        <li><a href="#">Slide shows</a></li>

        <li><a href="#">Red carpet</a></li>

    </ul>

    </li>

    <li><a href="#">Finance</a>

    <ul>

        <li><a href="#">Personal</a>

        <ul>

            <li><a href="#">Loans</a></li>

            <li><a href="#">Savings</a></li>

            <li><a href="#">Mortgage</a></li>

            <li><a href="#">Debt</a></li>

        </ul>

        </li>

        <li><a href="#">Business</a></li>

    </ul>

    </li>

    <li><a href="#">Food & Cooking</a>

    <ul>

        <li><a href="#">Breakfast</a></li>

        <li><a href="#">Lunch</a></li>

        <li><a href="#">Dinner</a></li>

        <li><a href="#">Dessert</a>

            <ul>

                <li><a href="#">Dump Cake</a></li>

                <li><a href="#">Doritos</a></li>

                <li><a href="#">Both please.</a></li>

            </ul>

        </li>

    </ul>

    </li>

    <li><a href="#">Lifestyle</a></li>

    <li><a href="#">News</a></li>

    <li><a href="#">Politics</a></li>

    <li><a href="#">Sports</a>

        <ul>

            <li><a href="#">Baseball</a></li>

            <li><a href="#">Basketball</a></li>

            <li><a href="#">Swimming</a>

            <ul>

                <li><a href="#">High School</a></li>

                <li><a href="#">College</a></li>

                <li><a href="#">Professional</a>

                <ul>

                    <li><a href="#">Mens Swimming</a>

                    <ul>

                            <li><a href="#">News</a></li>

                            <li><a href="#">Events</a></li>

                            <li><a href="#">Awards</a></li>

                            <li><a href="#">Schedule</a></li>

                            <li><a href="#">Team Members</a></li>

                            <li><a href="#">Fan Site</a></li>

                        </ul>

                    </li>

                    <li><a href="#">Womens Swimming</a>

                    <ul>

                        <li><a href="#">News</a></li>

                        <li><a href="#">Events</a></li>

                        <li><a href="#">Awards</a></li>

                        <li><a href="#">Schedule</a></li>

                        <li><a href="#">Team Members</a></li>

                        <li><a href="#">Fan Site</a></li>

                    </ul>

                    </li>

                </ul>

                </li>

                <li><a href="#">Adult Recreational</a></li>

                <li><a href="#">Youth Recreational</a></li>

                <li><a href="#">Senior Recreational</a></li>

            </ul>

            </li>

            <li><a href="#">Tennis</a></li>

            <li><a href="#">Ice Skating</a></li>

            <li><a href="#">Javascript Programming</a></li>

            <li><a href="#">Running</a></li>

            <li><a href="#">Walking</a></li>

        </ul>

        </li>

</ul>

el JqueryLayoyt.css

Código PHP:

   
    .ui-layout-pane {  

        border: 1px solid #BBB; 

    } 

    .ui-layout-pane-center { /* IFRAME pane */ 

        padding: 0;

        margin:  0;

    } 

    .ui-layout-pane-west { /* west pane */ 

        padding: 0 10px; 

        background-color: #EEE !important;

        overflow: auto;

    } 

    .ui-layout-pane-north { /* north pane */ 

        padding: 0 10px; 

        background: url("../images/north_base.png") repeat-x scroll 0 50% #80ADE5;

        overflow: auto;

    }

    .ui-layout-resizer { /* all 'resizer-bars' */ 

        background: #DDD; 

        } 

    .ui-layout-resizer-open:hover { /* mouse-over */

            background: #9D9; 

        }

 
    .ui-layout-toggler { /* all 'toggler-buttons' */ 

        background: #AAA; 

        } 

        .ui-layout-toggler-closed { /* closed toggler-button */ 

            background: #CCC; 

            border-bottom: 1px solid #BBB; 

        } 

        .ui-layout-toggler .content { /* toggler-text */ 

            font: 14px bold Verdana, Verdana, Arial, Helvetica, sans-serif;

        }

        .ui-layout-toggler:hover { /* mouse-over */ 

            background: #DCA; 

            } 

            .ui-layout-toggler:hover .content { /* mouse-over */ 

                color: #009; 

                }

 
    /* class to make the 'iframe mask' visible */

    .ui-layout-mask {

        opacity: 0.2 !important;

        filter:     alpha(opacity=20) !important;

        background-color: #666 !important;

    }

 
span.button-close-west            { background: url(../image/go-lt-off.gif) no-repeat center; }

span.button-close-west:hover    { background: url(../image/go-lt-on.gif)  no-repeat center; }

span.button-close-east            { background: url(../image/go-rt-off.gif) no-repeat center; }

span.button-close-east:hover    { background: url(../image/go-rt-on.gif)  no-repeat center; }

harryems · #16 (**permalink**) 26/10/2010, 19:11

el fg.menu.css:

Código PHP:

  /* Styles for jQuery menu widget
Author:    Maggie Wachs, [email protected]
Date:        September 2008
*/


/* REQUIRED STYLES - the menus will only render correctly with these rules */    

.fg-menu-container { position: absolute; top:0; left:-999px; padding: .4em;  overflow: hidden; }
.fg-menu-container.fg-menu-flyout { overflow: visible; }

.fg-menu, .fg-menu ul { list-style-type:none; padding: 0; margin:0; }

.fg-menu { position:relative; }
.fg-menu-flyout .fg-menu { position:static; }

.fg-menu ul { position:absolute; top:0; }
.fg-menu ul ul { top:-1px; }

.fg-menu-container.fg-menu-ipod .fg-menu-content, 
.fg-menu-container.fg-menu-ipod .fg-menu-content ul { background: none !important; }

.fg-menu.fg-menu-scroll,
.fg-menu ul.fg-menu-scroll { overflow: scroll;  overflow-x: hidden; }

.fg-menu li { clear:both; float:left; width:100&#37;; margin: 0; padding:0; border: 0; }    
.fg-menu li li { font-size:1em; } /* inner li font size must be reset so that they don't blow up */

.fg-menu-flyout ul ul { padding: .4em; }
.fg-menu-flyout li { position:relative; }

.fg-menu-scroll { overflow: scroll; overflow-x: hidden; }

.fg-menu-breadcrumb { margin: 0; padding: 0; }

.fg-menu-footer {  margin-top: .4em; padding: .4em; }
.fg-menu-header {  margin-bottom: .4em; padding: .4em; }

.fg-menu-breadcrumb li { float: left; list-style: none; margin: 0; padding: 0 .2em; font-size: .9em; opacity: .7; }
.fg-menu-breadcrumb li.fg-menu-prev-list,
.fg-menu-breadcrumb li.fg-menu-current-crumb { clear: left; float: none; opacity: 1; }
.fg-menu-breadcrumb li.fg-menu-current-crumb { padding-top: .2em; }

.fg-menu-breadcrumb a, 
.fg-menu-breadcrumb span { float: left; }

.fg-menu-footer a:link,
.fg-menu-footer a:visited { float:left; width:100%; text-decoration: none; }
.fg-menu-footer a:hover,
.fg-menu-footer a:active {  }

.fg-menu-footer a span { float:left; cursor: pointer; }

.fg-menu-breadcrumb .fg-menu-prev-list a:link,
.fg-menu-breadcrumb .fg-menu-prev-list a:visited,
.fg-menu-breadcrumb .fg-menu-prev-list a:hover,
.fg-menu-breadcrumb .fg-menu-prev-list a:active { background-image: none; text-decoration:none; }
    
.fg-menu-breadcrumb .fg-menu-prev-list a { float: left; padding-right: .4em; }
.fg-menu-breadcrumb .fg-menu-prev-list a .ui-icon { float: left; }
    
.fg-menu-breadcrumb .fg-menu-current-crumb a:link,
.fg-menu-breadcrumb .fg-menu-current-crumb a:visited,
.fg-menu-breadcrumb .fg-menu-current-crumb a:hover,
.fg-menu-breadcrumb .fg-menu-current-crumb a:active { display:block; background-image:none; font-size:1.3em; text-decoration:none; }



/* REQUIRED LINK STYLES: links are "display:block" by default; if the menu options are split into 
    selectable node links and 'next' links, the script floats the node links left and floats the 'next' links to the right    */

.fg-menu a:link,
.fg-menu a:visited,
.fg-menu a:hover,
.fg-menu a:active { float:left; width:92%; padding:.3em 3%; text-decoration:none; outline: 0 !important; }

.fg-menu a { border: 1px dashed transparent; }

.fg-menu a.ui-state-default:link,
.fg-menu a.ui-state-default:visited,
.fg-menu a.ui-state-default:hover,
.fg-menu a.ui-state-default:active,
.fg-menu a.ui-state-hover:link,
.fg-menu a.ui-state-hover:visited,
.fg-menu a.ui-state-hover:hover,
.fg-menu a.ui-state-hover:active,
 .fg-menu a.ui-state-active:link,
 .fg-menu a.ui-state-active:visited,
 .fg-menu a.ui-state-active:hover,
.fg-menu a.ui-state-active:active { border-style: solid; font-weight: normal; }

.fg-menu a span { display:block; cursor:pointer; }


 /* SUGGESTED STYLES - for use with jQuery UI Themeroller CSS */    
 
.fg-menu-indicator span { float:left; }
.fg-menu-indicator span.ui-icon { float:right; }

.fg-menu-content.ui-widget-content, 
.fg-menu-content ul.ui-widget-content { border:0; }


/* ICONS AND DIVIDERS */

.fg-menu.fg-menu-has-icons a:link,
.fg-menu.fg-menu-has-icons a:visited,
.fg-menu.fg-menu-has-icons a:hover,
.fg-menu.fg-menu-has-icons a:active { padding-left:20px; }

.fg-menu .horizontal-divider hr, .fg-menu .horizontal-divider span { padding:0; margin:5px .6em; }
.fg-menu .horizontal-divider hr { border:0; height:1px; }
.fg-menu .horizontal-divider span { font-size:.9em; text-transform: uppercase; padding-left:.2em; }

salvo la bibliotecas creo que es todo lo necesario.

Saludos

harryems · #17 (**permalink**) 26/10/2010, 19:15

Sorpresa!!!!!
el menu esta debajo del div deslizable,y en firefox no funcionan los link con el mouse