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

ما اینجا به شما میگیم که با 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 آموزش