<p>
看看效果:

首先,拆分用戶界面為一個組件樹

<p>
<pre>
<code>
.menu-layer{
.menu-content{
.menu-left{
.menu-list-nav{
}
.menu-list{
li{
a{
display: block;
}
}
}
}

 .menu-right{
 }

}

.menu-bottom{
}
}
</code>
</pre>

其次創(chuàng)建一個組件的靜態(tài)模板

<pre>
<code>
<div class="menu-layer">
<div class="menu-content">
<div class="menu-left">
<div class="menu-list-nav"></div>
<ul class="menu-list">
<li>
<a href="javascript:void(0);">官網(wǎng)下載</a>
</li>
<li>
<a href="javascript:void(0);">回看經(jīng)典</a>
</li>
<li>
<a href="javascript:void(0);">歷史消息</a>
</li>
</ul>
</div>
<div class="menu-right"></div>
</div>
<div class="menu-bottom">
</div>
</div>
</code>
</pre>

<p>

各區(qū)域子組件 進(jìn)行精細(xì)雕琢

menu-bottom

Paste_Image.png

menu-right

d

menu-left

Paste_Image.png

最后合組件

<p>

Paste_Image.png

接下來就可以 使用angularjs 或者你熟悉的任何xx 添加交互,
像angular這種雙向數(shù)據(jù)綁定的玩微信這種交互 爽爆了

最后成功展示如下: