goldmember
یک شنبه 01 مرداد 1391, 15:07 عصر
با سلام خدمت دوستان
من یه کد css واسه یه تگ نوشتم که اگه هرجا نام کلاسul برابر با hor بود اونوقت لیستهای طبقه زیریش رو بصورت افقی نشون بده و هرجا نام کلاس ul برابر با ver بود لسیت های زیرش رو عمودی نشون بده. و این کارو تا لیست های بی نهایت انجام بدم. با اینکار میوام یک منو بسازم.
کدی که خودم نوشتم در مرحله اول و دوم کار میکنه ولی تو مرحله سوم تو (لیست )قسمت M1.S2-H.ss2v که ul زیرش رو که نام کلاسش رو hor گذاشتم درست عمل نمیکنه و بصورت عمودی نشون میده.
در کل یکمی نامیزون کار میکنه.
لطفا ایرادشو بگین و بدجور توش گیر کردم.
اگه ساختارش اشکال داره لطفا راهنماییم کنین. با تشکر
.nav,.nav li,.nav ul{ margin:0; padding:0; list-style-type:none;}
.nav{position:relative;}
.nav li{float:left; background:#234;}
.nav li.hover,.nav li:hover{position:relative;}
.nav ul{visibility:hidden; position:absolute; background:#234;}
.ver {width:8em;}
.ver li{ float:none; display:block;}
.hor {width:auto;}
.hor li{ float:left; display:inline;}
.nav li:hover > ul{visibility:visible;}
.nav li.hover,.nav li:hover{position:static;}
.icon {width:20px; height:20px; }
تک HTML :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="testcss.css" rel="stylesheet" />
</head>
<style>
body {
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
.nav a{text-decoration:none; color:#eee; }
</style>
<body>
<ul class="nav">
<li><img class="icon" src="ico1.gif" /> <a href="#"> Main item 1</a>
<ul class="hor">
<li><a href="#">M_item1.Sub1-H</a></li>
<li><a href="#">M_item1.Sub2-H</a>
<ul class="ver">
<li><a href="#">M1.S2-H.ss1v</a></li>
<li><a href="#">M1.S2-H.ss2v</a>
<ul class="hor">
<li><a href="#">xxxxxxx-H1</a></li>
<li><a href="#">xxxxxxx-H2</a></li>
<li><a href="#">xxxxxxx-H3</a></li>
<li><a href="#">xxxxxxx-H4</a></li>
</ul>
</li>
<li><a href="#">M1.S2-H.ss3v</a></li>
<li><a href="#">M1.S2-H.ss4v</a></li>
</ul>
</li>
<li><a href="#">M_item1.Sub3-H</a></li>
<li><a href="#">M_item1.Sub4-H</a></li>
</ul>
</li>
<li><img class="icon" src="ico3.gif" /> <a href="#"> Main item 2</a>
<ul class="ver">
<li><a href="#">M_item2.Sub1-V</a></li>
<li><a href="#">M_item2.Sub2-V</a></li>
<li><a href="#">M_item2.Sub3-V</a></li>
<li><a href="#">M_item2.Sub4-V</a></li>
</ul>
</li>
<li><img class="icon" src="ico3.gif" /> <a href="#"> Main item 3</a>
<ul class="hor">
<li><a href="#">M_item3.Sub1-H</a></li>
<li><a href="#">M_item3.Sub2-H</a></li>
<li><a href="#">M_item3.Sub3-H</a></li>
<li><a href="#">M_item3.Sub4-H</a></li>
</ul>
</li>
<li><img class="icon" src="ico2.gif" /> <a href="#"> Main item 4</a>
<ul class="ver">
<li><a href="#">M_item4.Sub1-H</a></li>
<li><a href="#">M_item4.Sub2-H</a></li>
<li><a href="#">M_item4.Sub3-H</a></li>
<li><a href="#">M_item4.Sub4-H</a></li>
</ul>
</li>
</ul>
</body>
</html>
من یه کد css واسه یه تگ نوشتم که اگه هرجا نام کلاسul برابر با hor بود اونوقت لیستهای طبقه زیریش رو بصورت افقی نشون بده و هرجا نام کلاس ul برابر با ver بود لسیت های زیرش رو عمودی نشون بده. و این کارو تا لیست های بی نهایت انجام بدم. با اینکار میوام یک منو بسازم.
کدی که خودم نوشتم در مرحله اول و دوم کار میکنه ولی تو مرحله سوم تو (لیست )قسمت M1.S2-H.ss2v که ul زیرش رو که نام کلاسش رو hor گذاشتم درست عمل نمیکنه و بصورت عمودی نشون میده.
در کل یکمی نامیزون کار میکنه.
لطفا ایرادشو بگین و بدجور توش گیر کردم.
اگه ساختارش اشکال داره لطفا راهنماییم کنین. با تشکر
.nav,.nav li,.nav ul{ margin:0; padding:0; list-style-type:none;}
.nav{position:relative;}
.nav li{float:left; background:#234;}
.nav li.hover,.nav li:hover{position:relative;}
.nav ul{visibility:hidden; position:absolute; background:#234;}
.ver {width:8em;}
.ver li{ float:none; display:block;}
.hor {width:auto;}
.hor li{ float:left; display:inline;}
.nav li:hover > ul{visibility:visible;}
.nav li.hover,.nav li:hover{position:static;}
.icon {width:20px; height:20px; }
تک HTML :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="testcss.css" rel="stylesheet" />
</head>
<style>
body {
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
.nav a{text-decoration:none; color:#eee; }
</style>
<body>
<ul class="nav">
<li><img class="icon" src="ico1.gif" /> <a href="#"> Main item 1</a>
<ul class="hor">
<li><a href="#">M_item1.Sub1-H</a></li>
<li><a href="#">M_item1.Sub2-H</a>
<ul class="ver">
<li><a href="#">M1.S2-H.ss1v</a></li>
<li><a href="#">M1.S2-H.ss2v</a>
<ul class="hor">
<li><a href="#">xxxxxxx-H1</a></li>
<li><a href="#">xxxxxxx-H2</a></li>
<li><a href="#">xxxxxxx-H3</a></li>
<li><a href="#">xxxxxxx-H4</a></li>
</ul>
</li>
<li><a href="#">M1.S2-H.ss3v</a></li>
<li><a href="#">M1.S2-H.ss4v</a></li>
</ul>
</li>
<li><a href="#">M_item1.Sub3-H</a></li>
<li><a href="#">M_item1.Sub4-H</a></li>
</ul>
</li>
<li><img class="icon" src="ico3.gif" /> <a href="#"> Main item 2</a>
<ul class="ver">
<li><a href="#">M_item2.Sub1-V</a></li>
<li><a href="#">M_item2.Sub2-V</a></li>
<li><a href="#">M_item2.Sub3-V</a></li>
<li><a href="#">M_item2.Sub4-V</a></li>
</ul>
</li>
<li><img class="icon" src="ico3.gif" /> <a href="#"> Main item 3</a>
<ul class="hor">
<li><a href="#">M_item3.Sub1-H</a></li>
<li><a href="#">M_item3.Sub2-H</a></li>
<li><a href="#">M_item3.Sub3-H</a></li>
<li><a href="#">M_item3.Sub4-H</a></li>
</ul>
</li>
<li><img class="icon" src="ico2.gif" /> <a href="#"> Main item 4</a>
<ul class="ver">
<li><a href="#">M_item4.Sub1-H</a></li>
<li><a href="#">M_item4.Sub2-H</a></li>
<li><a href="#">M_item4.Sub3-H</a></li>
<li><a href="#">M_item4.Sub4-H</a></li>
</ul>
</li>
</ul>
</body>
</html>