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

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumافزایش تعداد فالور اینستاگرام - بسیار بسیار ارزان214daymobile
iconforumافزونه کوتاه کننده لینک12193AHF-victory
iconforumلایسنس ویژوال کامپوسر649tiger2
iconforumراهنمای در مورد چند اسکریپت214tiger2
iconforumنرخ های جدید اینترنت همراه اول اعلام شد06AynaZ
iconforumخرید شریکی اسکریپت3207AynaZ
iconforumدرخواست هاست اسپانسری12221AynaZ
iconforumتغییر نکردن فونت سایت در وردپرس470AynaZ
iconforumطراحی492AynaZ
iconforumتغییر دامین در ورپرس9111AynaZ
iconforumدر پلاگین فرم تماس236AynaZ
درگاه پرداخت
درگاه پرداخت

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

CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس
آموزش طراحی منو افقی برای وردپرسReviewed by جواد on Nov 27Rating: 5.0آموزش طراحی منو افقی برای وردپرسدر این آموزش قصد طراحی منو افقی وردپرس را با html5 و css3 داریم.طراحی این منو به این صورت می باشد که ابتدا با استفاده از تگ های html جایگاه و آیتم های منو را ایجاد کرده و سپس با استفاده از css استایل و رنگ بندی های مورد نیاز را بر روی این منو اعمال می کنیم.

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

 

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

شروع کار:

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

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

 

حتما بخوانید  آموزش قرار دادن عکس در کنار نتایج گوگل

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

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

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


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1392/09/6 7 CSS / HTML , آموزش طراحی , آموزش ها , مقالات,آموزش,ترفند , وردپرس

لینک کوتاه مطلب : http://www.20script.ir/?p=1941

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
2,516اسکریپت نقد و بررسی فیلم و سریال MTDb نسخه 2.9 تاریخ : 1395/06/11
2,831اسکریپت انجمن ساز زنفورو فارسی نسخه 1.5.1 تاریخ : 1394/07/22
3,790افزونه ساخت پروفایل کاربری آسان در وردپرس User Profiles Made Easy نسخه 2.1.08 تاریخ : 1394/11/22
3,445دانلود بنر لایه باز فروش هاست آسمان آتش تاریخ : 1394/05/3
4,615اسکریپت شبکه اجتماعی SocialEngine فارسی نسخه 4.8.7 تاریخ : 1393/12/21
8,165اسکریپت فروشگاه ساز و سیستم همکاری در فروش نئو پرشیا تاریخ : 1393/02/28
3,776دانلود قالب شخصی بسیار زیبا پورقناد تاریخ : 1393/03/18
1,446قالب وبلاگ دو ستونه عاشقانه آرزوهای من برای بلاگفا تاریخ : 1394/07/16
4,193تگ های بسیار زیبا با CSS 3 تاریخ : 1392/07/29
2,255اسکریپت لیست سایت های برتر Top Sites Directory تاریخ : 1393/05/22
1,862اسکریپت مدیریت رستوران ها با Karenderia فارسی نسخه 3.2 تاریخ : 1395/04/25
3,047اسکریپت رایگان لینک باکس اتوماتیک فارسی تاریخ : 1393/02/15
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب