css 질문.
본문
안녕하세요.
아래 소스데로 해보니 정상적으로 출력이 안됩니다..... 혹시 아시는분 있나요?
<style>
body{margin-top:50px;}
.accordion-menu .panel-body{padding:0px; margin:0px;}
.accordion-menu .panel-heading{background-color:#FFFFFF;}
.accordion-menu .panel-heading:hover{
background:#f5f5f5;
}
.accordion-menu .panel{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);}
.glyphicon-icon-rpad .glyphicon,.glyphicon-icon-rpad .glyphicon.m8,.fa-icon-rpad .fa,.fa-icon-rpad .fa.m8{ padding-right:8px; }
.glyphicon-icon-lpad .glyphicon,.glyphicon-icon-lpad .glyphicon.m8,.fa-icon-lpad .fa,.fa-icon-lpad .fa.m8{ padding-left:8px; }
.glyphicon-icon-rpad .glyphicon.m5,.fa-icon-rpad .fa.m5{ padding-right:5px; }
.glyphicon-icon-lpad .glyphicon.m5,.fa-icon-lpad .fa.m5{ padding-left:5px; }
.glyphicon-icon-rpad .glyphicon.m12,.fa-icon-rpad .fa.m12{ padding-right:12px; }
.glyphicon-icon-lpad .glyphicon.m12,.fa-icon-lpad .fa.m12{ padding-left:12px; }
.glyphicon-icon-rpad .glyphicon.m15,.fa-icon-rpad .fa.m15{ padding-right:15px; }
.glyphicon-icon-lpad .glyphicon.m15,.fa-icon-lpad .fa.m15{ padding-left:15px; }
.accordion-menu h4{position:relative;}
.accordion-menu h4 .accordion-menu-collapsible-icon{position:absolute; right:0px; top:5px; font-size:9px; }
.accordion-menu h4 a{display:block; color:#666666;}
.accordion-menu h4 a.active,.accordion-menu h4 .active, .active{text-decoration:none;}
.accordion-menu h4 a:hover,
.accordion-menu h4 a:focus{text-decoration:none; color:#222222;}
.accordion-menu h4 .accordion-menu-title-icon
{
float:right;
margin:0;
}
.accordion-menu ul{list-style:none; padding:0px; margin:0px;}
.accordion-menu ul li .badge,.accordion-menu ul li span.badge,.accordion-menu ul li label.badge{float:right}
.accordion-menu ul li:first-child a{}
.accordion-menu ul li:last-child a{border:0px solid #f9f9f9;}
.accordion-menu ul li a{display:block; line-height:22px; padding:5px 15px; margin:0px; border-bottom:1px solid #e8e8e8;}
.accordion-menu ul li a:hover{color:#232323;text-decoration:none;}
.accordion-menu ul.bullets{list-style:inside disc}
.accordion-menu ul.numerics{list-style:inside decimal}
.accordion-menu ul.kas-icon{}
.accordion-menu ul.kas-icon-aero li a:before{font-family: 'Glyphicons Halflings'; font-size:9px; content: "\e258"; padding-right:8px; }
</style>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group accordion-menu glyphicon-icon-rpad" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close m5"></span> Content
<span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="">
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span>Articles</a></li>
<li><a href="#"><span class="glyphicon glyphicon-flash"></span>News</a></li>
<li><a href="#"><span class="glyphicon glyphicon-file"></span>Newsletters</a></li>
<li><a href="#"><span class="glyphicon glyphicon-comment"></span>Comments <span class="badge">42</span></a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title glyphicon-icon-rpad">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th m5"></span>Modules</a>
<span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="kas-icon-aero">
<li><a href="#">Orders <span class="pull-right label label-success">$ 320</span></a></li>
<li><a href="#">Invoices</a></li>
<li><a href="#">Shipments</a></li>
<li><a href="#">Tex</a>
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title glyphicon-icon-rpad">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user m5"></span>Account</a>
<span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="bullets">
<li><a href="#">Change Password</a></li>
<li><a href="#">Notifications <span class="label label-info">5</span></a></li>
<li><a href="#">Import/Export</a></li>
<li><a href="#">Delete Account</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title glyphicon-icon-rpad">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file m5"></span>Reports</a>
<span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="numerics">
<li><a href="#">Sales</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Shopping Cart</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-md-9">
<div class="well">
<h1>
Accordion Menu With Icon</h1>
Admin Dashboard Accordion Menu
</div>
</div>
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
