منو وب سایت

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

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

  • این منوها رو من تقریبا سه سال پیش ساختم پس از لحاظ 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.

 

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

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

  1. سلام

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

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

    آیا واقعا 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 بسازین. (البته مراقب پشتیبانی مرورگرها هم باشید)

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

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

    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. واقعاً ممنون بابت پاسخگویی سریعتون….
        ببخشید دوباره میپرسم… ولی تفسیر اینکه چطور همچین کدهایی و بوردر اونا باعث تشکیل مثلث میشه رو متوجه نشدم.
        اگر امکان توضیح وجود داره ممنون میشم کمکم کنید.

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