منو وب سایت

منوی های فانتزی

چند نکته یواشکی

  • این منوها رو من تقریبا سه سال پیش ساختم پس از لحاظ performance تاییدشون نمی کنم. صرفا اینجا برای دوستان معرفی شده تا ایده بگیرند. البته بهینه کردنشون هم کاری نداره به مرور وقت کنم درستشون می کنم.
  • من طراح نیستم. این ها رو اون زمان تصویرشون رو دیدم و یا یهویی از یه جایی ایده گرفتم و به HTML و CSS تبدیل کردم.
  • استفاده از این منوها در هر گونه پروژه ای کاملا آزاده.

 

1. Glass Menu

 

See the Pen Menu by Mojtaba Seyedi (@seyedi) on CodePen.


 

2. Khafan Menu

 

See the Pen Khafan Menu by Mojtaba Seyedi (@seyedi) on CodePen.

 

3. Combadi Navigation

 

See the Pen Navigation by Mojtaba Seyedi (@seyedi) on CodePen.


 

4. Hidden Navigation

 

See the Pen Hidden navigation by Mojtaba Seyedi (@seyedi) on CodePen.


 

5. Toggle Menu

 

See the Pen Toggle menu by Mojtaba Seyedi (@seyedi) on CodePen.


 

6. Flat Navigation

 

See the Pen Flat Navigation by Mojtaba Seyedi (@seyedi) on CodePen.


 

7. Ribbon Menu

 

See the Pen Ribbon Menu by Mojtaba Seyedi (@seyedi) on CodePen.

 

8. Shader Menu

 

See the Pen Shader Menu by Mojtaba Seyedi (@seyedi) on CodePen.


 

9. Steering Menu

 

See the Pen Steering menu by Mojtaba Seyedi (@seyedi) on CodePen.


 

10. Quick Menu

 

See the Pen Quick Menu by Mojtaba Seyedi (@seyedi) on CodePen.

 

11. Share Menu

 

See the Pen Share menu by Mojtaba Seyedi (@seyedi) on CodePen.

 

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

مطالب مرتبط

55 دیدگاه برای “منوی های فانتزی”

  7. عالی بود . از مطالب بسیار مفیدتون مچکرررررم . همه منو ها عالی و کاربردی هستن من 7 رو بیشتر دوست داشتم

    پاسخ

  11. خدایی هیچی ندارم بگم…رفیقم هی میگه css 3 خیلی فراتر از اون چیزیه که ما فک میکنیم…من محل نمیذاشتم…الان میفهمم چی میگه

    پاسخ

  13. خیلی عالی بودن
    در اون منوی اول، اون مثلث کوچیکه زیر هر آیتم چطوری ساخته شده؟ میشه یکم دقیق بگین. نتونستم خوب متوجه بشم

    پاسخ

  14. سلام

    واقعا کارتون عالیه …

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

    آیا واقعا CSS3 می تونه جای جاوا اسکریپت رو بگیره ؟

    پاسخ

    1. سلام ممنون از شما و با تشکر از پیامتون

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

      ولی خیلی کوتاه عرض کنم که اولا css3 نگیم بگیم css. چون اون فقط یک سطح از css هستش و نه یک ورژن و این حرفا. البته می تونیم بگیم CSS3 ولی با این آگاهی.

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

      حالا مثلا توی بحث انیمیشن CSS بعد از اضافه شدن سطح سه خیلی قوی شد اما هنوز خیلی متحرک سازی ها هستش که امکانش با CSS نیست.

      و حالا نکته ای که چند درصدی به خاطرش شما این سوال رو پرسیدین و اونم تعاملی هستش که توی بعضی از منوهای بالا وجود داره. مثلا ما مدیریت کلیک کردن رو با CSS کنترل می کنیم:

      اینکارا انجام دادنش حتی گاهی با CSS مضر هستش و باید با همون جاوااسکریپت نوشته بشه. توضیحش مفصله البته.

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

      پاسخ

      1. جاوا اسکریپت به نظر زبان گسترده ای میاد . فیلم های آموزشی که دیدیم ، “کاربردی” نیست ، فقط قواعد رو یکی یکی توضیح میده !!!! به نظر شما “بهترین” راه برای یادگیری جاوا اسکریپت چیه ؟

        پاسخ

        1. مثل یادگیری بقیه چیزا باید شروع به ساختن کنید. و در حین اون بنا به نیازایی که واستون به وجود میاد مطالعه کنید.

          اگر دنبال منبع فارسی خوبی میگردین من راستش نمیشناسم. انگلیسی هم اینو یک نگاه بکنید. jstherightway.org

          پاسخ

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

        حالا اگر یک انیمیشن رو بتونیم هم با css بسازیم هم با جاوااسکریپت ، کدوم رو انتخاب کنیم ؟

        پاسخ

        1. خواهش میکنم تاجایی که سوادم قد بده خوشحال میشم کمک کنم.

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

          اگر با هر دو می تونیم بسازیم. بهتره که با CSS ساخته بشه. یک بحثی هست به اسم progressive enhancement که یکی از قسمت هاش همینه. یعنی هرچیزی می خوای بسازی اول با HTML تاجایی که می تونی بسازش بعد برای بهبودش از CSS کمک بگیرد و در نهایت اگر هنوز هم کار داشت از js کمک بگیر. چرا؟

          چون شاید کاربر js رو توی مرورگرش غیرفعال کرده بود. حالا این یه بحثشه. بحث های مربوط به performance هم هستش.

          در کل اگر واقعا با هر دو نتیجه یکسانه با CSS بسازین. (البته مراقب پشتیبانی مرورگرها هم باشید)

          پاسخ

  15. با سلام و احترام
    قبل از هرچیز یک سپاس و تشک ویژه از مدیریت سایت بابت آموزشهای فوق العادتون….

    یه سوال داشتم بابت منوی اول… اونم اینکه اصلاً کارایی قطعه کدهای زیر رو تو منوی اول نفهمیدم :////

    li a:after {
    display : block;
    content : ”;
    position : absolute;
    top : 100%;
    left : 42%;
    border-style : solid;
    border-color : transparent;
    border-width : 5px 5px 0 5px;
    transition : all .4s;
    }
    li:hover a:after {
    border-color : white transparent transparent transparent;
    transition : all .4s;

    پاسخ

      1. واقعاً ممنون بابت پاسخگویی سریعتون….
        ببخشید دوباره میپرسم… ولی تفسیر اینکه چطور همچین کدهایی و بوردر اونا باعث تشکیل مثلث میشه رو متوجه نشدم.
        اگر امکان توضیح وجود داره ممنون میشم کمکم کنید.

        پاسخ

  18. بسیار زیبا
    من به تازگی شروع به یادگیری برنامه نویسی کردم. و فقط html و css رو یاد گرفتم.
    شماره 1، 4، 7 و 9 بسیار عالی بودن.
    همچنین بقیه عالی بودن
    ممنون از زحمت شما

    پاسخ

  20. سلام . ممنون از این همه زحمات شما.
    یک سوال:
    این ایکون ها توی منوی دوم توی کد های من نمایش داده نمیشه . ینی من همین کدها رو تو ادیتور خودم کپی کردم آیکون ها نمایش داده نشد

    پاسخ

  23. سلام . چرا فرمودید که از لحاظ performance این منوهای فانتزی را تایید نمی کنید . مگر برای بهینه کردن شان چه کاری باید که بکنید ؟ اصلا چه جوری میشه بهینشون کرد ؟ ایا سایت خاصی وجود دارد جهت انجام این کار ؟

    پاسخ

    1. سلام، مثلا انتخابگرهاشون شاید پیچیده و بهینه نباشه، یا شاید ترنزیشن هایی که دارند روی ویژگی هایی مثل top و … باشه که از نظر کارایی درست نیست. باید با transform نوشته شده باشند و …
      سایت خاصی وجود نداره، باید مطلب بخونید.

      پاسخ

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

    پاسخ

  28. با سلام در صورتی که بخوام از این کدها استفاده بکنم . مشکلی هست ؟ چون واقعا کد های محشری هست و لذت بردم.

    پاسخ

      1. شما که بیش تر در این زمینه وب و برنامه نویسی اسکریپت آشنا هستی !!! برای برنامه نویسی بلاک چین چیکار کنم ؟ یعنی از کجا شروع کنم ؟ البته بلاک چین نه کار با ارز دیجیتال ، منظورم اتریوم و بیت کوین نیست

        پاسخ

  29. آقای سیدی نمیدونم چطور ازتون تشکر کنم؟💖💖
    یا من تازه کارَم یا این منوها با روح و روان من بازی میکنن😂😍
    خیلی ممنون از کد هایی که رایگان در اختیار ما میزارید🙏🌹

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *