Datasheet

document that will be used to create the menu bar. In other words, the structure of the menu bar will be
derived from the structure of this element, and the content of this element will be replaced when the
menu bar is rendered by a totally new content that YUI will build so that it displays like a menu bar.
The HTML element that describes the menu bar in
index.html is:
<div id=”menubar” class=”yuimenubar”>
<div class=”bd”>
<ul class=”first-of-type”>
<li class=”yuimenubaritem” id=”menubar.file”>
<span>File</span>
<div class=”yuimenu”>
<div class=”bd”>
<ul class=”first-of-type”>
<li class=”yuimenuitem” id=”menubar.file.new”>New</li>
<li class=”yuimenuitem” id=”menubar.file.save”>Save</li>
</ul>
</div>
</div>
</li>
<li class=”yuimenubaritem” id=”menubar.go”>
<span>Go</span>
<div class=”yuimenu”>
<div class=”bd”>
<ul class=”first-of-type”>
<li class=”yuimenuitem”>dummy</li>
</ul>
</div>
</div>
</li>
<li class=”yuimenubaritem” id=”menubar.config”>Configuration</li>
<li class=”yuimenubaritem” id=”menubar.view”>
<span>View</span>
<div class=”yuimenu”>
<div class=”bd”>
<ul class=”first-of-type”>
<li class=”yuimenuitem” id=”menubar.view.yahoofinance”>
<span>Yahoo! FINANCE</span>
<div id=”widgets.Yahoo.finance” class=”yuimenu”>
<div class=”bd”>
<ul>
<li class=”yuimenuitem”
id=”menubar.view.yahoofinance.quotes”>Quotes</li>
<li class=”yuimenuitem”
id=”menubar.view.yahoofinance.chart”>Chart</li>
<li class=”yuimenuitem”
id=”menubar.view.yahoofinance.news”>News</li>
</ul>
</div>
</div>
</li>
<li class=”yuimenuitem”
id=”menubar.view.delicious”>del.icio.us</li>
</ul>
</div>
11
Hello Web 2.0 World
04_087889 ch01.qxp 5/2/07 12:56 PM Page 11