创建滑动菜单

首先，让我们创建 HTML/CSS。

菜单是页面上的一个独立图形组件，所以最好把它放入一个单独的 DOM 元素中。

菜单项的列表可以被作为列表 ul/li 列出。

下面是示例结构：

<div class="menu">
  <span class="title">Sweeties (click me)!</span>
  <ul>
    <li>Cake</li>
    <li>Donut</li>
    <li>Honey</li>
  </ul>
</div>

我们对标题使用 <span>，因为 <div> 有一个隐式的 display:block，它会占据 100% 的水平宽度。

就像这样：

<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>

因此，如果我们在它上面设置 onclick，那么它也会捕获文本右侧的点击。

……由于 <span> 有一个隐式的 display: inline，它恰好占据了足以容纳所有文本的位置：

<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>