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

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

فیلم آموزش CSS – ساخت Navigation bar یا منوی عمودی با CSS

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

ساخت منوی عمودی در CSS

از منوها برای این استفاده می کنیم که کاربران به راحتی به مطالب سایت ما دسترسی داشته باشند و سردرگم نشوند و در این منوها از یک لینک استفاده می کنیم تا با کلیک بر روی اون ما رو به قسمتی از سایت که می خوایم ببره .

برای ساخت منوها از تگ <ul> استفاده می کنیم ، همان طور که می دانید از این تگ برای ساخت لیست های نامرتب استفاده می کنیم .

سورس کد HTML :

کد CSS :

اگر کد های بالا را اجرا کنید منوی عمودی را خواهید دید .

حالا برای ساخت منوی عمودی که ثابت باشه یعنی با اسکرول کردن مطالب سایت منوی عمودی سر جای خودش باقی بمونه باید از Position استفاده کنیم ، برای این کار کافیست کد های زیر را به کدهای قبلی اضافه کنید :

با این کار منوی شما ثابت باقی می ماند . برای مطالبی هم که می خواهید در کنار منوی عمدی ظاهر شود می توانید آن ها را در یک تگ  div قرار دهید و با استفاده از Float آن را در سمت چپ یا راست منوی عمودی  قرار دهید .
توضیحات بیش تر در فیلم آموزش CSS داده شده است .

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

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

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

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

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

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


  1. Amir گفت:

    ممنون و سپاس از آموزشتون
    فقطاگر کمی کیفیت صدا بهتر میبود ، دیگ عالیِ عالی میشد !

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