تبلیغات
طراحی و بهینه سازیمشاهده


هاست

آموزش طراحی منو افقی برای وردپرس

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس

در این آموزش قصد طراحی منو افقی وردپرس را با  html5 و css3 داریم.طراحی این منو به این صورت می باشد که ابتدا با استفاده از تگ های html جایگاه و آیتم های منو را ایجاد کرده و سپس با استفاده از css استایل و رنگ بندی های مورد نیاز را بر روی این منو اعمال می کنیم.

آموزش طراحی منو افقی برای وردپرس

 

برای زیبا تر شدن و خوانا شدن متن آیتم های منو, از فونت BKoodakBold استفاده می کنیم.این فونت را با استفاده از خاصیت font-face درون css3 فراخوانی می کنیم.در انتهای آموزش فایل فونت ها را می توانید دانلود کنید که اگر بخواهید از این فونت استفاده کنید بایستی پوشه فونت را هم درون پروژه خود قرار دهید.

شروع کار:

ابتدا کدهای مربوط به html را درون بدنه صفحه خود قرار دهید.برای طراحی منو علاوه بر تگ های div از تگ nav هم استفاده شده است که این خصوصیت مربوط به html5 می باشد.درون تگ ul=clearfix هم تابع فراخوانی موضوعات وردپرس را قرار می دهیم.

نکته :اگر بخواهید این منو را برای سایت هایی غیر از وردپرس استفاده کنید تنها کافی است به جای تابع موضوعات وردپرس تگ های li قرار دهید.

 

بقیه دستورات css منو:

در کدهای css این منو از gradient یا (تدارج رنگ) و transition یا (فاصله زمانی) استفاده شده است و چون ممکن است بعضی از مرورگر های قدیمی از این ویژگی ها پشتیبانی نکنند,ما برای هر مرورگر این کد مربوط به آن را قرار دادیم,پس برای همین حجم کدها زیاد شده است.

هنگامی که شما برای زیر منو ها هم ,زیر منو قرار دهید به صورت زیر نمایش داده می شوند:

آموزش طراحی منو افقی برای وردپرس

دانلود


ریپکونت خدمات وب/ فروش اسکریپت/ سامانه پیام کوتاه رایگان / خدمات رایگان / مشاور کسب و کار


مطلب مفیدی بود ؟
کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
9,298قالب فروش اکانت Nod32 به صورت HTML تاریخ : 1392/12/11
828ایجاد جستجوگر پیشرفته در وردپرس با افزونه Algolia تاریخ : 1398/02/29
2,407تغییر رنگ وضعیت نوشته ها در پیشخوان وردپرس تاریخ : 1395/12/3
20,461اسکریپت تبلیغات رایگان ایستگاه تاریخ : 1393/02/26
7,472افزونه طراحی و سفارشی سازی تی شرت در ووکامرس Custom T-Shirt Designer نسخه 2.0.8 تاریخ : 1397/12/3
3,446اسکریپت بازی آنلاین خرچنگ حیله گر Tricky Crab تاریخ : 1396/09/7
3,436دانلود قالب وردپرس مجله خبری ورزشی Sportica تاریخ : 1394/12/2
816حذف لینک دهی خودکار به تصاویر در وردپرس تاریخ : 1398/02/11
5,538افزونه ایجاد لایت باکس حرفه در وردپرس ilightbox نشخه 1.6.4 تاریخ : 1396/09/13
4,807اسکریپت راه اندازی شبکه اجتماعی phpDolphin نسخه 2.0.7 تاریخ : 1394/12/24
1,148۱۰ آمار جالب از دنیای وردپرس که تا به حال نشنیده‌اید تاریخ : 1397/11/3
5,410افزونه دریافت خودکار اطلاعات فیلم و سریال IMDBi نسخه 2.0.0 تاریخ : 1394/11/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب