پرسش و پاسخ – منوها یا Navigation Bar در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با پرسش و پاسخ – منوها یا Navigation Bar در CSS با من همراه باشید.
Free-Learn
پرسش از شما، پاسخ از بنده تا جایی که بتونم و در توانم باشه، لطفا پرسش تان را فقط در رابطه با بخش مشخص شده ارسال نمایید تا نظم و ترتیب در بخش پرسش و پاسخ بخوبی رعایت شود.
Free-Learn
فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب
سلام چجوری منویی که به آن width: 90% دادم رو وسط چین کنم؟
باسلام و عرض ادب
از روش های مختلفی میتوان اینکارو کرد
روش اول : بدون استفاده از فلکس ( کلیک کنید )
روش دوم : استفاده از فلکس ( کلیک کنید )
ببخشید میشه دوباره اون سورس منو کشویی که بدون li رو بزارید ممنون
باسلام و عرض ادب
در بخش مثال های کاربردی قرار دارد
برای مشاهده بخش مثال های کاربردی کلیک کنید
ببخشید میشه کد یک منویی که مثل اینه اما سه تا میره پایین کشویی اما تا سه طبقه میشه کدش رو بزارید؟
سلام خسته نباشید.دو تا سوال داشتم. اولی اینکه منوهایی که افقی بازمیشن (مثل منو سایت خودتون) اون دکمه که بازشون میکنه چطور ایجاد میشه؟ترفندای زیادی امتحان کردم ولی همه بن بست بود.visibility درگیر میشه؟
سوال دوم اینکه آیا امکان کنترل یک عنصر با یه عنصر دیگه وجود داره ؟مثلا من یک دکمه بزارم تو سایت که شناوره و با کلیک روی اون زمینه کل سایت تغییر کنه ( مثلا حالت شب)
باسلام و عرض ادب خدمت شما دوست محترم
پاسخ شماره ۱ :
برای منو بهتره این مثال رو بررسی کنید ( به اون قسمت بازشو که وقتی ماوس میره رو آیتم و باز میشه توجه کنید )
پاسخ شماره ۲ :
بله که میشه ، خب جاوااسکریپت برای همینکار درست شده. مشاهده مثال
ببخشید میشه کد منویی بزارید که تا سه طبقه بره من زیاد از این چیزا سر در نمیارم یعنی وقتی میره روی فری لرن بعد میره روی لینک یک یک طبقه ی دیگه بیاد
همون منوی قبلی با ۳ طبقه
دانلود کنید
نه ببخشید عمودی میخواستم مثل اینکه به saman معرفی کردید
همین لینک همونیه که به دوست مون داده بودم و عمودی هس
منظورم افقیه
عمودی اش رو نمیخوام
منوی افقی با زیرمنو
کلیک کنید
من تمامی جاوا هاتون رو نگاه کردم میشه یک کدی بدید که مثلا وقتی طرف اسمش رو توی باکس میزنه و میزنه برو مثلا رمزش رو نشون بده؟؟
اگه میشه کدش رو بدید
خب همچنین چیزی اگه در معنای واقعیشو بخوای با جاوااسکریپت نمیشه، با php و پایگاه داده میشه که مثلا کاربر ثبت نام کنه اطلاعاتش ثبت شه بعدش کاری کرد که با زدن دکمه ای چیزی نام کاربری شو ازش بگیره و رمزشو بهش تحویل بده
ولی خب اگه با جاوااسکریپت بخوای همچین چیزی رو، میتونی مثال زیر رو بررسی کنی
کلیک کنید
نه منظورم این نبود منظورم این بود که اونی که شما دادید فقط شماره رو میگه مثلا رمز ۱۲۳۴ هست اما اگه رمز ۱۳sk باشه sk رو نشون نمیده و یکباره میزنه نام کاربری اشتباهه و من جاوا بلد نیستم و نمیتونم درستش کنم و میخواستم ببینم شرایط ادمین شدن در اینجا چیه توی آزمون اچ تی ام ال هم نمره ۳۳ از ۴۷ گرفتم 😂
همونطور که اشاره کردم اگه یه چیز واقعی و با امنیت و در یه کلام یه چیز داینامیک بخوای باید php و پایگاه داده mysql بلد باشی
الان اینی که با js ایجاد شده نه امنیت داره نه داینامیک هست، چون شما خودتون باید دستی رمز رو بهش بدید ولی در php دیگه رمز میشه رمز کاربری که خودش انتخاب کرده و ثبت نام کرده در پایگاه داده، و اینکه تو این سورس امنیت در معنای واقعی نیست یعنی شما سورس صفحه رو ببین خب رمز هم میتونی ببینی ولی در php دیگه اینجوری نیست.
حال همین سورس js اصلاح شده و در قسمت userpassword هرچی مشخص کنید در خروجی نمایش میده ( مشاهده سورس )
+ اگه بخواید به حدی برسید که بتونید مثلا سیستم ثبت نام و ورود ، پروفایل کاربری یا مثلا پنل ادمین و از این حرفا ایجاد کنی باید زبان های html و css و جاوااسکریپت ( جاوا نه، چون جاوا خودش یه زبان برنامه نویسی مجزاست ) ( جاوااسکریپت هم در حد متوسط ) و php و برای کار با پایگاه داده mysql رو بلد باشی.
+ پیشنهاد من برای یادگیری اول html و بعد css و بعدش آشنایی متوسط با جاوااسکریپت و در نهایت بعدش php و mysql می باشد.
این mysql هاست میخواد درسته؟؟؟
بله هاست میخواد
کلا خوده زبان Php فقط بروی هاست و سرور اجرا میشه و پایگاه داده ها هم مثه mysql در کنار php بروی هاست و سرور اجرا میشن
خیلییی ممنون از سایت خیلیی من رو جلو انداخت میخواستم بگم منو خودتون از چه کدی استفاده شده که وقتی اسکرول میکنیم به پایین منو تکون میخوره و میاد یعنی اول یکجا ثابته و بعد تا ما اسکرول رو به پایین میبریم اون ثابت میشه و میاد پایین
میشه کدش رو بدید؟
با سلام و عرض ادب خدمت شما دوست محترم
خیلی راحت میتونید از ویژگی sticky استفاده نمایید.
لطفا این مثال رو مشاهده نمایید
پیشنهاد میکنم حتما آموزش ویژگی top رو مشاهده نمایید
خیلی خیلی ممنون من تازه سایتم رو راه اندازی کردم ممنون از راهنمایی هاتون
ببخشید چه شکلی میشه یکاری کنم مثلا از یجایی باهام بیاد بعد یجایی بایسته از یک تیکه بیاد پایین و یک تیکه دیگه به ایسته؟؟
باسلام
اگه منظورت منو هست که یکم بیاد و بعد مخفی شه و از این حرفا معمولا برای منو اینکارو نمیکنن و یجورایی نمیشه
ولی برای ستون یا سایدبار بغل انجام میدن
میتونی این مثال رو بررسی کنید
بله این رو میخوام اما اگه میشه بگید چه کدی توی سی اس اس یا حاوا هست که این کار رو انجام میده و یک مثال بدون جاوا اگه میشه بدید و توی سایت خودتون هم باشه بهتره ممنون
مثلا همین ستون های کناری بدون جاوا هم میشه این کار رو کرد ؟ اگه میشه گدش رو بدید
و اگر هم جاوا میخواد که اگه میشه یکمی ساده تر توضیح بدید چون من جاوا بلد نیستم و از این مثال هیچ چیز نفهمیدم
برخی از کارا با یکی دوتا تکه کد انجام میگیره و برخی با صدها خط کد، و اگه یه خط کد از اون ۱۰۰خط نباشه دیگه کار نمیکنه و کدها هم جوری نیست که بشه همه رو خط به خط توضیح داد، شما باید اول html و بعدش css و بعدش جاوااسکریپت رو یاد بگیرید ، بدون آشنایی بخواید چیزی رو درک کنی نمیشه و وقت تلف کردنه.
ولی وقتی با این زبان ها آشنایی نسبتا کاملی داشته باشید حداقلش میتونید خیلی از کدهارو درک و تفسیر کنید.
نمونه با CSS خالی
نمونه با JS
ببخشید شما که fixed قرار دادید اصلا شبیه مثال قبلی نیست و من css و html بلدم اما نمیتونم تجزیه و تحلیلش بکنم
اونکه با CSS خالی هست خب با fixed هست و میبینی که فیکس میشه با اسکرول کردن و با CSS در همین حده
ولی با JS و jquery دیگه اون fixed دیگه کاره ای نیست و اصل کارو jquery انجام میده
تو پروژه هایی که جی کوئری وجود داره، جی کوئری هم یه فایل هست که چندصد خط کده و اگه همین فایل نباشه دیگه اون پروژه کار نمیکنه
یا اصلا چه شکلی تایین کنیم که کجا وایسه ؟
شما اگه با ویژگی position در CSS آشنا باشید خب میدونید این ویژگی چندین حالت داره که fixed و sticky یعنی فیکس کردن و حالت چسبنده
چسبنده یعنی از یه نقطه ای به بعد بچسبه ولی فیکس در همه حال فیکسه
اینکه تعیین کنیم که کجا وایسه و از این حرفا با sticky فقط میشه نقطه چسبندگی رو مشخص کرد مثه منو هایی که میان پایین بعد میچسبن
مثال از sticky
مثال از fixed
با sticky میشه چندین باکس چسبنده ایجاد کرد که وقتی اسکرول میکنی میای پایین اون باکس یکی پس از دیگری بچسبن به سقف مرورگر
خب من الان میخوام sticky رو یکاری کنم از یجایی شروع بشه که این رو میدونم و یک جایی توقف کنه که من میخوام مثلا وسط خط توقف کنه و دیگه نیاد مثلا برید توی وب خودم وقتی منو رو میبرید پایین و میرسید به درباره من همونجا یهوییی منو می ایسته من نمیدونم این چه شکلی به وجود اومده که اونجا به ایسته و میخوام برای ستون هامم کار بزارم اما میخوام ببینم اون چه شکلی اونجا می ایسته که تایین کنم ستونم کجا به ایسته
واسه همین میخوام مثال های شما رو گه میتونم میخوام یک جایی به ایسته که من میخوام
الان منظورتون واضحتر بود
این مثال رو بررسی کنید
در این مثال ۳ بخش اصلی داریم ، هدر و محتوای اصلی و فوتر
هدر که هیچ ولی باکس محتوای اصلی توش ۲ بخش وجود داره، یه بخش محتوا و یه بخش سایدبار که قراره چسبون باشه
فوتر هم اون پایین هست
حال در دستورات جاوااسکریپت ۲ بخش هست که باید مشخص بشه و حواستون بهش باشه، یکی نام کلاس سایدبار و دیگری نام کلاس فوتر ، اینجاست که متوجه میشه وقتی اومد پایین رسید به فوتر دیگه نیاد پایین
بازم خیلی ممنونم اما وقتی به طرف پایین حرکت میکنم میره زیر باکس ها چه کار کنم؟؟
خواهش میکنم
باید از ویژگی z-index استفاده کنی تا بیارش بالا
مثلا اینو اضافه کن به همون کدها z-index:99999
اوه خیلی ممنونم بازم خیلی راحت تونستم با z-index درستش کنم ممنون بازم ممنون
خوشحالم که مشکلتون حل شده
امیدوارم که همواره سلامت و موفق باشید
ببخشید من خیلی پیام دادم و مزاحمتون شدم میخواستم بگم میشه یک کد بهم معرفی کنید مثل منوی بغل سایتتون که سه تا خطه وقتی نیزنیم روش یک صفحه دیگه میاد خیلی ممنون میشم خیلی ببخشید مزاحمتون شدم
نه خواهش میکنم این چه حرفیه
اون منویی که میگید منوی در گوشی های موبایل هست، که در حالت واکنش گرا ایجاد میشه
سایت خودتون هم همین رو داره ولی اینکه منو چجوری باز شه دیگه برمیگرده به نحوه کدنویسی اون بخش از سایت
که اگه بخواید همون قسمت رو تغییر بدید میبینی ممکنه کل استایل سایت درگیر بشه و بخش هایی از سایت رو خراب کنه ولی خب در هرصورت نمونه کدهای زیر هستن :
نمونه منوی موبایل بهمراه انیمیشن
درسته ایم مال گوشیه الان دیدم اما من میخوام توی کامپیوتر هم همینطور باشه یعنی چه توی گوشی چه توی کامپیوتر میخوام دوتاش یجور باشه مثل اینکه با گوشی میریم توی سایت شما سه تا خط داشته باشه و وقتی میزنیم یک صفحه بیاد و دقیقا همینطوری که روی گوشیه اگه میشه کدش رو بدید اگر هم نمیتونید که هیچی ببخشید دیگه
یک منو ۲ حالت داره یا از html و css خالی ایجاد شده یا معمولا و بیشتر از html و css و js ( جاوااسکریپت ) ایجاد شده
این یعنی شما باید کدهاشو ( هم html و هم css و هم js ) توی سایتتون قرار بدید و جایگرین کدهای فعلی کنید، حال اینکه گفتم ممکنه استایل سایت رو درگیر کنه و گوشه موشه هایی از سایت رو خراب کنه دقیقا همین جاست که کدهای منوی جدید میان و جایگزین کدهای فعلی میشه
یعنی ممکنه گوشه کناری در یک فایلی ( در بین تمامی فایل های سایت ) تکه کدی باشه که همین تکه کد تاثیر میزاره روی کدهای جدید و همین باعث میشه خراب کنه
حال اینجا ۲ کار باید انجام بدیم :
یا باید خودمون ۰تا۱۰۰ در جریان کدنویسی سایت باشیم مثلا بدونیم فلان کد فلان جا استفاده شده و از این حرفا که اگه مثلا مشکلی ایجاد شد بدونیم چی به چیه
یاهم دلو بزنیم به دریا و کدهای جدید رو جایگزین کنیم و شانس بیاریم مشکلی در تداخل کدها و از این حرفا پیش نیاد ( که بیشتر پیش میاد و کلی تداخل ایجاد میشه )
بطور کلی اگه آشنایی خوبی داشته باشید با نحوه اضافه کردن یا ویرایش یا دستکاری یا هرچیزی که بتونه بهتون در اضافه کردن کدهای منوی جدید کمک میکنه خب میتونید اینکارو انجام بدید هرچند ممکنه تداخل هایی ایجاد بشه و اذیتتون کنه ولی نشدنی هم نیست.
در هرصورت یک نمونه منو برای دانلود قرار گرفت
دانلود کنید
خیلی خیلی ممنون و بله من کد هایی از سایت های دیگه گرفتم و باعث خرابی شده و کد رو حذف کردم و خیلی کار برد اما هر کدی که از سایت شما گذاشتم مشکلی پیش نیومده و خیلی هم عالی عمل کرده و ممنون.
بله بلدم و اگه خراب شد دستکاری اش میکنم تا درست شه من فقط یکمی سی اس اس و جاوا بلد نیستم.
خیلی ممنون از شما و سایتتون
خواهش میکنم
امیدوارم که مشکلی پیش نیاد ولی اگه هم بود بهم بگو
ببخشید عکس هدرتون ثابته شما از چه کدی توی سی اس اس استفاده میکنید که تصویر روی ثابت میکنه؟؟
یعنی تصویرمون اسکرول نمیشه؟؟
بله ثابته
باید از ویژگی background attachment استفاده کنید
آموزش این ویژگی را مشاهده نمایید
و میشه بگید از چه کدی برای جستجو سایتتون استفاده میکنید اگه جستجوی سایت من رو دیده باشید به گوگل وصله مثلا تا میزنیم روی جستجوی شما یک منوی جستجو میاد زیرش خیلی عالیه اگه میشه کدش رو بدید
کلا سیستم جستجو در سایت ها، ۲ حالت میتونه داشته باشه
اینکه متن رو تایپ میکنید و جستجوها میان بالا، بخاطره استفاده از فناوری Ajax هست و کدهاش یه خط ۲خط نیست که قابل ارائه باشه، همونطور که اشاره کردم در این روش باید سایتتون با php و mysql ایجاد شده باشه وگرنه این چیزا قابل پیاده سازی نیست.
نه منظورم این بود که تا کلیک میکنیم باکس میاد جای سرچ شما اصلا توی مثال یک input بزارید
باسلام
سورس آماده ندارم ، میتونید از این سورس استخراجش کنید
من کدم اینه
این رو هر چی میزارم ثابت نمیشه میشه راهنمایی کنید میتونید هم برید توی سایت ببینید چرا نمیشه.
مشکلی نداره فقط شما عکسی که گذاشتید رنگه همش و بیچاره اصلا حالتی نداره که بخواد ثابت نشونش بده
یه تصویر که واقعا تصویر باشه بزارید خودتون میبینید که مشکلی نداره
باسلام
کدها میرسن ولی چون بخش پرسش و پاسخ باید تمیز باشه لطفا هرچیزی بجز پرسش رو بفرستید به ایمیل سایت که در پایین سایت هستش
کدها ، فایل ها اینارو بفرستید به ایمیل
باتشکر