azami.cu@gmail.com | +98912 373 8239

ساخت یک منو آکاردئونی زیبا تنها با CSS

از مجموعه تکنیک های CSS - برای حرفه ای شدن
 accordion, accordion menu with css, css3 effect, css3 منو, منو بازشونده, منو آکاردئونی, css تکنیک, css آموزش
به همت مهندس اعظمی در 1392/10/06

سلام بر شما دوستان عزیز



ما اینجا به شما میگیم که با 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: , , , , , , ,



Tags:   accordion, accordion menu with css, css3 effect, css3 منو, منو بازشونده, منو آکاردئونی, css تکنیک, css آموزش