افکت بسیار زیبا برای منو ( Gooey Effect ) ( نمونه 1 )

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۱۲ اسفند ۱۳۹۳

در این مطلب و مطالب بعدی منوهایی بسیار زیبا رو براتون قرار دادم که در اون یک تکنیک بسیار جذاب استفاده شده است و این منو رو بسیار جالب میکند.

Gooey_Effect

میبینید که در ابتدا یک دایره وجود داره و با کلیک بر روی اون ، با افکت بسیار زیبایی زیر منوها باز میشن و با کلیک مجدد بر روی علامت X بسته میشن.

بدلیل اینکه کدهای این منو یک مقدار زیاد بود ، اونهارو در انتهای مطلب قرار دادم تا بتونین دانلود کنید.

در این مطلب از font-awesome استفاده شده است.

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

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

Source

نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

پایا

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

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

خواهش میکنم
موفق باشید

پایا

میشه لطف کنید داخل CSS قسمت Font @ بجای نام فوت و Format چی باید نوشت تا متن وارد کرد در صورتیکه قسمت وارد کردن را مشخص کنید از لطف شما بینهایت ممنون میشم. با کمال احترام و سپاس

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

دوست عزیز بجای کد زیر در HTML :

 <a href="#" class="menu-item" rel="nofollow"> <i class="fa fa-bar-chart"></i> </a>
  <a href="#" class="menu-item" rel="nofollow"> <i class="fa fa-plus"></i> </a>
  <a href="#" class="menu-item" rel="nofollow"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item" rel="nofollow"> <i class="fa fa-envelope"></i> </a>
  <a href="#" class="menu-item" rel="nofollow"> <i class="fa fa-cog"></i> </a>

کد زیر رو قرار بدین و متنهای مورد نظر رو تغییر بدین :

 <a href="#" class="menu-item" rel="nofollow">متن 1</a>
<a href="#" class="menu-item" rel="nofollow">متن 2</a>
<a href="#" class="menu-item" rel="nofollow">متن 3</a>
<a href="#" class="menu-item" rel="nofollow">متن 4</a>
<a href="#" class="menu-item" rel="nofollow">متن 5</a>

اون @font رو میتونین حذف کنید و استایل مورد نظرتون رو اعمال کنید.
موفق باشید

پایا

با سلام و خسته نباشید
بجای علامت خاص از نوشته هم می توان در منو استفاده کرد.
با تشکر

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

بله میشه
میتونین امتحان کنید
موفق باشید

بردیا راستین

برای ورژن جدید پنل چت رومم ازش استفاده میکنم فقط موندم صفحات رو چجوری اضافه کنم منظور این که ایده خوبی ندارم براش مثلا با کلیک رو هر کدوم اسکرول بشه پایین یا یه صفحه جدید باز بشه نمیدونم شما ایده نداری ؟

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

اون اسکرول بهتره
موفق باشی

نیم سکه

خیلی زیبا بود .

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

نمونه های دیگه ای هم قرار خواهد گرفت
موفق باشید

Mr. MiM

خیلی خوب بود ، مرسی

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

خواهش میکنم

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل