mohammad425
چهارشنبه 23 دی 1394, 22:07 عصر
مرسی اینم یه چیز جدید یاد گرفتیم
فقط بعد کلیک نمیشه دوباره کاری کرد با کلیک دوم برگرده سر حالت قبلی یا بره حالت خاصی؟
اونا دیگه فک کنم بره سر جاوااسکریپت اینا
با چک باکس خیلی راحت میشه طراحی کرد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background-color: #eee;
direction: rtl;
text-align: right;
font-size: 13px;
}
.main{
width: 70%;
border: 1px solid #D0D0D0;
border-radius: 3px;
margin: 50px auto;
background-color: #fff;
padding:15px;
}
.main input[type="checkbox"]{
display: none;
}
.main label{
background-color: #3498db;
transition: all .5s;
border-radius: 50px;
color:#fff;
padding: 5px 100px;
cursor: pointer;
}
.contect{
height: 0;
overflow: hidden;
margin-top: 20px;
transition: all .6s
}
.main label:hover{
background-color: #444
}
.main input[type="checkbox"]:checked + .contect{
height: 200px
}
</style>
</head>
<body>
<div class="main">
<label for="check-box">
انتخاب
</label>
<input type="checkbox" id="check-box" />
<div class="contect">
<ul>
<li><a href="#">گزینه اول</a></li>
<li><a href="#">گزینه دوم</a></li>
<li><a href="#">گزینه سوم</a></li>
<li><a href="#">گزینه چهارم</a></li>
<li><a href="#">گزینه پنجم</a></li>
</ul>
</div>
</div>
</body>
</html>