YUI MenuBar: A Facebook-like Application Bar

Written on 6:59:00 PM by S. Potter

Below is a snippet of HTML code with embedded Javascript code that will create a top anchored menu bar very similar to what you see at the bottom of the Facebook page:

<!-- Add the following to your HTML/HEAD -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
  var oMenuBar = new YAHOO.widget.MenuBar("menubar");
  oMenuBar.render();
});
</script>

<!-- in your HTML/BODY modify the following for your own "Facebook Application Bar" menu -->
<div id="menubar" class="yuimenubar">
  <div class="bd">
    <ul class="first-of-type">
      <li class="yuimenubaritem first-of-type">
        <a class="yuimenubaritemlabel" href="#file">Applications</a>
        <div id="file" class="yuimenu">
          <div class="bd">
            <ul>
              <li class="yuimenuitem">
                <a class="yuimenuitemlabel" href="#">Notes<em class="helptext">Ctrl + N</em></a>
              </li>
              <li class="yuimenuitem">
                <a class="yuimenuitemlabel" href="#">Links<em class="helptext">Ctrl + L</em></a>
              </li>
              <li class="yuimenuitem">
                <a class="yuimenuitemlabel" href="#open">Photos<em class="helptext">Ctrl + P</em></a>
                <div id="open" class="yuimenu">
                  <div class="bd">
                      <ul class="first-of-type">
                        <li class="yuimenuitem">
                            <a class="yuimenuitemlabel" href="#">Upload Album</a>
                        </li>
                        <li class="yuimenuitem">
                            <a class="yuimenuitemlabel" href="#">Browse Albums</a>
                        </li>
                      </ul>            
                  </div>
                </div>            
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="yuimenubaritem first-of-type">
        <a class="yuimenubaritemlabel" href="#"edit>Something Else</a>
        <div id="pim" class="yuimenu">
          <div class="bd">
            <ul class="first-of-type">
              <li class="yuimenuitem">
                <a class="yuimenuitemlabel" href="#"> Bla 1</a>
              </li>
              <li class="yuimenuitem">
                <a class="yuimenuitemlabel" href="#"> Bla 2</a>
              </li>
            </ul>            
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
For further details about customizing the YUI MenuBar look and feel you should visit the API documentation

Posted in , , | 1 comments | Links to this post