در این قسمت از فیلم آموزش CSS نحوه ساخت منوی عمودی یا Navigation Bar آموزش داده شده است که کاربرد زیادی در طراحی سایت دارد .
ساخت منوی عمودی در CSS
از منوها برای این استفاده می کنیم که کاربران به راحتی به مطالب سایت ما دسترسی داشته باشند و سردرگم نشوند و در این منوها از یک لینک استفاده می کنیم تا با کلیک بر روی اون ما رو به قسمتی از سایت که می خوایم ببره .
برای ساخت منوها از تگ <ul> استفاده می کنیم ، همان طور که می دانید از این تگ برای ساخت لیست های نامرتب استفاده می کنیم .
سورس کد HTML :
<!Doctype html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ul> <li><a href="#" class="fix">صفحه اصلی</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;
width: 200px;
border: 1px solid gray;
font-size: 18px;
}
li{
margin: 3px;
text-align: center;
border-bottom: 1px solid gray;
}
li:last-child{
border-bottom: none;
}
li a{
background-color: #f1f1f1;
display: block;
text-decoration: none;
padding: 8px 6px;
}
li a:hover{
background-color: #555;
color: white;
}
.fix{
background-color: orange;
color: white;
}
اگر کد های بالا را اجرا کنید منوی عمودی را خواهید دید .
حالا برای ساخت منوی عمودی که ثابت باشه یعنی با اسکرول کردن مطالب سایت منوی عمودی سر جای خودش باقی بمونه باید از Position استفاده کنیم ، برای این کار کافیست کد های زیر را به کدهای قبلی اضافه کنید :
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
width: 25%;
height: 100%;
font-size: 18px;
position: fixed;
overflow: auto;
}
با این کار منوی شما ثابت باقی می ماند . برای مطالبی هم که می خواهید در کنار منوی عمدی ظاهر شود می توانید آن ها را در یک تگ div قرار دهید و با استفاده از Float آن را در سمت چپ یا راست منوی عمودی قرار دهید .
توضیحات بیش تر در فیلم آموزش CSS داده شده است .
در جلسه بعد نحوه ساخت منوی افقی آموزش داده خواهد شد .
سلام و درود چطور در کنار منوی عمودی منوی افقی هم داشته باشیم؟
خیلی خوب و کاربردی بود
تشکر
عالی بوووود
ممنون و سپاس از آموزشتون
فقطاگر کمی کیفیت صدا بهتر میبود ، دیگ عالیِ عالی میشد !
سلام
سعی میکنیم در ویدیو های بعدی کیفیت رو بالا ببریم .