Son of bartleblog 5: Menus

2007-03-28 17:28

Added a Yahoo! Ui menubar generator. It turns this:

a
b
c
 1
 2
  x
  y
d

Into this:

Or this if you are using links:

Or rather into this, which explains why it's necessary (consider this is a very simple menu!):

System Message: ERROR/3 (<string>, line 30)

Cannot find pygments lexer for language "HyperText"

.. code-block:: HyperText

    <script type="text/javascript">
    YAHOO.example.onMenuBarReady = function(p_oEvent)
    {
        // Instantiate and render the menu bar

        var oMenuBar = new YAHOO.widget.MenuBar("None",
            {   autosubmenudisplay:true,
                hidedelay:750,
                lazyload:true
            });

        oMenuBar.render();
    }

    // Initialize and render the menu bar when it is available in the DOM
    YAHOO.util.Event.onContentReady("None", YAHOO.example.onMenuBarReady);
    </script>
            <div id="None" class="yuimenubar">
                <div class="bd">
                    <ul class="first-of-type">
                        <li class="yuimenubaritem first-of-type">a </li>
                        <li class="yuimenubaritem">b</li>
                        <li class="yuimenubaritem"> c
                            <div id="c" class="yuimenu">
                                <div class="bd">
                                    <ul>
                                        <li class="yuimenuitem"> 1</li>
                                        <li class="yuimenuitem"> 2
                                            <div id=" 2" class="yuimenu">
                                                <div class="bd">
                                                    <ul class="first-of-type">
                                        <li class="yuimenuitem">  x</li>
                                        <li class="yuimenuitem">  y</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="yuimenubaritem">d</li>
                    </ul>
                </div>
            </div>

Still some missing features, but a neat thingie already.

Kalle / 2007-03-28 23:23:

This is a cool feature - but I'd never allow myself to make a such important part of a web site as the navigation to be rendered with JavaScript.

However, if you're building a JS-dependent web app, it -might- be Ok.

Just my 0.2$. YUI is really impressive.

Roberto Alsina / 2007-03-29 00:19:

The idea is that the site is widget-based.

I am also making a menu widget that takes the same data and renders it as a list of lists (using a whole lot of page, though).

Nowadays almost all mainstream sites have this kind of menus, though, so JS-less users are really having a hard time already.

Roberto Alsina / 2007-03-29 03:00:

Even better: if I build the menu using markup (as I am actually doing) it works just fine without any JS.

It's only if you build it using JS that you get problems (although it's much more compact).

root / 2007-03-29 05:45:

You run as root?

Roberto Alsina / 2007-03-29 10:38:

Root: Uh.... no?

root / 2007-03-30 02:06:

It says "root@f" in Konsole. *shrug*!

Roberto Alsina / 2007-03-30 03:09:

That's actually a leftover from a ssh session in one of my clients' firewall.

Sometimes konsole forgets to reset the title of the window...

Ralsina.Me — El sitio web de Roberto Alsina