درخواست راهنمایی جهت ایجاد منوهای کنار بصورت کشویی و افقی

hno · Apr 26, 2015

سلام.
دوستان چطوری باید منوهایی کشویی ایجاد کرد که در کنار صفحه قرار بگیره و تا 3 مرحله بشه داخل رفت ؟منوهای عمودی بالای سایت منظورم نیست .منوهای کناری سایت رو برای اینکار نیاز دارم .

ممنون میشم راهنماییم کنید.

mohammad177 · Jun 10, 2015

می دونم از زمان ثبت این تاپیک زمان زیادی گذشته ولی بهش جواب می دهم شاید یک به درد کس دیگه ای خورد.

من یک منو کشویی در سه سطح با HTML و CSS نوشتم که قرار می دهم. البته از نظر گرافیکی روی اون کاری انجام ندادم و اون رو به خود شما واگذار می کنم؛ من فقط روش ایجاد منو کشویی سه سطحی رو پیاده کردم.

کد:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.first-level li:hover > ul {
	display: block;	
}
.second-level {
	display: none;	
}
.third-level {
	display: none;	
}
</style>
</head>

<body>

<ul class="first-level">
	<li><a href="#">Home page</a></li>
    <li><a href="#">Learnings</a>
    	<ul class="second-level">
        	<li><a href="#">HTML</a>
            	<ul class="third-level">
            		<li><a href="#">HTML 4</a></li>
                    <li><a href="#">HTML 5</a></li>
            	</ul>
            </li>
            <li><a href="#">CSS</a>
            	<ul class="third-level">
            		<li><a href="#">CSS 1</a></li>
                    <li><a href="#">CSS 2</a></li>
                    <li><a href="#">CSS 3</a></li>
            	</ul>
            </li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">ASP</a></li>
        </ul>
    </li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">About us</a></li>
</ul>

</body>
</html>

به صورت فایل HTML هم ضمیمه پست کردم.