SVG فنری و انعطاف پذیر ( نمونه اول )

- visibility ٧ mode_comment

در این مطلب و مطالب بعدی ، تعدادی نمونه کد زیبا برای SVG در اختیارتون میزارم که بصورت فنری و انعطاف پذیر هستند.

در این مثال اگر بر روی آیکون مورد نظر کلیک کنید ، منو با حالت زیبایی باز میشه و با کلیک مجدد منو بسته خواهد شد.

کدهای HTML :

در این مطلب از snap.svg-min.js و classie.js استفاده شده است.

کدهای CSS :

کدهای Javascript :

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

Source

comment دیدگاه کاربران
امیر

خسته نباشین
به نظر من اگه یک بار سایت codrops.com رو معرفی کنید بهتره تا اینکه تنها کد دموهاش رو جدا جدا بزارید. میشه با رفتن به پست مربوطه همه ی دمو هارو یکجا دانلود کرد. حداقل آموزش یا توضیحی در مورد کدها بدید تا بتونیم بهتر ازشون استفاده کنید و بتونیم در اونها تغییری ایجاد کنیم.

محمد اسفندیاری

دوست عزیز اولا که خیلی ها نیاز به آموزش ندارن و صرفا میخوان کپی و Paste کنن…….دوما این سایت فیلتر هست…..سوما این بخش کد هست و نه بخش آموزش…….دلیل بعدی اینکه اینها صرفا جهت ایده گرفتن هستن……دلیل بعد اینکه همه افراد مثل شما حوصله ندارن که کل سایت رو بگردن و مطالب خوب اون رو پیدا کنن..دلیل بعد اینکه اگه سایت مربوطه رو معرفی کنم ، بعضی از افراد نمیتونن از بعضی از مطالب اون استفاده کنن ، بهمین دلیل من اونارو جدا جدا میکنم تا کارشون راحتتر باشه……دلیل بعد اینکه شما میتونین بفهمین که یک ویژگی یا کدی رو بلد نیستین و بعد میتونین در نت در مورد اون سرچ کنین….دلیل بعد اینکه در آخر هم لینک به سایت اصلی دادم و copyright رو رعایت کردم….
موفق باشید

محمد اسفندیاری

در ضمن دلیل دیگه اینکه آموزش این موارد خیلی سخته نیاز به چندین آموزش طولانی داره که کسانی که میخوان یاد بگیرن باید با تمامی موارد CSS3 و … آشنایی کامل داشته باشن……من خودم افرادی رو میشناسم که فقط نیاز به خود کد دارن و نیاز به باطن اون ندارن…….ضمنا جدا کشیدن یک نمونه از این سایتها کار آسونی هم نیست و برای افرادی که جدیدا آشنا شدن سخته که از اونا استفاده کنن…..اینارو هم در نظر بگیرین……حالا هر کدوم رو که بلد نبودین میتونین در انجمن مطرح کنین و یا همینجا بپرسین تا کمکتون کنیم…..هدف من یادگیری بیشتر ویژگی های جدید هست….ضمنا فقط سعی میشه موارد خیلی خوب این سایت در اینجا قرار بگیره…..امیدوارم دلایلم قانع کننده باشه……موفق باشید

محمد اسفندیاری

اینم بگم که آدرس دقیق این سایت http://tympanus.net/codrops هست

محمد

اگه میخواید آموزش بدید قشنگ بیاین کدها رو بررسی کنین تا با خواص جدید css آشنا بشیم و تو پروژه ها اون رو بکار بگیریم گمان نکن صرف قرار دادن لینک دانلودشون کار چندان پیچیده ای باشه . از این نمونه سایت ها زیاده که کد آماده + دمو میزارن و بدون توضیح .مهم این هستش که شما شرح کد کنین اون موقع هستش که کار خیلی ارزش پیدا میکنه هر چند الآن هم زحمت کشیدید خسته نباشید

محمد اسفندیاری

دوست عزیز شما ببینید این کدهارو هر جاشو که متوجه نشدین در انجمن و همینجا بپرسین تا بهتون جواب داده بشه……با این کار یکم بیشتر درگیر میشین و بهتر یاد میگیرین……یا علی

محمد اسفندیاری

ضمنا اینجا بخش کد هست ، بخش آموزش جداست
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.