قائمة علوية منسدلة جي كويري

بواسطة محمد الحلبي

by Alhalabi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<div id="traidnt">
    <div class="content">هنا النص</div>
    <div class="button">قائمة العضو</div>
</div>

CSS

body, div{
    padding:0;
    margin:0;
}
#traidnt{
}
#traidnt .button{
    height:40px;        
    background:#444444 url(../button.png) 20% 0 no-repeat;
    width:180px;
    position:relative;
    left:50px;
    color:#ffffff;
    cursor:pointer;
    text-align:center;
    font:bold 14px Arial;
    line-height:40px;
    border-radius:0 0 5px 5px;
}
#traidnt .content{
    padding:20px;
    height:100px;
    display:none;
    color:#fff;
    direction:rtl;
    background-color:#555555;
}

JavaScript

// JavaScript Document
$(document).ready(function(e) {
    
    $('#traidnt .button').toggle(function(){
        $('#traidnt .content').slideDown(300);
    },function(){
        $('#traidnt .content').slideUp(300);
    });
    
});