Skip to main content

Ralsina.Me — Roberto Alsina's website

Son of bartleblog 5: Menus

Added a Ya­hoo! Ui menubar gen­er­a­tor. It turns this:

a
b
c
 1
 2
  x
  y
d

In­to this:

bartleblog4

Or this if you are us­ing links:

bartleblog5

Or rather in­to this, which ex­plains why it's nec­es­sary (con­sid­er this is a very sim­ple menu!):

<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 miss­ing fea­tures, but a neat thingie al­ready.

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...