sahel65
دوشنبه 12 مرداد 1394, 08:41 صبح
سلام دوستان عزیزم؛
یک منو طراحی کردم که میخوام براش زیرمنو هم درست کنم. یعنی اینکه کاربر با رفتن روی یک آیتم، بتونه زیرمنوهایی که باز میشه رو نگاه کنه. یه جورایی میدونم که باید زیرمنو رو از flow صفحه خارج کنم و بیارم پایین ولی نمیدونم چجوری باید این کار رو انجام بدم. ضمنا میخوام زیرمنو هم حالت عمودی داشته باشه و نه افقی.
این هم کد برنامه:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
color:black;
padding:20px;
height:600px;
}
#wrapper{
width:960px;
padding:50px;
margin:0 auto;
overflow:auto;
}
ul#menu{
float:right;
position:relative;
overflow:auto;
border:1px solid black;
list-style:none;
top:1px;
}
ul#menu li{
width:90px;
float:right;
border-left:1px solid black;
position:relative;
}
ul#menu li a{
text-decoration:none;
line-height:50px;
display:block;
text-align:center;
}
ul#menu li a:hover{
overflow:auto;
background-color:#CCCCCC;
}
ul#menu li:last-child{
border-left:none;
}
/***************** for sub menu for items **********************/
#submenu{
float:right;
border:1px solid black;
}
#submenu li{
height:50px;
list-style:none;
border-bottom:1px solid black;
text-align:center;
}
#submenu li:last-child{
border-bottom:none;
}
#submenu li a{
text-decoration:none;
line-height:50px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">خبر اول</a></li>
<li><a href="#">خبر دوم</a></li>
<ul id="submenu">
<li><a href="#">اولین زیرخبر </a></li>
<li><a href="#">دومین زیرخبر </a></li>
<li><a href="#">سومین زیرخبر </a></li>
</ul>
<li><a href="#">خبر سوم</a></li>
</ul>
</div>
</body>
</html>
و اینهم کد برنامه در jsffiddle (http://jsfiddle.net/e5dndzvd/) جهت راحتی مشاهده شما.
یک منو طراحی کردم که میخوام براش زیرمنو هم درست کنم. یعنی اینکه کاربر با رفتن روی یک آیتم، بتونه زیرمنوهایی که باز میشه رو نگاه کنه. یه جورایی میدونم که باید زیرمنو رو از flow صفحه خارج کنم و بیارم پایین ولی نمیدونم چجوری باید این کار رو انجام بدم. ضمنا میخوام زیرمنو هم حالت عمودی داشته باشه و نه افقی.
این هم کد برنامه:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
color:black;
padding:20px;
height:600px;
}
#wrapper{
width:960px;
padding:50px;
margin:0 auto;
overflow:auto;
}
ul#menu{
float:right;
position:relative;
overflow:auto;
border:1px solid black;
list-style:none;
top:1px;
}
ul#menu li{
width:90px;
float:right;
border-left:1px solid black;
position:relative;
}
ul#menu li a{
text-decoration:none;
line-height:50px;
display:block;
text-align:center;
}
ul#menu li a:hover{
overflow:auto;
background-color:#CCCCCC;
}
ul#menu li:last-child{
border-left:none;
}
/***************** for sub menu for items **********************/
#submenu{
float:right;
border:1px solid black;
}
#submenu li{
height:50px;
list-style:none;
border-bottom:1px solid black;
text-align:center;
}
#submenu li:last-child{
border-bottom:none;
}
#submenu li a{
text-decoration:none;
line-height:50px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">خبر اول</a></li>
<li><a href="#">خبر دوم</a></li>
<ul id="submenu">
<li><a href="#">اولین زیرخبر </a></li>
<li><a href="#">دومین زیرخبر </a></li>
<li><a href="#">سومین زیرخبر </a></li>
</ul>
<li><a href="#">خبر سوم</a></li>
</ul>
</div>
</body>
</html>
و اینهم کد برنامه در jsffiddle (http://jsfiddle.net/e5dndzvd/) جهت راحتی مشاهده شما.