campaign-edianeh-98

آموزش ساخت منوی آبشاری توسط css و css3 (قسمت اول)



visibility  
mode_comment   ۷۵

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

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

پیش نیاز این آموزش:

آشنایی با:

  • html
  • css,css3

تصویر نهایی پروژه:

.: فقط اعضاي سايت مجاز به ديدن اين قسمت هستند :.
در صورتي که عضو سايت هستيد می توانید لاگین شوید.
در غير اين صورت در کمتر از 1 دقيقه مي توانيد در سايت عضو شويد.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
atlasi

ممنون وحید جان . آموزش بسیار خوبی بود. قسمت های بعدی رو هم زودتر بزار. راستی توی چند جلسه تموم میشه؟؟؟؟؟؟
از بابت آموزش های جی کوئریتم ممنون .
موفق و پیروز باشی داداش

وحید صالحی

ممنون دوست عزیز
2 قسمته که قسمت بعدی رو اگر از نظر زمانی با سایر آموزش ها تداخل نواشته باشه 2 روز دیگه میزارم روی سایت…

elham.e

من 3 تا سوال داشتم
-یکی اینکه من وقتی از border-radius استفاده می کنم فقط از border های سمت راست اعمال میشه و برای سمت راست قسمت پایینش و بالاش اعمال نمیشه علتش چی میتونه باشه؟
– من الان یه لحظه margin و padding رو قاطی کردم من اموزش های css رو کامل خوندم ولی الان دچار مشکل شدم مگه margin فاصله عناصر با هم و padding فاصله داخلی یه عنصر با borderش نبود بعد چطوری الان میشه از padding برای فاصله ی دو تا li استفاده کرد مگه این فاصله عناصر با هم نیست؟
– و اینکه gradient یه نوع سایه روشن کردن یک عنصره درسته؟
——————————————————————————–
مرسی از اموزشتون من خودم توی این قسمت اشکال داشتم توی منوم
واقعاممنون (+ _ +)

وحید صالحی

1-در مورد border-radius برای اینکه خوب متوجه بشی این مطلب رو بخون
2-وقتی شما 2 یا چند عنصر در یه عنصر والد داری برای ایجاد فاصله بین این دو عنصر که داخل عنصر والد قرار دارند باید از padding استفاده کنید اگر از margin استفاده کنی از عنصر والدشون فاصله میگیرن …
3-بله یه جورایی میشه گفت سایه روشنه اما میتونه تغییر رنگ از یه رنگ به یه رنگ دیگه هم باشه …
موفق باشی…

elham.e

مرسی
بازم کلی لایکککککککککککک !

وحید صالحی

ممنون…

Etoile

تشکر مرسی

miss programmer

مرسی

greenrh7806

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

کیوان علی محمدی

سلام نرم افزار Camtasia.

blunch

با سلام و احترام
بسیار ممنون و سپاسگزارم از سایت خوبتون!! توضیحاتتون فوق العاده عالی و قابل فهم هست .

وحید صالحی

ممنون دوست عزیز…

mast-torsh

باسلام
اول از همه بگم آموزش فوق العاده ای بود اما یک سوال داشتم.
به نظرتون بهتر نبود منبع این آموزش رو هم ذکر می کردید چون این آموزش شباهت زیادی به این لینک داره

وحید صالحی

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

mast-torsh

ببخشید قصد توهین نداشتم, حتما دنبال می کنم ممنون

javaheri

آقا وحید دستت درد نکنه
فقط آموزش jQuery چی شد؟

ert65

انقده خوشحالم…دستتون درد نکنه واقعا.منتظر قسمت بعدیم 😯

وحید صالحی

بزودی قسمت بعدی رو در سایت قرار می دهم…

mohammad7

عالییییییییییییییییییییییییییییییییییییه !!!!

marvel

سلام دوست عزیز
آموزشی که گذاشتی واقعا جالب و کامل بود لطفا قسمت دوم رو هم توی سایت اماده کنید البته درصورت امکان،
مثل همیشه بابت زحماتی که میکشید ازتون ممونم

وحید صالحی

ممنون دوست عزیز قسمت دوم آماده هست و به زودی منتشر خواهد شد…

meyti pugo

ایولللللللل
ولی نمیدونم چجوریه که هرچیو که من یاد میگیرم بعدش شما آموزششو میزارین و من کلی قبلش تو زحمت میوفتم :d :((
اگه میشه آموزش تبدیل یه قالب حرفه ای به نیوک و وردپرس و جوملا رو به صورت فیلم و هم متن بزاریدددد که خیلی عالی میشه..
تازه نیوک 8.3 چون واقعا طرفدار داره ولی منبع آموزش درستی نداره و مدیرای دلسوز هم نداره متاسفانه.. واقعا جواب میده و بازدید سایت هممنون سون لرن چند برابر میشه..
خیلی دوستون داریممما
راستی من این منو رو یاد گرفتم ولی کلی مشکل دارم که ایشالا با این سری آموزش کلا رفع میشه.. اونم تو یاهو با کمک سجاد عزیز یاد گرفتم :X

meyti pugo

ممنون وحید جان

aminheidari

واقعا ممنون
چرا قسمت دومش نمیاد 😯
سریع بدیدش
ممنون 😛

ajavan

بسیار متشکرم

farvimgh

تو قسمت gradient اشتباه داره webkit کلاً سینتکسش فرق داره برای gradient

اگر امکانش هست فایل img که تو آموزش ازش استفاده کردید رو برای آپلود قرار بدین با تشکر

hajian1

سلام
ضمن تشکرازآموزش های فوق العاده جالب ومفیدتان
یک سئوال
درموردborder-radiusکه css3هست طبق آموزش علامت اختصاری فایرفاکس-moz-border-radiusاضافه کردیم برای شناختن دیگرمرورگرهاآیا نیازهست نشانی اختصاری دیگرمرورگرهارابه اول این موردذکرشده اضافه کنیم؟
باتشکر

وحید صالحی

100%

hajian1

ممنون ازراهنمایی شماگرامی

tiktime

سلام وحید جان
من یک سایت دارم که تعداد زیر منو هاش خیلی زیاده و از اونجایی که هدر سایتم هم فیکس هست واسه همین میخوام به زیر منو ها خاصیت اسکرول بدم تا بتونم همشون رو واسه مخاطبام قابل نمایش کنم.
اول میخوام بدونم که اصلا میشه با منو های drop-down همچین کاری کرد؟
ثانین چجوری؟
ثالثا تشکر فراوان 😀

وحید صالحی

سلام
بله میشه دوست عزیز
برای کادر مربوط به زیر منو یه ارتفاع ثابت در نظر بگیر هر اندازه که میخوای ارتفاع زیر منوت باشه و بعد در فایل استایل مربوط به کادر زیر منو این کد را قرار بده:
overflow-y:visible; با این کد اسکرول عمودی ایجاد میشه اگر لینک هتی درون زیر منوت از ارتفاع اون بیشتر باشه اگر هم لینک های زیر منوی سایتت بعد از اعمال ارتفاع ثابت به کادر زیر منو از پایین اون زد بیرون در کنار کد قبلی که گفتم این کد رو هم وارد کن overflow:hidden;
موفق باشی…

neghab69

سلام. آقا وحید میشه به جای اینکه به منو رنگ بدیم، تصویری که قبلا برای منو ساختیم مثلا دایره های جدا جدا، رو جداگانه کدنویسی کنیم؟ اگه میشه توضیح کدش رو هم بدین چون نمیدونم چجوری اینکارو بکنم 😥
ممنون از لطفتون

وحید صالحی

بله میشه بجای رنگ از این خاصیت استفاده کنید…

neghab69

واقعا ممنونم آقا وحید. خیلی لطف میکنید.فقط یه سوال دگه اینکه اگه من 4 تا دایره ی جدا درست کرده باشم که بخوام اون ها رو تبدیل به منوی آبشاری کنم اول اینکه باید برای هرکدوم این کدهارو جداگانه بنویسم؟ و دوم اینکه وقتی دایره ها آبشاری باز میشن همون شکل دایره هستن؟اصلا خوب هست یا نه که تغییرش بدم؟ 😥 ممنون میشم اینو هم توضیح بدین.

وحید صالحی

منظور شما از 4 دایره جدا چیه؟؟؟؟منظورت bullet هست؟؟

neghab69

منظورم این بود اگه بد میشه تغییرش بدم.
بازم ممنون

tiktime

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

وحید صالحی

شرمنده توی سون لرن تنبلی ممنوع خودتون از روی ویدئو کد بزنید هم دستت راه میفته هم با کد ها بهتر آشنا بشی…

neghab69

اول یه تشکر ویژه ازتون میکنم چون واقعا محشرید آقا وحید. من تا حالا مثل شما ندیدم بخدا که انقدر سریع به جواب کاربرا رو میدین.واقعا ممنوووووووووووووووون.آقا وحید منظورم اینه که دکمه هام به جا اینکه مستطیل باشه دایره ای شکل و جدا از هم باشن.یعنی برای هرصفحه یه دکمه دایره ای شکل جدا که همون منومون میشه بذاریم و این دکمه ها به ترتیب جاشون تغییر میکنه یعنی فکرمیکنم با position جاشون رو باید تغییر داد،درسته؟بازم تشکر فراوان از شما آقا وحید… 🙄

وحید صالحی

بله درسته…

neghab69

فکر کنم بازم نتونستم منظورمو برسونم 😥 منظورم اینه که من لینک صفحه اصلی و …… رو با فتوشاپ به صورت دایره های تکی و جدا از هم طراحی کردم و میخوام این دایره ها رو تبدیل به منوی آبشاری کنم…و position هرکدوم باهم فرق داره.حالا میخوام بدونم این کدها رو برای هرکدوم جداگانه باید بنویسم؟و اینکه وقتی دایره ها آبشاری باز میشن همون شکل دایره هستن؟به نظرتون بد میشه ؟

وحید صالحی

سلام کل عکس ها و فایلتون رو زیپ کنید و در انجمن آپلود کنید تا بررسی کنم….

dehno

کسی جواب سواله ما رو نداد که ؟ ❗

لقمان آوند

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

f_talebi

ممنون از آموزشهای عالی ک میذارین
متاسفانه برای من خیلی طول میکشه تا یک فیلم رو ببینم نمیدونم مشکل از اینترنت منه یا از سایت 🙁 درحین دیدن فیلم خیلی مکث میوفته…

وحید صالحی

احتمالا سرعت اینترنت شنا پایینه…

asgkrbimweb

😛 باسلام آموزش جالب وزیبا وعالی مفیدی بود بی صبرانه منتظر قسمت دوم هستیم . راستی قسمت دوم کی اپ میشه؟

وحید صالحی

ممنون دوست عزیز
قسمت دوم خیلی وقته که منتشر شده اینم لینکش

احسان

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

کیوان علی محمدی

سلام دوست عزیز،آقای صالحی چند وقتیه که سرشون شلوغه،حتما سعی کنید بهشون ایمیل بزنید.

فرشاد

این کد برای وبلاگ هم عمل می کنه؟؟؟

کیوان علی محمدی

بله دوست عزیز برای وبلاگ هم عمل میکنه.

معراج

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

کیوان علی محمدی

چون از CSS3 استفاده شده،فقط با نسخه 9 به بعد خوب کار میکنه.

hasanata

خدایی این چه وضعشه
فایل تصویری که نشون نمیده
فایل پی دی اف هم که دو تا دانلود کردم خبری از اموزش توش نیس فقط معرف کردی
😥 😡 😡 😡
مطلب نذاری بهتره والا با این سرعت نت دهنم سرویس شد اخرشم هیچی

hasanata

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

لقمان آوند

خواهش می کنم
این مسائل بعضا پیش میاد .
موفق باشید

mina_s84

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

mina_s84

لطفا جوابم رو بدید.

کیوان علی محمدی

سلام آقای صالحی فعلا درگیر هستن،شما داخل سایت هایی مثل Iconfinder یا Archive icon جستجو کنید،شاید بهترشم پیدا کردید.

mina_s84

ممنونم برای معرفی سایت ها.

mohammad nikkhah

بهترین سایت برای icon سایت https://www.iconfinder.com هستش

وحید صالحی

دوست عزیز
اکثر آیکون هاش که خوب و جالب هستند رو باید خریداری کنید!!!

abolfazlostadan

سلام خسته نباشین
چرا این فیلمتون فقط صداس ؟ تصویرش کو؟ 🙁

لقمان آوند

مشکل احتمالا از مرورگر شماست . فقط صدا نیست و تصویریه ..

mm021

دست سازنده فیلم اقای صالحی درد نکنه دمش گرم خیلی با حال توضیح داد همین طور دست سون لرن درد نکنه که فیلم رو برای ما گزاشت 🙂

علیزاده

سلام خسته نباشین تورو خدا میخوام منو بسازم با دریم ویور 6 ولی هیچی نمیدونم لطفا کمکم کنید من اولین بارمه و پروژه مو باید تحویل بدم تو این ماه 😥

وحید صالحی

از این حرف من ناراحت نشید اما یه حقیقته نمی دونم چرا اکثر دانشجو ها کل ترم و دوره تحصیل رو کاری نمیکنن و پایان ترم دقیقه نود تازه یادشون میفته که باید پروژه تحویل بدن!!!واقعا برام عجیبه!!!
به هر حال دوست عزیز ناراحتی نداره ویدئو رو ببینید انشاا… که یاد میگیرید که چطور منو بسازید

علي - T

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

http://s5.picofile.com/file/8122204934/image.png

وحید صالحی

سلام
اگر می خواهید که حذف شود در استایل فایل دنبال li بگرد که درش استایل last-child وجود داره در اون مقدار border-left رو برابر none قرار بده

homa jamshidifard

سلام عرض کردم خدمت شما آقای صالحی باتشکر از فیلم آموزنده شما که خیلی در یادگیری موثر بود
یه خواهش داشتم امکانش هست که فایل این منو رو دراختیارمون قرار دهید ؟منظورم کدهای css,htmlآن من خیلی جاها مث شما عمل میکنم ولی نمیدونم چرا برا من یه جاهایی اجرا نمیکنه
من خیلی به این فایل نیاز دارم ممنون میشم از شما
موفق باشید

وحید صالحی

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

رضا abdolahi

سلام
میبخشینا دیگه من چرا عضو ویژه شم وقتی دانلود منیجر خودش لینک دانلود فیلمو بم میده؟؟

کیوان علی محمدی

سلام لینک این فیلم که نوش جونت،لینک فیم های مطالب VIP فقط برای کاربران ویژه هستش،شاید بعضیا IDM نداشتن خواستن روی لینک دانلود کلیک کنن،
ضمن این که، دسترسی به لینک دانلود فبلم ها فقط یکی از مزیت های عضویت VIP هست .
موفق باشی.

رضا abdolahi

سلام
اهان درسته
سایت خیلی خوبی دارین مطالب عالین خیلی عالی
این ویدیو که خیلی به درد من خورد
فقط قسمت font-weightبجای نرمال نوشته بودین
nlormal
به هرحال خیلی ممنون از سایت خوبتون یا علی

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

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