سلام بر شما دوستان عزیز
ما اینجا به شما میگیم که با css هم میتونید چیزای جالبی ایجاد بکیند،
به راحتی حتی بدون یک خط کد jQuery ما یک منو بازشونده رو ایجاد میکنیم.
کدهای HTML
و این هم کدهای CSS
.accordion{
margin:auto;
background: rgba(0,0,0,0.2);
color: #303030;
width: 300px;
text-align: center
}
.accordion h2{
background: #fff;
padding: 5px;
}
.section h3{
background: #cc0066;
color:#fff;
padding: 5px;
margin-bottom: 2px
}
.section h3 a{
color:#fff;
}
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}
دیدید اصلا کاری نداشت
اینم پیش نمایش:
امید وارم با دیدن این مثال ها ذهن خودتون باز بشه و بتونید استایل های فوق العاده ای رو بوجود بیارید.
فقط این نکته رو فراموش نکنید که این کار با CSS3 انجام میشه و فقط در مرورگرهای جدید قابل نمایش هستش.
با تشکر از توجه شما -با عضویت در
sarat.ir
از آخرین آموزش ها و مطالب با خبر شوید.
Tags:
accordion, accordion menu with css, css3 effect, css3 منو, منو بازشونده, منو آکاردئونی, css تکنیک, css آموزش