آموزش ساخت منوی کشویی با CSS و HTML

آخرین بروزرسانی 26 اسفند 1400

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

ایجاد منوی کشویی با استفاده از CSS و HTML

پیش از اینکه بخواهیم به سراغ آموزش نحوه ایجاد منوی دراپ داون با استفاده از CSS و HTML برویم، شاید بد نباشد که نگاهی به آنچه در پایان پروژه به آن دست پیدا میکنیم بیاندازیم تا حداقل بدانیم که در پایان کار، چه چیزی منتظرمان خواهد بود. تصویر زیر، منوی کشویی ما را در انتهای کار نمایش میدهد :

ساختار HTML منوی کشویی

پیش از هرچیز یک نکته را مشخص کنیم. در بعضی از قسمت ها از عبارت منوی کشویی و در بعضی قسمت ها از عبارت منوی دراپ داون استفاده کرده ایم، این دو نام هردو به یک نوع منو اشاره دارند. عبارت منوی کشویی معمولا بیشتر در زبان فارسی به گوشمان میخورد ولی این عبارت دقیقا معادل منوی دراپ داون (drop down) است که گاها از آن با عنوان منوی بازشونده هم یاد میکنیم.

منوی کشویی که امروز ایجاد میکنیم (و تقریبا هر منوی کشوی دیگری که هر روز در سایت های مختلف مشاهده میکنید) از لحاظ کد HTML ساختار بسیار ساده ای دارند. برای ایجاد این نوع منو ها عموما از تگ های ul و li استفاده میشود. ما هم در ساختار منوی خود از همین کدنویسی پیروی میکنیم. البته ما اینجا یک کار دیگر هم انجام میدهیم. کل ناحیه منو را با تگ nav که از تگ های html5 و مخصوص منوهای ناوبری است، احاطه میکنیم تا محل قرارگیری منو از لحاظ ساختار کدنویسی، کاملا مشخص باشد. در این حالت یک منوی ساده تک مرحله ای (فاقد هر نوع زیرمنو) دارای ساختاری مشابه زیر خواهد بود :

<nav>
	<ul>
		<li><a href="#">مسترکد</a></li>
		<li><a href="#">آموزش ها</a></li>
		<li><a href="#">دانلود</a></li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</nav>

<nav>

<ul>

<li><a href="#">مسترکد</a></li>

<li><a href="#">آموزش ها</a></li>

<li><a href="#">دانلود</a></li>

</ul>

</nav>

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

تا اینجا کدی که ما در اختیار داریم تنها حاوی سطح اول منوهای ماست. حال برای اینکه بتوانیم به آیتم های دلخواه منو، زیر منو اضافه کنیم، کافی است دقیقا با پیروی از همان ساختار یک بلاک کامل ul و li به آیتم منوی دلخواهمان اضافه کنیم تا آیتم مورد نظر دارای زیر منو شود. به عنوان مثال حالا میخواهیم سه زیرمنوی “وردپرس، جوملا و متفرقه” را به آیتم منوی آموزش ها اضافه کنیم. در این حالت کد ما به شکل زیر در می آید :

<nav>
	<ul>
		<li><a href="#">مسترکد</a></li>
		<li><a href="#">آموزش ها</a>
			<ul>
				<li><a href="#">وردپرس</a></li>
				<li><a href="#">جوملا</a></li>
				<li><a href="#">متفرقه</a></li>
			</ul>
		</li>
		<li><a href="#">دانلود</a></li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</nav>

<nav>

<ul>

<li><a href="#">مسترکد</a></li>

<li><a href="#">آموزش ها</a>

<ul>

<li><a href="#">وردپرس</a></li>

<li><a href="#">جوملا</a></li>

<li><a href="#">متفرقه</a></li>

</ul>

</li>

<li><a href="#">دانلود</a></li>

</ul>

</nav>

همانطور که مشاهده میکنید یک بلاک ul کامل به تگ li مربوط به آیتم آموزش ها اضافه کرده ایم. مجددا به همین ترتیب میتوانیم به زیرمنوی متفرقه هم دو زیرمنوی دیگر اضافه کنیم :

<nav>
	<ul>
		<li><a href="#">مسترکد</a></li>
		<li><a href="#">آموزش ها</a>
			<ul>
				<li><a href="#">وردپرس</a></li>
				<li><a href="#">جوملا</a></li>
				<li><a href="#">متفرقه</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">دانلود</a>
			<ul>
				<li><a href="#">قالب وردپرس</a></li>
				<li><a href="#">قالب جوملا</a></li>
			</ul>
		</li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</nav>

<nav>

<ul>

<li><a href="#">مسترکد</a></li>

<li><a href="#">آموزش ها</a>

<ul>

<li><a href="#">وردپرس</a></li>

<li><a href="#">جوملا</a></li>

<li><a href="#">متفرقه</a>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">دانلود</a>

<ul>

<li><a href="#">قالب وردپرس</a></li>

<li><a href="#">قالب جوملا</a></li>

</ul>

</li>

</ul>

</nav>

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

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

استایل CSS منوی کشویی

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

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

در خط اول ابتدا ul های فرزند را نشانه گرفته ایم و گفته ایم که این ul ها باید مخفی شوند. سپس در خط 5 ام با استفاده از علامت < مشخص کرده ایم که استایل نوشته شده در این بخش فقط مربوط به ul ای است که در حال حاضر ماوس بر روی تگ والد آن قرار گرفته. این کار را به این دلیل انجام دادیم که از به نمایش گذاشته شدن همزمان همه ul های فرزند در زمان قرارگیری ماوس روی یکی از سرمنوها جلوگیری شود. (این مورد را میتوانید خودتان تست کنید تا دقیقا متوجه تاثیر قراردادن علامت بزرگتر در این بخش بشوید. چرا که در صورت عدم موجود بودن این علامت، وقتی ماوس را روی یکی از منوهای دارای زیرمنو قرار میدهید، کلیه سطوح زیرین آن با هم به نمایش در خواهند آمد که این مسئله برای ما ایده آل نیست)

در ادامه تصمیم داریم نحوه نمایش و رنگ منو را تعیین کنیم :

nav ul {
	background: #f1f4f7;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;
	list-style: none;
	position: relative;
	display: inline-table;
}
nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul {

background: #f1f4f7;

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: "";

clear: both;

display: block;

}

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

سپس نوبت به تعریف استایل های آیتم های رده اول منو میرسد :

nav ul li {
	float: right;
	position: relative;
	font-weight: bold;
}

nav ul li:hover {
	background: #a70101;
}

nav ul li:hover a {
	color: #fff;
}

nav ul li a {
	display: block;
	padding: 15px 32px;
	color: #4e4e4e;
	text-decoration: none;
}

nav ul li {

float: right;

position: relative;

font-weight: bold;

}

nav ul li:hover {

background: #a70101;

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block;

padding: 15px 32px;

color: #4e4e4e;

text-decoration: none;

}

در ابتدا محل شناوری آیتم li را بر روی right تنظیم کرده ایم تا آیتم های منو در کنار هم از راست به چپ و متناسب با زبان فارسی نشان داده شوند. و سپس در خط هفتم مشخص کرده ایم که در زمان قرارگیری ماوس روی یکی از آیتم های منو، پس زمینه آن به چه رنگی در بیاید. و در بخش بعدی نیز رنگ لینک های تگ a را در زمان شناور شدن ماوس روی آنها مشخص کرده ایم.

تا اینجا آیتم های رده اول منو دارای استایل های مناسب هستند. حالا نوبت آیتم های سطح دوم منو است. باید برای این آیتم ها هم استایل های مناسبی تعریف کنیم :

nav ul ul {
	background: #9c0000;
	border-radius: 0px;
	padding: 0;
	position: absolute;
	top: 100%;
	right: 0;
	width: 200px;
}
nav ul ul li {
	float: none;
	border-top: 1px solid #940000;
	border-bottom: 1px solid #940000;
	position: relative;
}
nav ul ul li a {
	padding: 15px 40px;
	color: #fff;
}	
nav ul ul li a:hover {
	background: #112f44;
}

nav ul ul {

background: #9c0000;

border-radius: 0px;

padding: 0;

position: absolute;

top: 100%;

right: 0;

width: 200px;

}

nav ul ul li {

float: none;

border-top: 1px solid #940000;

border-bottom: 1px solid #940000;

position: relative;

}

nav ul ul li a {

padding: 15px 40px;

color: #fff;

}

nav ul ul li a:hover {

background: #112f44;

}

استایل هایی که در این بخش تعریف کرده ایم در واقع استایلهای ساده ای هستند. در خط پنجم حالت absolute را برای قرارگیری ul های زیرمنو تعریف کرده ایم تا بتوانیم موقعیت آنها را نسبت به آیتم والد تعیین کنیم. همانطور که مشاهده میکنید این کار را با تعیین فاصله 100 درصد از بالا و 0 از سمت راست انجام داده ایم. سپس برای زیبایی بیشتر، عرض زیرمنو را نیز تعیین کرده ایم. طبعا این مقدار را میتوانید با توجه به نیاز خود تغییر دهید.

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

nav ul ul ul {
	position: absolute;
	right: 100%;
	top:0;
}

nav ul ul ul {

position: absolute;

right: 100%;

top:0;

}

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

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

دانلود نمونه تکمیل شده

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

دریافت نمونه تکمیل شده منوی دراپ داون CSS

توجه داشته باشید که در نمونه بالا برخی استایلها و کدهای html اضافه نیز جهت تکمیل استایلهای صفحه و … موجود هستند.

سخن پایانی

به عنوان یک تمرین پایانی حالا میتوانید سعی کنید به آیتم های منوی دراپ داون ای که با هم ایجاد کردیم، آیکن اضافه کنید. (برای این کار میتوانید سری به آیکن های فونتی Font Awesome بزنید)

امیدواریم از این آموزش لذت برده باشید. راستی فراموش نکنید که تجربه تان را از دنبال کردن این آموزش در بخش دیدگاه ها با ما به اشتراک بگذارید.

دسترسی آسان به این مطلب لینک کوتاه :

91 دیدگاه

elyas می گوید 8 سال پیش
سلام واقعا ممنونم
بعد از یه ماه تلاش برای درست کردن همین منوی کشویی بالاخره با اموزش شما موفق شدم
پاسخ
1. MrCode می گوید 8 سال پیش
  سلام
  از اینکه این آموزش برای شما مفید بوده خوشحال شدم. براتون آرزو موفقیت میکنم.
  پاسخ
یوسف می گوید 8 سال پیش
سلام عرض ادب
من ابنو گزاشتم تو قالب ، وقتی میرم رو منو زیر منو ها ظاهر میشن . به محض اینکه میخام برم رو زیر منو نا پدید میشن .
میشه لطفا راهنمایی کنبد ؟
تشکر
پاسخ
1. MrCode می گوید 8 سال پیش
  سلام
  باید استایل های دیگه ای که در قالبتون دارید و ممکنه روی رفتار منو تاثیر بزارن رو بررسی کنید. متاسفانه راهنمایی کلی و عمومی نمیشه در این زمینه کرد.
  پاسخ
2. hasan می گوید 5 سال پیش
  سلام شما احتمالا تگ های زیر منو رو درست وارد نکردید چک کنید ببینید تگ ها را درست باز و بسته کردین؟ چون در حالت عادی باید درست نشون داده بشه
  پاسخ
3. پدرام می گوید 5 سال پیش
  margin زیر منو رو داخل استایل صفر بدید درست میشه
  پاسخ
محمد می گوید 8 سال پیش
ممنون از آموزش ساخت منوی کشویی
موفق باشید
پاسخ
شیرین می گوید 8 سال پیش
واقعا ممنون خیلی آموزش مفیدی بود کلی طول کشید تا تونستم با پیدا کردن سایت شما این منو رو پیاده سازیش کنم.
بازم ممنون
پاسخ
1. MrCode می گوید 8 سال پیش
  از اینکه این آموزش برای شما مفید بوده خوشحالم
  براتون آرزوی موفقیت میکنم.
  پاسخ
ali می گوید 8 سال پیش
درود بر شما دوست عزیز. ممنون از مطالب خوبتون. من فقط توی ساخت این منوی کشویی با مشکل بر میخورم. میشه از شما خواهش کنم واسم زحمتشو بکشید روی قالبم؟ (برای رزبلاگ). و اینکه هزینه ش چقدر میشه؟ تشکر. منتظر پاسخ شما هستم.
پاسخ
پیمان می گوید 8 سال پیش
سلام . منوی آبشاری html شما رو استفاده کردم ولی مشکلم اینه زیر منو ها می رن زیر آیتم پائینی منو و نصفه نشون داده می شن. چکار کنم که بیاد روی آیتم پائینی نمایش داده بشه ؟
ممنون می شم راهنمائیم کنین. با تشکر
پاسخ
1. MrCode می گوید 8 سال پیش
  سلام. شرمنده دقیقا متوجه منظورتون نمیشم. یه لینک از نتیجه کارتون ارسال کنید که مسئله ای که ذکر کردید توش معلوم باشه.
  پاسخ
علی می گوید 8 سال پیش
سلام لطفا حالت پیش نمایش رو فعال کنید که قبل از دانلود بتونیم ببینیم که منو چه شکلی هست
پاسخ
ارمین می گوید 8 سال پیش
سلام ببخشید من این پست شمارو با ذکر منبع گزاشتم داخل سایتم مشکلی نداره اگه مشکل داره لطفا بگید حذف کنم با تشکر
پاسخ
1. MrCode می گوید 8 سال پیش
  سلام
  با ذکر منبع از دید من مشکلی نداره ولی از لحاظ سئو، درج مطالب کپی شده، به ضرر خودتون خواهد بود.
  پاسخ
ارمین می گوید 8 سال پیش
سلام متوجه نشدم چه ضرری خواهد داشت
پاسخ
1. مهدی می گوید 6 سال پیش
  میتونید توی گوگل سرچ کنید: سئو
  فقط همین قدر بدونید که کپی مطالب سایت های دیگر به سایت خود، به رتبه ی سایت شما در گوگل آسیب جدی وارد میکند!
  پاسخ
navid mohajeri می گوید 7 سال پیش
احسنتم ماشالله <3
پاسخ
افشین می گوید 7 سال پیش
خدا خیرتون بده
پاسخ
1. MrCode می گوید 7 سال پیش
  مرسی ?
  پاسخ
علی می گوید 7 سال پیش
باسلام
خسته نباشین ممنون پیروز باشید
پاسخ
علی می گوید 7 سال پیش
باسلام
لطفا شیشه ای کردن منوهم آموزش بدید
ممنون
پاسخ
steward می گوید 7 سال پیش
ببخشید من میخواستم منو رو به وسط صفحه ام ببرم چه جوری باید این کار رو بکنم
پاسخ
علی می گوید 7 سال پیش
سلام مطلبتون خیلی خوب و مفیده ولی یه مشکل دارم
فایلhtml که با مطلبتون درس کردم کار میکنه ولی هرکاری کردم استایل بدم بهش نشد همون متن معمولی html میاد میشه راهنمایی کنید
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  با عرض شرمندگی متوجه منظورتون نشدم. شما به شیوه استاندارد و معمولی که با css کار میکنید، در اینجا هم باید به همون صورت عمل کنید.
  پاسخ
علی می گوید 7 سال پیش
سلام اقا مطلبتون عالی بود یه منوی خیلی خوب درست کردم
ولی یه مشکل دارم وقتی با موبایل وارد سایت میشم منو افقی میشه…منویی که ساختم هفت تا گزینه داره ولی با موبایل که وارد میشم بصورت افقی چهارتا یه طرف و سه تا کنارش نشون میده میشه راهنمایی کنید
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  ممنون از شما.
  دلیل مشکل شما این هست که این آموزش صرفا به ایجاد یک منوی ساده پرداخته. این منو دارای استایل های واکنش گرایی مخصوص دیوایس های موبایل و … نیست.
  اگر میخواید کاری کنید که بشه ازش در دیوایس هایی که صفحه نمایش کوچکتری دارند استفاده کنید، میبایست براش استایل های واکنش گرا تعریف کنید.
  راهنمای جامع در این مورد در لینک زیر در دسترسه :
  https://www.w3schools.com/css/css_rwd_intro.asp
  البته برای منوها معمولا لازمه از یک سری توابع جی کوئری از پیش ساخته استفاده کنید تا در دیوایس های موبایل تبدیل به منوهای مخصوص موبایل یا منوی های off-canvas و … بشن.
  پاسخ
  1. علی می گوید 7 سال پیش
    خیلی خیلی ممنون مستر کد
  2. MrCode می گوید 7 سال پیش
    خواهش میکنم 🙂
Ali می گوید 7 سال پیش
ممنون خیلی مفید بود
پاسخ
حامد می گوید 7 سال پیش
سلام . آموزش بسیار خوب ۤ، عالی و ٖکاربردی بود ولی توی سیستم عامل های شرکت اپل از جمله IOS و MACOS نمایش داده نمیشه . لطفا راهنمایی کنید …
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  دقیقا متوجه منظورتون نمیشم. من دسترسی ای به دو سیستم عامل ذکر شده ندارم ولی تست روی سافاری انجام شد و مشکلی در نمایش مشاهده نشد.
  پاسخ
صمیم می گوید 7 سال پیش
آموزش خوب و عالی بود تشکر زیاد
پاسخ
پویان می گوید 7 سال پیش
خیلی ممنون از اینکه زحمت کشیدین و این آموزش رو درست کردین و همچنین رایگان برای عموم گذاشتین
پاسخ
Masoumeh می گوید 7 سال پیش
سلام عاااالی بود خیییییلی ممنونم
پاسخ
سولماز می گوید 7 سال پیش
سلام من تونستم منویی که میخواستمو با آموزش شما درست کنم. فقط یه سوال دارم. چرا وقتی روی گزینه ها کلیک میکنم و به صفحه مربوط به اون میرم منو تو همه صفحات نمایش داده نمیشه. یعنی فقط تو صفحه اول سایت منو نمایش داده میشه وقتی روی گزینه هاش میزنم و میره داخل صفحه اون مطلب، دیگه منو بالای سایت نیست. لطفا راهنماییم کنید.
و اینکه لطفا نحوه اضافه کردن کادر جستجو به آخر این منو هم آموزش بدین.
ممنون از آموزش بسیار خوبتون
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  حتما کد رو فقط توی یکی از صفحاتتون گذاشتید.
  پاسخ
Iman می گوید 7 سال پیش
سلام.
من از id برای سلکت ها استفاده میکنم کار نمیکنه.
چرا ؟
پاسخ
محمد می گوید 7 سال پیش
سلام ممنون بابت آموزش خوبتون یه سوال داشتم میخواستم ببینم کدهای css رو در کدوم قسمت قالب بلاگفا قرار بدم آیا محل قرار گیریشون مشخصه ی خاصی داره؟ چند روزه درگیرشم هرکاری میکنم درست نمی شه ترو خدا راهنمایی کنید
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  سورس قالب/سایتتون رو نگاه کنید ببینید فایل استایلتون از کجا فراخوانی شده. اینطوری راحت میتونید آدرس فایل css تون رو پیدا کنید.
  پاسخ
محمد می گوید 7 سال پیش
فک کنم از این آدرس باشه اما چطوری از روی این ادرس محل قرارگیری کدهای css رو پیدا کنم؟
پاسخ
1. MrCode می گوید 7 سال پیش
  خوب این آدرسی که دادید محل قرار گیری کد های css تونه دیگه
  پاسخ
  1. محمد می گوید 7 سال پیش
    خب الان باید کدهای css رو توی این قسمت قرار بدم؟ اگه آره چطوری؟
    ببخشید اگه سوالاتم مبتدیانه است.
  2. MrCode می گوید 7 سال پیش
    اگر به این آدرس دسترسی دارید که خوب کافیه فایل رو باز کنید و ویرایشش کنید.
    اگر ندارید دو راه دارید :
    1 – خودتون یک فایل css در یک محل آپلود کنید، کد های دلخواه رو توش قرار بدید و در قالبتون صداش کنید.
    2 – کد های css رو مستقیما در تگ style در قالبتون قرار بدید که البته من این روش رو پیشنهاد نمیکنم.
ممد می گوید 7 سال پیش
سلام مستر کد
واقعا خوشحالم که با سایت شما آشنا شدم واقعا حال کردم با توضیحات جامعت
همیشه موفق باشی
لایک
پاسخ
1. MrCode می گوید 7 سال پیش
  ممنون از شما 🙂
  پاسخ
احسان می گوید 7 سال پیش
سلام. من از منو به صورت ساده و یک زیرمجموعه ای استفاده کردم. و اون رو ریسپانسیو کردم. تنها مشکلی که هست وقتی با صفحه های تاچ مثل موبایل کار می کنی. وقتی رو آیکون منو می زنی منو باز میشه ولی وقتی پس از باز شدن منو روی آیکون اون دوباره می زنی تا منو رو ببندی عمل نمیکنه و باید حتما رو قسمتی دیگه از صفحه کلید کنی تا از hover بودن در بیاد. راهی هست برا حل این مشکل؟ ممنون می شم اگه راهنمایی کنید
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  منویی که ما طراحیش رو در این آموزش یاد دادیم، یک منوی کاملا ساده هست که همونطور که خودتون هم اشاره کردید، فاقد استایل های لازم برای واکنش گرایی هست. همچنین واکنش این منو به حالت شناوری ماوس یا همون هاور هست. این در حالیه که برای بهینه شدن منو برای دیوایس های موبایل، بهتره واکنش منو به تپ کردن باشه. بنابراین رفتار این منو در دیوایس های موبایل، بستگی به شیوه ای که خودتون برای تبدیلش به منوی موبایل و پیاده سازی استایل های واکنش گرایی در اون استفاده کرده باشید داره.
  برای منوهای این حالتی معمولا لازمه از یک سری توابع جی کوئری از پیش ساخته استفاده کنید تا در دیوایس های موبایل تبدیل به منوهای مخصوص موبایل یا منوی های off-canvas و … بشن.
  پاسخ
هانیه می گوید 7 سال پیش
سلام
من میخوام به جای اینکه یک فایل CSS جدا بنویسم، داخل همون HTML با style کد رو بزنم
میشه راهنمایی کنید که این قسمت
nav ul li:hover > ul {
display: block;
}
چطوری در style قابل نوشتن است؟
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  برای نوشتن استایل در فایل html از تگ های استایل استفاده کنید. آموزش :
  https://www.w3schools.com/tags/tag_style.asp
  پاسخ
محمدرضا می گوید 7 سال پیش
سلام من همه ی کد ها رو می زنم درست اما منو های زیرین ظاهر نمیشن لطفا راهنمایی کنید
پاسخ
1. MrCode می گوید 7 سال پیش
  سلام
  از نمونه ی تکمیل شده که در آموزش موجوده استفاده کنید و کد هاتون رو مقایسه کنید تا اشکال کار رو پیدا کنید.
  پاسخ
رهی می گوید 6 سال پیش
سلام ممنون از سایت خوبتون من سوال دارم خدمتتون من و محل کارم ابن وبلاگو ساختم خیلی درگیرش شدم اما راه ب جایی نمیبرم من کدارو قرار دادم و دقیقا مثل منو شما شد و استایلش دادم حالا چطور میتونم برای زیر مجموعه آیتم هام توضیحاتی قرار بدم ؟ باید موقع پست گذاشتن ادرس بدم ؟اگر اینطوره چطور بدم ؟که مشاهده کننده ها موس میزنن روش توضیحات و عکس نشون بده مثلا برای درب اتاقی که زیر مجموعس hpl چطور درش عکس و توضیحات بزارم.و ی سوال دیگه چطور این کدارو تو صفحه اصلی ب سمت راست بکشم.ممنون
این ادرس سایتم ببینید متوجه میشید
پاسخ
نازنین زهرا می گوید 6 سال پیش
عالی بود 🙂
دستتون درد نکنه 🙂
به طرز وحشتناکی برام جالب و مورد استفاده بود 🙂
موفق تر باشید:)
پاسخ
1. MrCode می گوید 6 سال پیش
  مرسی از لطف شما 🙂
  پاسخ
بهناز می گوید 6 سال پیش
سلام
میشه در یک مورد بنده رو راهنمایی کنید:
برای همین منویی که با آموزش این صفحه ساختیم، در حالت موبایل وقتی روی یک آیتم بزنیم زیر منو باز میشه ، حالا من می خوام با زدن مجدد روی همون آیتم زیر منوهاش بسته بشه. این کار رو هم فقط با css صرف می خوام انجام بدم، آیا امکانش هست؟و اگر هست چطور؟
یک نکته بگم که وقتی بریم روی آیتم بعدی، زیر منوی های آیتم قبلی بسته میشن، اما من میخوام اینکار رو با کلیک روی هر آیتم هم انجام بدم.
ممنون میشم اگر موردی هست راهنمایی کنید.
پاسخ
1. MrCode می گوید 6 سال پیش
  سلام
  در این آموزش ما فقط از html و css استفاده کردیم. ولی برای نوع منویی که مد نظر شماست نیاز به استفاده از جاوااسکریپت خواهد بود.
  اگر در گوگل عبارت open menu on click instead of hover رو جستجو کنید، نتایج متعددی در این زمینه پیدا خواهید کرد.
  پاسخ
shahab می گوید 6 سال پیش
با سلام وقتی کد رو به صفحه اچ تی ام ال اضافه میکنم یکی از استایل هام رو در css نشون نمیده چرا؟
پاسخ
مهدی می گوید 6 سال پیش
سلام خسته نباشید خیلی خوب بود.
من یه سوال داشتم که اگر بخوام وقتی روی منو hover میکنم زیر منو ها به صورتی که اولی نمایش داده بشه دومی از زیر اولی بیاد بیرون الی آخر میخواستم بدونم باید از چجور کدی استفاده کنم با css میشه یا باید js یا jquery باشه.ممنون
پاسخ
babak می گوید 6 سال پیش
ممنونم عالی بود????
پاسخ
hypertyper می گوید 6 سال پیش
با عرض سلام و خدا قوت خدمت تمام دست اندرکاران
خیلی ممنون از آموزش خوبتون همچنین به نکات ریز و خوبی اشاره نمودید. سپاس فراوان
برایتان آرزو می کنم موفق تر باشید.
پاسخ
mojtaba می گوید 6 سال پیش
سلام خسته نباشید وقتی منو کشویی درست میکنم با کد شما یک سر رو اشغال میکنه و نمیزاه مثلا لگویی کنارش باشه و به خط بعد منتقل میشه برای حل مشکل بایذ چیکار کنم
پاسخ
Yahya می گوید 6 سال پیش
سلام وخسته نباشید مشیه بگید چطوری برای اینکه منو هارو لینک دهی کنیم باید صفحه جدید بسازیم
مثلا منو تماس با ما چطور یک صفحه جدید بسازیم اون رو به همین منو لینک دهی کنید
لطفا بگید مرسی ?
پاسخ
محمد می گوید 5 سال پیش
ممنون از آموزش های خوبتون واقعاً عالی بود
پاسخ
Reja می گوید 5 سال پیش
سلام ببخشید من یه سوال داشتم ایا در لیست کشویی selectمیشه از لینک ها درداخلoption شون استفاده کرد
پاسخ
amir می گوید 5 سال پیش
سلام خسته نباشید میخواستم بدونم میشه این ul هارو بعد از div هم زد ؟ مثلا ما باdiv از این جدول بندیا ساختیم بعدش می تونیم اینارو قرار دهیم؟
پاسخ
آزاد می گوید 5 سال پیش
خدا خیرت بده، دهنم سرویس شده بود با این سایتهای خارجی
پاسخ
خسرو می گوید 5 سال پیش
داداش گلم ای کاش میشدیه فیلم اموزشی هم میزاشتید تا با دیدن تصویرهم ما مبتدیها هم فیض ببریم قربون قدو بالات ..یه عمردعات میکردم به خدا
پاسخ
amir mahdi می گوید 5 سال پیش
سلام من منویی ساختم که زیر اون نوشته هست حالا وقتی روی منو میرم و زیر منو باز میشه زیر منو میره زیر اون نوشته چیکار کنم که زیر منوی من زیر چیزی نره
پاسخ
taraneh می گوید 5 سال پیش
آموزش عالی و بینظیر
پاسخ
keyvan می گوید 5 سال پیش
سلام من منو کشویی تو سایت انجام دادم ولی وقتی زیر منو باز میشه میره در پشت تصویر و متن سایت قرار میگیره اگه یه لطف کنید راهنمایی کنید ممنون میشم
پاسخ
tina می گوید 5 سال پیش
با سلام..میخواستم ببینم با استفاده از منوی کشویی چطور میشه رنگ بک گراند رو تغییر داد البته در php؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
پاسخ
مهرداد می گوید 5 سال پیش
اقا سلام خسته نباشید یه سوال چطور میتونم یه ایکون هم بهش اضافه کنم؟ مثل سایت خودتون.ایکون دراپ داون برای لیستایی ک زیر مجموعه داارن
پاسخ
یک بنده خدا می گوید 5 سال پیش
چطور میتونم مثل خودتون یک منو که الا در سایت خودتون هست درست کنم
پاسخ
سینا می گوید 5 سال پیش
سلام در مورد این قطعه کد توضیحی ندادید.
nav ul:after {
content: "";
clear: both;
display: block;
}
پاسخ

ادامه دیدگاه ها صفحه 1 از 2

ارسال پاسخ