模仿淘宝的侧边栏效果 最终实现的效果图如下所示
该侧边栏对应的html代码如下 需要说明的是该实例中的图标都是通过引用bootstrape中的图标实现的。另外,菜单项中的li的id和菜单项所对应的div的id是根据一定规律命名的,都是li的id后加“-content"命名的 ,方便以后的js操作
<div><!-- 无序列表实现菜单项 --><ul><li><span><i></i></span><div>我</div></li><li><span><i></i></span><div>资产</div></li><li><span><i></i></span><div>品牌</div></li><li><span><i></i></span><div>直播</div></li><li><span><i></i></span><div>看过</div></li><li><span><i></i></span><div>日历</div></li></ul><div id=closeBar><span></span></div></div><div><div>&