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


آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش سوئیفت SWIFT آموزش سوئیفت Swift برنامه نویسی اپل

آموزش برنامه نویسی اندروید استودیو  آموزش برنامه نویسی اندروید استودیو  

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

درگاه پرداخت

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,523آموزش نمایش موقعیت کاربران در وردپرس تاریخ : 1393/05/30
6,954اسکریپت آجاکس آزمون آنلاین فارسی در سایت تاریخ : 1393/02/13
3,954اسکریپت راه اندازی شبکه اجتماعی crea8socialPRO نسخه 6.2 تاریخ : 1395/05/25
1,653اسکریپت مدیریت وظایف Tasked نسخه 1.0 تاریخ : 1394/08/25
777اسکریپت فارسی تقلب بازی های آنلاین تلگرام Telegram Games Cheat تاریخ : 1395/09/8
7,785اسکریپت حرفه ای حراجی آنلاین eBay تاریخ : 1392/11/4
1,633اسکریپت مدیریت نسخه پشتیبان دیتابیس تاریخ : 1392/08/7
2,895دانلود قالب مجله ای وردپرس True Mag نسخه 4.2.8.2 تاریخ : 1395/04/25
1,631اسکریپت مدیریت پروژه Freelance Cockpit 2 نسخه 2.3.5 تاریخ : 1395/03/28
1,942اسکریپت ابزار وبمستر Web Studio نسخه 1.3 تاریخ : 1393/07/8
13,856ابزار دعوت کاربر به کانال تلگرام تاریخ : 1395/03/6
3,042اسکریپت رایگان سایت ۴shared به صورت فارسی تاریخ : 1393/02/11
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب