Loading ...
Sorry, an error occurred while loading the content.

Constructing submenu problem

Expand Messages
  • Won Sun Parque
    Hi, this is my first time using YUI. I am testing the water with the pop-up submenu but can t seems to figure it out. The following is the code for the page.
    Message 1 of 8 , Jul 24 4:33 PM
    • 0 Attachment
      Hi, this is my first time using YUI. I am testing the water with the pop-up
      submenu but can't seems to figure it out.

      The following is the code for the page. Submenu isn't showing up at all.
      Can someone show me what I did wrong? :P

      Thanks....

      --------------------------
      <!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>Untitled Document</title>

      <!-- Yahoo! YUI Library for Dynamic Menu -->
      <!--CSS-->
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts-min.css">
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.2.2/build/menu/assets/menu.css">
      <!-- Dependencies -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-
      event.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.2.2/build/build/container/container_core-
      min.js"></script>
      <!-- Source File -->
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.2.2/build/menu/menu-min.js"></script>


      </head>


      <body>
      <div id="leftmenu" class="yuimenu" style="width:100px;">
      <div class="bd">
      <ul class="first-of-type">
      <li class="yuimenuitem first-of-type"><a href="#">menu 1</a>
      <div id="menu1" class="yuimenu">
      <div class="bd">
      <ul class="first-of-type">
      <li class="yuimenuitem"><a href="#">option 1</a></li>
      <li class="yuimenuitem"><a href="#">option 2</a></li>
      <li class="yuimenuitem"><a href="#">option 3</a></li>
      <li class="yuimenuitem"><a href="#">option 4</a></li>
      </ul>
      </div>
      </div>
      </li>
      <li class="yuimenuitem">menu 2</li>
      <li class="yuimenuitem">menu 3</li>
      <li class="yuimenuitem">menu 4</li>
      </ul>
      </div>
      </div>

      <script type="text/javascript">
      var oMenu = new YAHOO.widget.Menu("leftmenu");
      oMenu.render();
      </script>

      </body>

      </html>
      --------------------------
    • dav.glass@yahoo.com
      Won -- The script for container is not linked in properly: src=http://yui.yahooapis.com/2.2.2/build/build/container/container_core-min.js should be:
      Message 2 of 8 , Jul 24 8:49 PM
      • 0 Attachment
        Won --

        The script for container is not linked in properly:
        src=http://yui.yahooapis.com/2.2.2/build/build/container/container_core-min.js"

        should be:
        src=http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"
         
        You should also wrap the js like this:

        var oMenu = null;
        YAHOO.util.Event.onAvailable('leftmenu', function() {
            oMenu = new YAHOO.widget.Menu("leftmenu");
            oMenu.render();
        });

        That will keep IE from throwing the really annoying Operation Aborted message...

        Hope that helps :)

        Dav

        Dav Glass
        dav.glass@...
        blog.davglass.com
         
         
        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: Won Sun Parque <idmail@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Tuesday, July 24, 2007 4:33:14 PM
        Subject: [ydn-javascript] Constructing submenu problem

        Hi, this is my first time using YUI. I am testing the water with the pop-up
        submenu but can't seems to figure it out.

        The following is the code for the page. Submenu isn't showing up at all.
        Can someone show me what I did wrong? :P

        Thanks....

        --------------------------
        <!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>Untitled Document</title>

        <!-- Yahoo! YUI Library for Dynamic Menu -->
        <!--CSS-->  
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts-min.css";>  
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapis.com/2.2.2/build/menu/assets/menu.css";>  
        <!-- Dependencies -->    
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-
        event.js"></script>  
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.2.2/build/build/container/container_core-
        min.js"></script>  
        <!-- Source File -->  
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.2.2/build/menu/menu-min.js"></script>  


        </head>


        <body>
        <div id="leftmenu" class="yuimenu" style="width:100px;">
        <div class="bd">
          <ul class="first-of-type">
           <li class="yuimenuitem first-of-type"><a href="#">menu 1</a>
            <div id="menu1" class="yuimenu">
             <div class="bd">
              <ul class="first-of-type">                
            <li class="yuimenuitem"><a href="#">option 1</a></li>    
            <li class="yuimenuitem"><a href="#">option 2</a></li>    
            <li class="yuimenuitem"><a href="#">option 3</a></li>    
            <li class="yuimenuitem"><a href="#">option 4</a></li>
              </ul>
             </div>
            </div>
           </li>
           <li class="yuimenuitem">menu 2</li>
           <li class="yuimenuitem">menu 3</li>
           <li class="yuimenuitem">menu 4</li>
          </ul>
        </div>
        </div>

        <script type="text/javascript">
        var oMenu = new YAHOO.widget.Menu("leftmenu");  
        oMenu.render();  
        </script>

        </body>

        </html>
        --------------------------




        Yahoo! Groups Links

        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/

        <*> Your email settings:
            Individual Email | Traditional

        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)

        <*> To change settings via email:
            mailto:ydn-javascript-digest@yahoogroups.com
            mailto:ydn-javascript-fullfeatured@yahoogroups.com

        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com

        <*> Your use of Yahoo! Groups is subject to:
            http://docs.yahoo.com/info/terms/


      • Won Sun Parque
        Hi, Dav. Thanks for the reply. I did what you recommended, but now the menu doesn t show at all anymore. :P I put the page on the web:
        Message 3 of 8 , Jul 25 12:32 PM
        • 0 Attachment

          Hi, Dav. Thanks for the reply. I did what you recommended, but now the menu doesn't show at all anymore. :P

          I put the page on the web: http://www.wonsun.com/menu_test.html

          Anyone can tell me what I did wrong? >_<

           

          Thanks.

          Won Sun


          --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
          >
          > Won --
          >
          > The script for container is not linked in properly:
          > src=http://yui.yahooapis.com/2.2.2/build/build/container/container_core-min.js"
          >
          > should be:
          > src=http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"
          >
          > You should also wrap the js like this:
          >
          > var oMenu = null;
          > YAHOO.util.Event.onAvailable('leftmenu', function() {
          > oMenu = new YAHOO.widget.Menu("leftmenu");
          > oMenu.render();
          > });
          >
          > That will keep IE from throwing the really annoying Operation Aborted message...
          >
          > Hope that helps :)
          >
          > Dav
          >
          >
          > Dav Glass
          > dav.glass@...
          > blog.davglass.com
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          > without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          > McDonalds Certified Food Specialist is to fine cuisine +
          >
          > ----- Original Message ----
          > From: Won Sun Parque idmail@...
          > To: ydn-javascript@yahoogroups.com
          > Sent: Tuesday, July 24, 2007 4:33:14 PM
          > Subject: [ydn-javascript] Constructing submenu problem
          >
          > Hi, this is my first time using YUI. I am testing the water with the pop-up
          > submenu but can't seems to figure it out.
          >
          > The following is the code for the page. Submenu isn't showing up at all.
          > Can someone show me what I did wrong? :P
          >
          > Thanks....
          >
          > --------------------------
          > <!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>Untitled Document</title>
          >
          > <!-- Yahoo! YUI Library for Dynamic Menu -->
          > <!--CSS-->
          > <link rel="stylesheet" type="text/css"
          > href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts-min.css";>
          > <link rel="stylesheet" type="text/css"
          > href="http://yui.yahooapis.com/2.2.2/build/menu/assets/menu.css";>
          > <!-- Dependencies -->
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-
          > event.js"></script>
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.2.2/build/build/container/container_core-
          > min.js"></script>
          > <!-- Source File -->
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.2.2/build/menu/menu-min.js"></script>
          >
          >
          > </head>
          >
          >
          > <body>
          > <div id="leftmenu" class="yuimenu" style="width:100px;">
          > <div class="bd">
          > <ul class="first-of-type">
          > <li class="yuimenuitem first-of-type"><a href="#">menu 1</a>
          > <div id="menu1" class="yuimenu">
          > <div class="bd">
          > <ul class="first-of-type">
          > <li class="yuimenuitem"><a href="#">option 1</a></li>
          > <li class="yuimenuitem"><a href="#">option 2</a></li>
          > <li class="yuimenuitem"><a href="#">option 3</a></li>
          > <li class="yuimenuitem"><a href="#">option 4</a></li>
          > </ul>
          > </div>
          > </div>
          > </li>
          > <li class="yuimenuitem">menu 2</li>
          > <li class="yuimenuitem">menu 3</li>
          > <li class="yuimenuitem">menu 4</li>
          > </ul>
          > </div>
          > </div>
          >
          > <script type="text/javascript">
          > var oMenu = new YAHOO.widget.Menu("leftmenu");
          > oMenu.render();
          > </script>
          >
          > </body>
          >
          > </html>
          > --------------------------
          >
          >
          >
          >
          > Yahoo! Groups Links
          >

        • dav.glass@yahoo.com
          Won -- Don t forget to show the menu :) Under the render() call, place this line: oMenu.show(); Dav Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows:
          Message 4 of 8 , Jul 25 1:19 PM
          • 0 Attachment
            Won --

            Don't forget to show the menu :)
            Under the render() call, place this line:
            oMenu.show();
             

            Dav

            Dav Glass
            dav.glass@...
            blog.davglass.com
             
             
            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: Won Sun Parque <idmail@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Wednesday, July 25, 2007 12:32:32 PM
            Subject: [ydn-javascript] Re: Constructing submenu problem

            Hi, Dav. Thanks for the reply. I did what you recommended, but now the menu doesn't show at all anymore. :P

            I put the page on the web: http://www.wonsun. com/menu_ test.html

            Anyone can tell me what I did wrong? >_<

             

            Thanks.

            Won Sun


            --- In ydn-javascript@ yahoogroups. com, dav.glass@.. . wrote:
            >
            > Won --
            >
            > The script for container is not linked in properly:
            > src=http://yui. yahooapis. com/2.2.2/ build/build/ container/ container_ core-min. js"
            >
            > should be:
            > src=http://yui. yahooapis. com/2.2.2/ build/container/ container_ core-min. js"
            >
            > You should also wrap the js like this:
            >
            > var oMenu = null;
            > YAHOO.util.Event. onAvailable( 'leftmenu' , function() {
            > oMenu = new YAHOO.widget. Menu("leftmenu" );
            > oMenu.render( );
            > });
            >
            > That will keep IE from throwing the really annoying Operation Aborted message...
            >
            > Hope that helps :)
            >
            > Dav
            >
            >
            > Dav Glass
            > dav.glass@.. .
            > blog.davglass. com
            >
            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            > without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            > McDonalds Certified Food Specialist is to fine cuisine +
            >
            > ----- Original Message ----
            > From: Won Sun Parque idmail@...
            > To: ydn-javascript@ yahoogroups. com
            > Sent: Tuesday, July 24, 2007 4:33:14 PM
            > Subject: [ydn-javascript] Constructing submenu problem
            >
            > Hi, this is my first time using YUI. I am testing the water with the pop-up
            > submenu but can't seems to figure it out.
            >
            > The following is the code for the page. Submenu isn't showing up at all.
            > Can someone show me what I did wrong? :P
            >
            > Thanks....
            >
            > ------------ --------- -----
            > <!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>Untitled Document</title>
            >
            > <!-- Yahoo! YUI Library for Dynamic Menu -->
            > <!--CSS-->
            > <link rel="stylesheet" type="text/css"
            > href="http:/ /yui.yahooapis. com/2.2.2/ build/fonts/ fonts-min. css";>
            > <link rel="stylesheet" type="text/css"
            > href="http:/ /yui.yahooapis. com/2.2.2/ build/menu/ assets/menu. css";>
            > <!-- Dependencies -->
            > <script type="text/javascri pt"
            > src="http:// yui.yahooapis. com/2.2.2/ build/yahoo- dom-event/ yahoo-dom-
            > event.js"></script>
            > <script type="text/javascri pt"
            > src="http:// yui.yahooapis. com/2.2.2/ build/build/ container/ container_ core-
            > min.js"></script>
            > <!-- Source File -->
            > <script type="text/javascri pt"
            > src="http:// yui.yahooapis. com/2.2.2/ build/menu/ menu-min. js"></script>
            >
            >
            > </head>
            >
            >
            > <body>
            > <div id="leftmenu" class="yuimenu" style="width: 100px;">
            > <div class="bd">
            > <ul class="first- of-type">
            > <li class="yuimenuitem first-of-type"><a href="#">menu 1</a>
            > <div id="menu1" class="yuimenu">
            > <div class="bd">
            > <ul class="first- of-type">
            > <li class="yuimenuitem"><a href="#">option 1</a></li>
            > <li class="yuimenuitem"><a href="#">option 2</a></li>
            > <li class="yuimenuitem"><a href="#">option 3</a></li>
            > <li class="yuimenuitem"><a href="#">option 4</a></li>
            > </ul>
            > </div>
            > </div>
            > </li>
            > <li class="yuimenuitem">menu 2</li>
            > <li class="yuimenuitem">menu 3</li>
            > <li class="yuimenuitem">menu 4</li>
            > </ul>
            > </div>
            > </div>
            >
            > <script type="text/javascri pt">
            > var oMenu = new YAHOO.widget. Menu("leftmenu" );
            > oMenu.render( );
            > </script>
            >
            > </body>
            >
            > </html>
            > ------------ --------- -----
            >
            >
            >
            >
            > Yahoo! Groups Links
            >


          • Won Sun Parque
            ... Woot! It showed up now. LOL. Thanks. Is there a way to make submenu only pops up when the users mouse-roll- over the sign, not the entire ?
            Message 5 of 8 , Jul 25 2:33 PM
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
              Woot! It showed up now. LOL. Thanks.

              Is there a way to make submenu only pops up when the users mouse-roll-
              over the " > " sign, not the entire <li> ?


              Thanks.

              Won Sun

              > Won --


              >
              > Don't forget to show the menu :)
              > Under the render() call, place this line:
              > oMenu.show();
              >
              >
              > Dav
              >
              >
              > Dav Glass
              > dav.glass@...
              > blog.davglass.com
              >
              > + Windows: n. - The most successful computer virus, ever. +
              > + A computer without a Microsoft operating system is like a dog
              > without bricks tied to its head +
              > + A Microsoft Certified Systems Engineer is to computing what a
              > McDonalds Certified Food Specialist is to fine cuisine +
              >
            • Won Sun Parque
              ... If I click on the page outside of the menu, the menu dispears... @_@ Did I do something wronge with the javascript? The page is at:
              Message 6 of 8 , Jul 25 3:31 PM
              • 0 Attachment
                >_< I just realized a problem with the menu......

                If I click on the page outside of the menu, the menu dispears... @_@

                Did I do something wronge with the javascript?


                The page is at: http://www.wonsun.com/menu_test.html.


                Thanks.
                Won Sun


                --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
                >
                > Won --
                >
                > Don't forget to show the menu :)
                > Under the render() call, place this line:
                > oMenu.show();
                >
                >
                > Dav
                >
                >
                > Dav Glass
                > dav.glass@...
                > blog.davglass.com
                >
                > + Windows: n. - The most successful computer virus, ever. +
                > + A computer without a Microsoft operating system is like a dog
                > without bricks tied to its head +
                > + A Microsoft Certified Systems Engineer is to computing what a
                > McDonalds Certified Food Specialist is to fine cuisine +
                >
              • Won Sun Parque
                The editor included the period as a part of the link. :/ Sorry about that... Please follow this link to the page: http://www.wonsun.com/menu_test.html
                Message 7 of 8 , Jul 25 6:11 PM
                • 0 Attachment

                  The editor included the period as a part of the link. :/

                  Sorry about that... Please follow this link to the page:

                  http://www.wonsun.com/menu_test.html

                  Thanks.

                   


                  --- In ydn-javascript@yahoogroups.com, "Won Sun Parque" <idmail@...> wrote:
                  >
                  > >_< I just realized a problem with the menu......
                  >
                  > If I click on the page outside of the menu, the menu dispears... @_@
                  >
                  > Did I do something wronge with the javascript?
                  >
                  >
                  > The page is at: http://www.wonsun.com/menu_test.html.
                  >
                  >
                  > Thanks.
                  > Won Sun
                  >
                  >
                  > --- In ydn-javascript@yahoogroups.com, dav.glass@ wrote:
                  > >
                  > > Won --
                  > >
                  > > Don't forget to show the menu :)
                  > > Under the render() call, place this line:
                  > > oMenu.show();
                  > >
                  > >
                  > > Dav
                  > >
                  > >
                  > > Dav Glass
                  > > dav.glass@
                  > > blog.davglass.com
                  > >
                  > > + Windows: n. - The most successful computer virus, ever. +
                  > > + A computer without a Microsoft operating system is like a dog
                  > > without bricks tied to its head +
                  > > + A Microsoft Certified Systems Engineer is to computing what a
                  > > McDonalds Certified Food Specialist is to fine cuisine +
                  > >
                  >

                • dav.glass@yahoo.com
                  Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows: n. - The most successful computer virus, ever. + + A computer without a Microsoft operating system
                  Message 8 of 8 , Aug 1, 2007
                  • 0 Attachment

                     
                    Dav Glass
                    dav.glass@...
                    blog.davglass.com
                     
                     
                    + Windows: n. - The most successful computer virus, ever. +
                    + A computer without a Microsoft operating system is like a dog
                    without bricks tied to its head +
                    + A Microsoft Certified Systems Engineer is to computing what a
                    McDonalds Certified Food Specialist is to fine cuisine +

                    Won --

                    Looking at the API docs here:
                    http://developer.yahoo.com/yui/docs/YAHOO.widget.Menu.html#clicktohide

                    clicktohide is defaulted to true, which would behave as you see it. So the submenu will auto hide if the user clicks outside the menu.

                    You should be able to get around this by making you config look like this:

                    "leftmenu", {
                    position:"static",
                    hidedelay:750,
                    lazyload:true,
                    clicktohide: false
                    }

                    Hope that helps :)
                    Dav

                    ----- Original Message ----
                    From: Won Sun Parque <idmail@...>
                    To: ydn-javascript@yahoogroups.com
                    Sent: Wednesday, July 25, 2007 3:31:14 PM
                    Subject: [ydn-javascript] Re: Constructing submenu problem

                    >_< I just realized a problem with the menu......

                    If I click on the page outside of the menu, the menu dispears... @_@

                    Did I do something wronge with the javascript?

                    The page is at: http://www.wonsun. com/menu_ test.html.

                    Thanks.
                    Won Sun

                    --- In ydn-javascript@ yahoogroups. com, dav.glass@.. . wrote:
                    >
                    > Won --
                    >
                    > Don't forget to show the menu :)
                    > Under the render() call, place this line:
                    > oMenu.show() ;
                    >
                    >
                    > Dav
                    >
                    >
                    > Dav Glass
                    > dav.glass@.. .
                    > blog.davglass. com
                    >
                    > + Windows: n. - The most successful computer virus, ever. +
                    > + A computer without a Microsoft operating system is like a dog
                    > without bricks tied to its head +
                    > + A Microsoft Certified Systems Engineer is to computing what a
                    > McDonalds Certified Food Specialist is to fine cuisine +
                    >


                  Your message has been successfully submitted and would be delivered to recipients shortly.