ساخت منوی بازشوند از سمت چپ
سلام دوستان؛
چطور می تونم منویی مانند شکل زیر بسازم کد html وcss رو میخواستم؟؟؟
3 پاسخ
من آموزشتونو خوندم ولی کدی که پایین نوشتم اون چیزسی که میخوام نمیشه میشه لطف کنین بگین کجاشا باید تغییر بدم؟؟؟؟؟؟؟
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body,html,*{
margin: 0;
padding: 0;
direction: rtl;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
ul#bottom li a{
position: relative;
background-color: pink;
border-bottom: 2px solid gray;
width: 100px;
display: block;
text-align: center;
height: 30px;
}
#bottom .sub{
display: none;
position: absolute;
}
#bottom li:hover>.sub{
left:100px;
bottom:30px;
}
#bottom .sub>li>a{
display: block;
width: 120px;
}
</style>
</head>
<body>
<ul id="bottom">
<li><a href="#">text 1</a>
<ul class="sub" >
<li><a href="#">result 1<a><li>
<li><a href="#">result 2<a><li>
<li><a href="#">result 3<a><li>
</li> <li><a href="#">text 2</a></li> <li><a href="#">text 3</a></li> <li><a href="#">text 4</a></li> <li><a href="#">text 5</a></li>
</body>
</html>
سلام
خسته نباشيد
با توجه به اينکه فکر ميکنم جواب قطعي نگرفته ايد
کد زير رو براتون آماده کردم که بسيار ساده است
قسمت اول css که بسيار مهم است
@charset "utf-8";
/* CSS Document */
*{
list-style:none;
padding:0;
direction:rtl;
}
.right{
float:right;
}
#Left_Menu{
width:200px;
height:220px;
border:1px solid #000000;
}
#Left_Menu ul{
width:100%;
text-align:center;
background-color:#FF0004;
}
#Left_Menu ul li{
width:100%;
height:25px;
border-bottom:1px solid #000000;
}
#Left_Menu ul li ul{
display:none;
}
#Left_Menu ul li:hover ul{
display:inline-block;
position:relative;
top:-18px;
right:200px;
background-color:#D800FF;
color:#ffffff;
}
قسمت دوم هم HTML
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link href="Css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="right" id="Left_Menu"> <ul class="right"> <li>منو 1 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> <li>منو 2 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> <li>منو 3 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> <li>منو 4 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> <li>منو 5 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> <li>منو 6 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> <li>منو 7 <ul> <li>منو 1</li> <li>منو 2</li> <li>منو 3</li> </ul></li> </ul> </div> </body> </html>
سلام دوست عزیز، تو آموزش زیر به صورت کامل نحوه ساخت منوی کشویی با HTML و CSS توضیح داده شده: