illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

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

کدهای HTML :

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

کدهای CSS :

کدهای Javascript :

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

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

Source

نوع کد رايگان

دیدگاه ها 7 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    امیر(۷ دی ۱۳۹۳)

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

    • ‏‏
      محمد اسفندیاری(۷ دی ۱۳۹۳)

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

    • ‏‏
      محمد اسفندیاری(۷ دی ۱۳۹۳)

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

    • ‏‏
      محمد اسفندیاری(۷ دی ۱۳۹۳)

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

  • ‏‏
    محمد(۱۰ دی ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram