در این قسمت از فیلم آموزش 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 استفاه نکردم .
خیلی خوب بود آموزشتون خیلی ممنون