HTML5 Web Application Development By Example Beginner's guide

Time for action – creating a toolbar

You can find the code for this section in chapter4/example4.2.

We'll define the toolbar in our HTML file just inside the main element and above the canvas:

<div id="toolbar">
  <div class="dropdown-menu">
    <button data-action="menu">Color</button>
    <ul id="color-menu"data-option="penColor" class="menu">
      <li data-value="red"></li>
      <li data-value="orange"></li>
      <li data-value="yellow"></li>
      <li data-value="green"></li>
      <li data-value="blue"></li>
      <li data-value="purple"></li>
      <li data-value="black" class="selected"></li>
      <li data-value="white"></li>
    </ul>
  </div>
<div class="dropdown-menu">
    <button data-action="menu">Opacity</button>
      <ul data-option="penOpacity" class="menu"> <li data-value=".1">10%</li> <li data-value=".2">20%</li> ...