تمرین جلسه دهم - باز شدن زیر منو فقط هنگام کلیک کردن

Question

با سلام خدمت استاد گرامی و دوستان عزیز

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

برای اینکار به جای استفاده از hover: باید از focus-within: استفاده کنید.در اینصورت property ها وقتی عمل می‌کنند که focus روی عناصر child ( زیر منو ) صورت بگیرد.

کد های HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7Learn-project</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="menu">
      <ul class="list">
        
        <li class="list-item , host">
          <a href="#"
            >Hosting<i class="material-icons , host-down">expand_more</i
            ><i class="material-icons , host-up , up">expand_less</i></a
          >
          <ul id="host" class="submenu">
            <li class="submenu-item">
              <a href="#">
                <h3>Shared Web Hosting</h3>
                <p>For small to medium websites</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Cloud Hosting</h3>
                <p>For large scale project</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Email Hosting</h3>
                <p>Promote your business every outreach.</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item , vps">
          <a href="#"
            >VPS<i class="material-icons , vps-down">expand_more</i
            ><i class="material-icons , vps-up , up">expand_less</i></a
          >
          <ul id="vps" class="submenu">
            <li class="submenu-item">
              <a href="#">
                <h3>VPS Hosting</h3>
                <p>Dedicated resources to scale.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Minecraft Hosting</h3>
                <p>Share your Minecraft experience.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Windows VPS</h3>
                <p>Windows OS based on VPS solutions.</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item , domain">
          <a href="#"
            >Domain<i class="material-icons , domain-down">expand_more</i
            ><i class="material-icons , domain-up , up">expand_less</i></a
          >
          <ul id="domain" class="submenu">
            <li class="submenu-item">
              <a href="#">
                <h3>Domain Checker</h3>
                <p>Find the perfect domain name.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>WHOIS Database</h3>
                <p>Lookup tool to find WHOIS information.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Domain Transfer</h3>
                <p>Want to transfer you domain to Hostinger?</p>
              </a>
            </li>
          </ul>
        </li>
      </ul><div class="expand-less"></div>
    </nav>
    
  </body>
</html>

کد های CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
  font-family: "Noto Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-size: 18px;
  list-style-type: none;
}
.menu {
  height: 50px;
  background-color: darkgrey;
  position: relative;
}
.list {
  height: 100%;
}
.list-item {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  margin: 11px 9px 0 9px;
  position: relative;
}
li.list-item a {
  color: rgb(34, 33, 33);
  height: 50px;
}
.material-icons {
  vertical-align: -6px;
}
.up{
  display: none;
}
.submenu {
  background-color: darkolivegreen;
  position: absolute;
  width: 389px;
  max-height: 250px;
  top: 39px;
  left: 0px;
  display: none;
}
.submenu-item {
  text-align: left;
  margin: 9px;
  text-decoration: none;
}
.expand-less{
  position: absolute;
  width: 100%;
  height: 50px;
  top: 0;
  display: none;
}
.host:focus-within #host{
  display: block;
}
.host:focus-within .host-down{
  display: none;
}
.host:focus-within .host-up{
  display: inline-block;
}
.vps:focus-within #vps{
  display: block;
}
.vps:focus-within .vps-down{
  display: none;
}
.vps:focus-within .vps-up{
  display: inline-block;
}
.domain:focus-within #domain{
  display: block;
}
.domain:focus-within .domain-down{
  display: none;
}
.domain:focus-within .domain-up{
  display: inline-block;
}

ببخشید که کدها یکم نامرتب هستند.

در ضمن من از UI سایت Hostinger استفاده کردم.

با تشکر فراوان

طراحی وب

سپهر صحرائیان

21 خرداد 99

Answer 1

حذف شده

عرض سلام و ادب خدمت همه دوستان و استاد گرامی

آقا سپهر ممنون بابت راهنماییتون، خیلی عالی

فقط من تو یه کار تمرینی از سودو کلس focus-within به جای hover که استفاده می کنم، زیر منو یه لحظه نمایش داده میشه و بعدش سریع بسته میشه.

ممنون میشم فایل ها رو چک کنید اگه کسی راه حلش رو پیدا کرد بهم بگه.

فایل پیوست

newfolder2.rar

201.33 KB

توسط

پویا پارسایی

22 خرداد 00

تمرین جلسه دهم - باز شدن زیر منو فقط هنگام کلیک کردن

سوالات مرتبط