آموزش طراحی و ساخت منو های آبشاری (drop down) + ویدیو

آموزش طراحی و ساخت منو های آبشاری (drop down) + ویدیو

آموزش طراحی و ساخت منو های آبشاری

یکی از نیاز ها مهم و اساسی هر وبسایتی داشتن منو های زیبا می باشد و ما
در این مقاله به آموزش طراحی و ساخت منو های آبشاری (drop down) با افکت جذاب می پردازیم.

کدهای مربوطه :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/animate.css" type="text/css" rel="stylesheet">
<style type="text/css">
	body{direction:rtl;}
	nav{position:relative;}
	ul{list-style:none;background: #cccccc;position: absolute;padding-right: 0;}
	ul>li{float: right;width: 100px;height: 40px;line-height: 40px;text-align: center;position: relative;}
	ul>li a{text-decoration: none;color: #2c3e50;}
	ul>li>ul{position: absolute;background: #f1f1f1;display: none;}
	ul>li:hover>ul{display: block}
	ul>li>ul>li{position: relative}
	ul>li>ul>li ul{position: absolute;right: 100px;top: 0;}
	
</style>
</head>

<body>
	<nav>
		<ul class="animated fadeIn" data-wow-duration="3s">
			<li><a href="#">menu 1</a></li>
			<li><a href="#">menu 2</a>
				<ul class="animated fadeIn" data-wow-duration="3s">
					<li><a href="#">menu 21</a></li>
					<li><a href="#">menu 22</a></li>
					<li><a href="#">menu 23</a>
						<ul class="animated fadeIn" data-wow-duration="3s">
							<li><a href="#">menu 21</a></li>
							<li><a href="#">menu 22</a>
								<ul class="animated fadeIn" data-wow-duration="3s">
									<li><a href="#">menu 21</a></li>
									<li><a href="#">menu 22</a></li>
									<li><a href="#">menu 23</a></li>
									<li><a href="#">menu 24</a></li>
								</ul>
							</li>
							<li><a href="#">menu 23</a></li>
							<li><a href="#">menu 24</a></li>
						</ul>
					</li>
					<li><a href="#">menu 24</a></li>
				</ul>
			</li>
			<li><a href="#">menu 3</a></li>
			<li><a href="#">menu 4</a></li>
		</ul>
	</nav>
</body>
</html>

 

آموزش طراحی و ساخت منو های آبشاری

 

سعید شوق علی

لیسانس مهندسی نرم افزار - علاقه مند به زبان های برنامه نویسی تحت وب و کارهای گرافیکی

مطالب مرتبط

دیدگاهها

نظر: