سون لرن • آموزش

سلام منم یه سایت دارم که وقتی صفحه میخواد لود بشه اولش خیلی بد میاره بنظرتون مشکلش کجاست چندباریم به برنامه نویس سپردم ولی دلیلشو نفهمیده بنظر شما مشکل مال Css یا مال Html ؟ آدرس سایتم : vestamusc.ir ...

در این قسمت میخوام یک کد (xa0Rings Navigation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Rings Navigation همونطور که دیدید یک دایره با متن Menu در گوشه بالا و سمت راست صفحه قرار داده شده و با کلیک بر روی اون یک منوی حلقه ای زیبا با تعدادی زیرمنو نمایش داده میشه. شما میتونین از این مورد ایده گرفته و از اون در سایتتون استفاده کنید. برای مشاهده کدهای مربوط به این نمونه میتونین وارد بخش View Source بشید. برای ساخت این نمونه از CSS Animation استفاده شده است و با...

در این قسمت میخوام یک کد ( Nested Dropdown Navigationxa0) جالب رو در اختیارتون بزارم. توضیحات مربوط به کد همونطور که دیدید یک منو قرار داده شده و زمانی که بر روی اون کلیک میکنید زیر منوی سطح اول باز میشه. گزینه مربوط به Shop یک آیکون >xa0داره که با کلیک بر روی اون زیرمنوهای سطح دوم نیز با افکتی زیبا باز میشن. این کار با استفاده از CSS خالص انجام شده است و هیچ کد Javascript در اون استفاده نشده است. شای...

در این قسمت میخوام یک کد ( fullscreen overlay navigationxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک آیکون همبرگر در بالا و سمت راست قرار داده شده و با کلیک بر روی اون یک منوی تمام صفحه نمایش داده میشه. میتونین از این کد در سایتتون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتها...

در این قسمت میخوام یک کد ( following subnavxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منو ساخته شده و زمانی که بر روی آیتم های اون هاور میکنید، خط موجود به دنبال ماوس شما حرکت میکنه و زمانی که بر روی آیتم Skills هاور میکنید، یک زیر منو بصورت زیبا نمایش داده میشه. همه این موارد با استفاده از...

در این قسمت میخوام یک کد ( Menu by yoannxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک گزینه قرار داده شده و زمانی که بر روی اون کلیک میکنید، یک زیر منوی زیبا برای اون نمایش داده میشه و میتونین از اون ایده گرفته و یا در سایتتون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( pure CSS 3D Radial Menuxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی دایره ای و شعاعی پیشرفته و جالب قرار داده شده و میتونین از اون ایده گرفته و استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

در این قسمت میخوام یک کد ( Ionic Side Menu Transitionsxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی جانبی در سمت چپ قرار گرفته و انیمیشنهای زیبایی برای اون در نظر گرفته شده. برای دیدن و عوض کردن انیمیشن ها بر روی دکمه های موجود در پایین صفحه کلیک کنید. مثلا اگر بر روی wave کلیک کنید، منو بصورت موجی نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source ...

در این قسمت میخوام یک کد ( Bubble Menuxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی حبابی و بسیار زیبا ساخته شده و قرار گرفته و زمانی که بر روی اون هاور میکنید بصورت بسیار زیبا از هم جدا میشن و زیر هم قرار میگیرن و دوباره با بیرون بردن ماوس از روی اونا، سر جای اولشون بر میگردن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! ...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک منو ثابت و عمودی که واکنشگرا هست رو میسازه و میتونین از اون استفاده کنید. میتونین بر روی دمو در لینک مورد نظر کلیک کنید، تا نتیجه کار رو ببینید. برای شروع وارد سایتxa0vertical-fixed-navigation-2xa0بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! بخوانید...

0 26 ۲۴ اردیبهشت ۹۵ به نام خدا و سلام. در خدمت شما هستیم با قسمت اول از آپدیت های دوره مجازی طراحی قالب حرفه ای وردپرس. در این جلسه قصد داریم تا منوی کشویی شورتکد ها رو در ویرایشگر وردپرس پیاده سازی کنیم. در ابتدا کدهای مورد نظر برای اضافه کردن یک پلاگین tinymce (ویرایشگر xa0وردپرس) رو بررسی می کنیم و سپس با نوشتن کدهای مریوط به گزینه های منو شورت کدهای دلخواه رو که قبلا در سیستم تعریف کردیم رو به منوی مورد نظر اضافه می کنیم. این کار باعث استفاده آسان تر از شورت کدهای تعریف شده برای کاربر نها...

0 22 ۱۷ اردیبهشت ۹۵ به نام خدا و سلام. در خدمت شما هستیم با جلسه سیزدهم از دوره مجازی پلاگین نویسی وردپرس. در این جلسه قصد داریم تا وارد بخش مدیریت پلاگین شویم و برای شروع هم منوی مدیریت پلاگین را ایجاد می کنیم. در ابتدا با تابع add_menu_page آشنا خواهیم شد و پارامتر های مختلف آن را بررسی خواهیم کرد. سپس این تابع را پیاده سازی خواهیم کا تا منوی مدیریت پلاگین را ایجاد کنیم. باری دوستانی که تازه کدهای وردپرس را شروع کرده اند مطمئنا جذابیت زیادی خواهد داشت. در این جلسه خواهیم دید : معرفی تابع ad...

در این قسمت میخوام یک کد ( Responsive Menu Appxa0) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی چند جزئی زیبا قرار داده شده و با هاور کردن بر روی هر قسمت، اون قسمت بزرگ میشه و محتویات اون نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید...

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 600px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-heig...

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 700px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-heig...

(function() { /** * checks if a number is Odd */ function isOdd(n) { retu Math.abs(n % 2) == 1; } /** * retus a random number between min and max */ function randomIntFromInterval(min,max) { retu Math.floor(Math.random()*(max-min+1)+min); } var word = document.querySelector('.list__text'), playCtrl = document.querySelector('.control__button--play'), myText = new Letters(word, { // word 11 size : 390, weight : 10, color: '#E65454', duration: 0.8, fade: 2, delay: 0.1, easing: d3_ease.easeExpInO...

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 700px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-heig...

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 700px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-heig...

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 700px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-heig...

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 700px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-heig...