![فیلم آموزش CSS - ساخت Navigation bar یا منوی عمودی با CSS](https://web30ty.com/wp-content/uploads/Film_CSS-16-Navigation-bar.png)
در این قسمت از فیلم آموزش 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 داده شده است .
در جلسه بعد نحوه ساخت منوی افقی آموزش داده خواهد شد .
سلام و درود چطور در کنار منوی عمودی منوی افقی هم داشته باشیم؟
خیلی خوب و کاربردی بود
تشکر
عالی بوووود
ممنون و سپاس از آموزشتون
فقطاگر کمی کیفیت صدا بهتر میبود ، دیگ عالیِ عالی میشد !
سلام
سعی میکنیم در ویدیو های بعدی کیفیت رو بالا ببریم .