دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » فیلم آموزش CSS – ساخت منوی افقی یا نوار پیمایش افقی با CSS
فیلم آموزش CSS - ساخت منوی افقی یا نوار پیمایش افقی با CSS

فیلم آموزش CSS – ساخت منوی افقی یا نوار پیمایش افقی با CSS

در این قسمت از فیلم آموزش CSS همانند جلسه قبل که نحوه ساخت منوی عمودی آموزش داده شد ، در این جلسه نحوه ساخت منوی افقی آموزش داده شده است .

نحوه ساخت منوی افقی  :

در بیش تر سایت هایی که دیده اید از منوی افقی استفاده می کنند مثل سایت ما که از منوی افقی استفاده کردیم ، منوی افقی به کاربر کمک می کند تا سریع تر به مطالب دسته بندی شده دسترسی داشته باشد و دچار سر درگمی نشود .

برای ساخت منوی افقی می توانید از سورس کد زیر استفاده کنید :

کد HTML :

<!doctype html>
<html>
	<head>
		<title>Web30ty</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<ul>
			<li><a href="#" >صفحه اصلی</a></li>
			<li><a href="#">تماس با ما</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">ثبت نام</a></li>
		</ul>
	</body>
</html>

کد CSS :

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background-color: orange;
	overflow: auto;
}
li{
	display: inline;
	float: right;
	border-left: 1px solid #111;
}
li:last-child{
	border-left: none;
}
li a{
	display: block;
	text-decoration: none;
	padding: 10px;
}
li a:hover{
	background-color: #555;
	color: white;
}

حالا برای این که یکی از <li> مثل ثبت نام را به سمت چپ ببرید کافیست که یک کلاس به آن بدهید و در CSS ویژگی float آن را برابر left قرار بدید . این رو هم توی فیلم آموزشی توضیح داده ام .

حالا برای این که منوی شما به صورت ثابت باشد کدهای زیر را در CSS به ویژگی ul اضافه کنید  :

ul{
	position: fixed;
	top:0;
	width: 100%;
}

برای این که منوی افقی یا همه عناصر HTML رو به صورت Responsive به معنی واکنشگرا در بیاوریم یعنی در تلفن همراه و تبلت ها هم منوی افقی به خوبی نمایش داده شود در CSS از media@ استفاده می کنیم در استفاده از این ویژگی اول مقدار کمترین عرض را مشخص می کنیم و بعد مقدار بیش ترین مقداری که می خواهیم به آن استایل بدهیم را مشخص می کنیم مانند سورس کد زیر :

@media (min-width:100px) and (max-width:900px){
	ul li{
		float: none;
	}
}

در فیلم آموزشی چون من می خواستم از کوچکترین نمایشگر ها تا نمایشگرهایی که به اندازه 600px هستند اون استایل رو بگیره پس اولش از min-width استفاه نکردم .

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

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

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *