در این بخش از آموزش css می خواهیم به سراغ ساخت منوی افقی با html,css برویم.
پیشنهاد می کنم ابتدا دستورات html,css را بدانید سپس به سراغ ساخت منوی افقی با html,css بیایید.
در قسمت پایین ، کد کامل منوی افقی با html,css را مشاهده می کنید. این کد را در یک فایل html کپی کرده و سپس آن را اجرا کنید.
حتما پسوند فایل ها را در ویندوز فعال کنید در غیر این صورت احتمال دارد که فایل html با پسوند txt ذخیره شود و اجرا نشود.
با استفاده از این کد یک منوی افقی ساده ایجاد می کنید. کد بسیار ساده و قابل فهم می باشد.
در قسمت پایین کد html منوی افقی را مشاهده می کنید. در این قسمت ul را مشاهده می کنید . معمولا برای ساخت منوی افقی یا عمودی از ul استفاده می شود. سپس با کدهای css سعی می کنیم منو را زیبا کنیم. کدهای html به تنهایی هیچ جذابیتی ندارد و کارایی خاصی ندارد.
معمولا تگ a در بین تگ li قرار می گیردتا لینک ها بوجود بیاید. از منوها در تمام سایت ها استفاده می شود. در قسمت های بعد با منوهای حرفه ای تر آشنا خواهید شد.
در این آموزش سعی کرده ایم ساخت یک منو افقی ساده را آموزش دهیم تا شما ابتدا با ساخت منو آشنا شوید و سپس مباحث پیشرفته تر مطرح شود.
در قسمت پایین کد css را می بینید. کد css را در قسمت head قرار دهید. در مثال بالا و کدکامل ، نحوه استفاده از کدهای css را مشاهده می کنید.
کدهای css منوی افقی در بین تگ style قرار می دهیم.
منو افقی با کدهای css جذاب می شود. با دادن استایل به ul و a منو بوجود می آید.
نویسنده : هدایت عباسی