چند نکته یواشکی
- این منوها رو من تقریبا سه سال پیش ساختم پس از لحاظ 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.
شما هم منوهای جالبتون رو می تونید اینجا معرفی کنید.
آقا دمت گرم حال کردم ، کامل واضح و دقیق بود
خییییلی خوب بود.
ممنون جناب سیدی
من شماره 9 یعنی Steering Menu رو خیلی پسندیدم
عالی بود ، همه منو ها بستگی به موقعیت استفاده آن ، کاربردی هستند
بسیار منو های زیبا و کاربردی هستند.
ممنون از زحمات شما.
تشکر، جالب بود.
این روزا از طرح های متریال هم خیلی استفاده می کنند.
عالی بود . از مطالب بسیار مفیدتون مچکرررررم . همه منو ها عالی و کاربردی هستن من 7 رو بیشتر دوست داشتم
ممنون از همه دوستان :)
دمت گرم لذت بردیم
شماره های 1,3,5,9
اینم لینک منوی بنده:
Live view: http://codepen.io/ehsanamir…
Editor view: http://codepen.io/ehsanamir…
چقدر خوب کردی کارتو معرفی کردی. ممنون
خدایی هیچی ندارم بگم…رفیقم هی میگه css 3 خیلی فراتر از اون چیزیه که ما فک میکنیم…من محل نمیذاشتم…الان میفهمم چی میگه
جالب بود. موفق باشید :)
بسیار عالی
خیلی عالی بودن
در اون منوی اول، اون مثلث کوچیکه زیر هر آیتم چطوری ساخته شده؟ میشه یکم دقیق بگین. نتونستم خوب متوجه بشم
اگر مطالب مربوط به after یا before رو در سایت نخونید بخونید.
بعد هم این رو بررسی کنید:
https://codepen.io/chriscoy…
خیلی ممنون از لینکی که دادین
این بار کاملاً متوجه شدم داستان از چه قراره
سپاسگزارم
سلام
واقعا کارتون عالیه …
تا قبل از این که وب سایت شما رو ببینم می خواستم جاوا اسکریپت بخونم ، اما الان پشیمون شدم .
آیا واقعا CSS3 می تونه جای جاوا اسکریپت رو بگیره ؟
سلام ممنون از شما و با تشکر از پیامتون
خیلی خیلی سوالتون خوبه ولی نمیشه توی یک کامنت فقط توضیح داد به امید خدا در آینده باید این یک پست بشه
ولی خیلی کوتاه عرض کنم که اولا css3 نگیم بگیم css. چون اون فقط یک سطح از css هستش و نه یک ورژن و این حرفا. البته می تونیم بگیم CSS3 ولی با این آگاهی.
و جواب سوالتون اینکه نه نمی تونه. چون اصلا قرار نیست اینا جای همو بگیرن. دو ابزار مکمل هم هستند. و هر کدوم وظیفه خودشون رو دارند.
حالا مثلا توی بحث انیمیشن CSS بعد از اضافه شدن سطح سه خیلی قوی شد اما هنوز خیلی متحرک سازی ها هستش که امکانش با CSS نیست.
و حالا نکته ای که چند درصدی به خاطرش شما این سوال رو پرسیدین و اونم تعاملی هستش که توی بعضی از منوهای بالا وجود داره. مثلا ما مدیریت کلیک کردن رو با CSS کنترل می کنیم:
اینکارا انجام دادنش حتی گاهی با CSS مضر هستش و باید با همون جاوااسکریپت نوشته بشه. توضیحش مفصله البته.
امیدوارم تونسته باشم کمک کنم. بازم ممنون از سوال خوبتون
جاوا اسکریپت به نظر زبان گسترده ای میاد . فیلم های آموزشی که دیدیم ، “کاربردی” نیست ، فقط قواعد رو یکی یکی توضیح میده !!!! به نظر شما “بهترین” راه برای یادگیری جاوا اسکریپت چیه ؟
مثل یادگیری بقیه چیزا باید شروع به ساختن کنید. و در حین اون بنا به نیازایی که واستون به وجود میاد مطالعه کنید.
اگر دنبال منبع فارسی خوبی میگردین من راستش نمیشناسم. انگلیسی هم اینو یک نگاه بکنید. jstherightway.org
شرمنده این همه سوال می پرسم ، اگر تونستین جواب بدین.
حالا اگر یک انیمیشن رو بتونیم هم با css بسازیم هم با جاوااسکریپت ، کدوم رو انتخاب کنیم ؟
خواهش میکنم تاجایی که سوادم قد بده خوشحال میشم کمک کنم.
اینم یک بحث گسترده ای هستش. ولی خود سوالتون باعث میشه جواب کمی کوتاه تر بشه.
اگر با هر دو می تونیم بسازیم. بهتره که با CSS ساخته بشه. یک بحثی هست به اسم progressive enhancement که یکی از قسمت هاش همینه. یعنی هرچیزی می خوای بسازی اول با HTML تاجایی که می تونی بسازش بعد برای بهبودش از CSS کمک بگیرد و در نهایت اگر هنوز هم کار داشت از js کمک بگیر. چرا؟
چون شاید کاربر js رو توی مرورگرش غیرفعال کرده بود. حالا این یه بحثشه. بحث های مربوط به performance هم هستش.
در کل اگر واقعا با هر دو نتیجه یکسانه با CSS بسازین. (البته مراقب پشتیبانی مرورگرها هم باشید)
بحث جوریه که آدم نمی دونه چطور سرچ کنه . مجبور شدم بپرسم .
ممنون از توضیحات شما.
با سلام و احترام
قبل از هرچیز یک سپاس و تشک ویژه از مدیریت سایت بابت آموزشهای فوق العادتون….
یه سوال داشتم بابت منوی اول… اونم اینکه اصلاً کارایی قطعه کدهای زیر رو تو منوی اول نفهمیدم :////
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;
سلام. ممنون از شما
تکه کد اول اون مثلث کوچیک پایین هر آیتم رو بوجود میاره و تکه کد دوم باعث میشه وقتی موس روی هر آیتم میره اون مثلث ظاهر بشه.
css-tricks.ir/reference/after
https://codepen.io/chriscoy…
واقعاً ممنون بابت پاسخگویی سریعتون….
ببخشید دوباره میپرسم… ولی تفسیر اینکه چطور همچین کدهایی و بوردر اونا باعث تشکیل مثلث میشه رو متوجه نشدم.
اگر امکان توضیح وجود داره ممنون میشم کمکم کنید.
اینو ببینید:
http://www.aparat.com/v/fgxqT
slm
mikhastam bedonam axaye dakhel menu7 ro chetori be menu eafe kardid?!
سلام
برای نمایش آیکون های از font-awesome استفاده شده.
http://fontawesome.io/get-s…
سلام
من چند وقت پیش یه منو درست کرده بودم به سبک متریال
یه چیزای گرد باحالی بودن
حتما پیشنهاد میکنم ببینین و استفاده کنین
https://codepen.io/HKH12/pen/jBXZRy
بسیار زیبا
من به تازگی شروع به یادگیری برنامه نویسی کردم. و فقط html و css رو یاد گرفتم.
شماره 1، 4، 7 و 9 بسیار عالی بودن.
همچنین بقیه عالی بودن
ممنون از زحمت شما
سلام. بسیار عالیه. واقعا ممنونم
سلام . ممنون از این همه زحمات شما.
یک سوال:
این ایکون ها توی منوی دوم توی کد های من نمایش داده نمیشه . ینی من همین کدها رو تو ادیتور خودم کپی کردم آیکون ها نمایش داده نشد
سلام، از فونت آیکون font-awesome استفاده شده، باید به پروژتون اضافه کنیدش.
https://fontawesome.com
سلام . منو های خیلی قشنگی بودن . عالی بود
سلام
چطوری منو رو مثل شما کنم که وقتی به سمت بالا می ام باز رویت شه
خیلی ممنون
سلام،
این مطلب احتمالا کمکتون کنه
https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c
سلام . چرا فرمودید که از لحاظ performance این منوهای فانتزی را تایید نمی کنید . مگر برای بهینه کردن شان چه کاری باید که بکنید ؟ اصلا چه جوری میشه بهینشون کرد ؟ ایا سایت خاصی وجود دارد جهت انجام این کار ؟
سلام، مثلا انتخابگرهاشون شاید پیچیده و بهینه نباشه، یا شاید ترنزیشن هایی که دارند روی ویژگی هایی مثل top و … باشه که از نظر کارایی درست نیست. باید با transform نوشته شده باشند و …
سایت خاصی وجود نداره، باید مطلب بخونید.
سلام با تشکر از منو های زیبا و کار امدتون
ببخشید این تصاویر home و .. رو از کجا می تونم پیدا کنم.
سلام عالی بود فقط میشه منوی شماره هشت را جوری تنظیم کنید که بشه یک منوی فارسی یعنی راست چین
سلام چرا من این کد ها رو داخل پروژه م کپی میکنم درست اجرا نمیشه لطفا راهنمایی کنید.
سلام دوست عزیز ممنونم از سایت خوبت من تازه طراحی سایت رو شروع کردم میشه لطف کنید بگید چطور میتونم این منو رو تو پروژه خودم درست کنم اصلا نمی دونم cssچطور باید قرار بدم که این منو درست شه
با سلام در صورتی که بخوام از این کدها استفاده بکنم . مشکلی هست ؟ چون واقعا کد های محشری هست و لذت بردم.
سلام، به هیچ عنوان مانعی برای استفاده از هرگونه کد و دمو توی این سایت به هر نحوی که مایلید وجود ندارد.
شما که بیش تر در این زمینه وب و برنامه نویسی اسکریپت آشنا هستی !!! برای برنامه نویسی بلاک چین چیکار کنم ؟ یعنی از کجا شروع کنم ؟ البته بلاک چین نه کار با ارز دیجیتال ، منظورم اتریوم و بیت کوین نیست
دانشی در این زمینه ندارم.
آقای سیدی نمیدونم چطور ازتون تشکر کنم؟💖💖
یا من تازه کارَم یا این منوها با روح و روان من بازی میکنن😂😍
خیلی ممنون از کد هایی که رایگان در اختیار ما میزارید🙏🌹
سلام، اینا قدیمی شده دیگه، یک سر به سایت codepen.io بزنید، فقط مواظب باشید سکته نکنید :)
سلام خسته نباشید .
چرا آیکون های 5. Toggle Menu برای من نمیاره .
سلام، آیکون نداره اون منو.
سلام وقت بخیر
5. Toggle Menu ایکونش برای من مربع هست و 3 خط نداره
!!!
چجوری بیارمش ؟؟؟
سلام، باید فونت آسم نسخه 4 رو اضافه کنین
https://fontawesome.com/v4.7
البته توصیه من این هستش که از Svg برای آیکون ها استفاده بشه. این دموها قدیمی هستن.
خیییییلی خوشگل و جذاب هستن و خلاقانه خیلی ممنووون :)))))