علی جمالی

4 سال پیش توسط علی جمالی مطرح شد

نمایش دادن پس از کلیک

سلام
من یک منو درست کردم و میخوام پس از کلیک روی (نمایش منو) منو نمایش داده بشه

display: none;

گذاشتم اما برای نمایشش چیکار کنم.

html_css

html

منو

ثبت پرسش جدید

moha li

تخصص : توسعه دهنده لاراول و Vue

@mohaligateway 4 سال پیش مطرح شد

سلام

 li {
  list-style-type: none;
}
.responsive-menu {
  display: block;
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 200%;
}
.responsive-menu ul li ul li {
  padding: 10px;
  border-bottom: solid 1px white;
  border-top: solid 1px white;
}
.responsive-menu ul li ul {
  display: none;
  font-size: 60%;
  padding-top: 30px;
}
#trigger {
  display: none;
}
#trigger:checked + .responsive-menu ul li:hover ul {
  display: block;
}

و html

 <input type="checkbox" id="trigger" />
 
<div class="responsive-menu">
  <ul>
    <li>
      <label for="trigger">Menu</label>
      <ul>
        <li>Zomer</li>
        <li>Herfst</li>
        <li>Winter</li>
        <li>Lente</li>
      </ul>
    </li>
  </ul>
</div>

@ali09100772277

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

این مثال رو ببینید:
https://www.w3schools.com/howto/howto_js_dropdown.asp

ارسال پاسخ

علی جمالی

تخصص : برنامه نویس وب

@alijamali 4 سال پیش مطرح شد

ممنون از همه

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

نمایش دادن پس از کلیک

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	li {
	list-style-type: none;
	}
	.responsive-menu {
	display: block;
	background-color: black;
	color: white;
	text-align: center;
	padding: 10px;
	font-size: 200%;
	}
	.responsive-menu ul li ul li {
	padding: 10px;
	border-bottom: solid 1px white;
	border-top: solid 1px white;
	}
	.responsive-menu ul li ul {
	display: none;
	font-size: 60%;
	padding-top: 30px;
	}
	#trigger {
	display: none;
	}
	#trigger:checked + .responsive-menu ul li:hover ul {
	display: block;
	}

	<input type="checkbox" id="trigger" />

	<div class="responsive-menu">
	<ul>
	<li>
	<label for="trigger">Menu</label>
	<ul>
	<li>Zomer</li>
	<li>Herfst</li>
	<li>Winter</li>
	<li>Lente</li>
	</ul>
	</li>
	</ul>
	</div>