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

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

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

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

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

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

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

کد HTML :

کد CSS :

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

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

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

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

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

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

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

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

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



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