Vue.js手风琴菜单组件开发实例

本文为大家分享了vuejs组件开发之手风琴菜单组件实例，供大家参考，具体内容如下

小图标是引入font-awesome字体图标库绘制的。效果如下图所示：

代码：

 
 
 
 
 
 
 
 * {
 margin: 0;
 padding: 0;
 }

 body {
 padding-top: 100px;
 }

 #tabPanel {
 width: 120px;
 height: auto;
 margin: 0 auto;
 }

 #tabPanel .item .sildermun ul li {
 height: 40px;
 line-height: 40px;
 list-style: none;
 }

 #tabPanel .item .sildermun ul li:hover {
 background: #ccc;
 }

 #tabPanel .item .menutitle {
 height: 40px;
 line-height: 40px;
 text-align: center;
 background: #ccc;
 }

 #tabPanel .item .sildermun {
 text-align: center;
 background: #eee;
 }
 




 
 
 
 
 
 

 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。