如何使纯CSS下拉菜单与两个可重定向的链接一起使用？

2024-04-20 • 问答

我已经创建了一个下拉菜单，其中包含2个链接。但是似乎当我单击“联系人”按钮，然后单击所需的链接时，它只是关闭了下拉菜单，而没有将用户重定向到任何地方。我在某处读到这是因为另一个鼠标按下事件会触发：focus基本上未聚焦吗？如何使该菜单起作用？我只懂一点点的javascript。

下面的HTML-

<div class="contact">
            <button class="contactbtn">Contact</button>
            <ul>
               <li>
                  <p>For Any Enquiries→</p>
               </li>
               <li><a id="mail" href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
               <li>+44 7463 070158</li><br>
               <li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
            </ul>
         </div>

    .contact {
       position: relative;
       top: 5vh;
       right: 0;
       font-family: Helvetica,sans-serif;
       height: 10vh;
       letter-spacing: 3px;
    
    }
    
    .contactbtn {
       color: black;
       text-transform: uppercase;
       font-size: 1.5rem;
       font-weight: bold;
       background: none;
       border: none;
       text-decoration: none;
       cursor: pointer;
       outline: none;
    
    }
    
    .contactbtn:hover {
       opacity: 0.6;
    }
    
    .contact ul,.contact-a ul {
       position: absolute;
       left: -10vw;
       margin-top: 20px;
       width: 300px;
       height: 150px;
       font-size: 1.5rem;
       font-weight: bold;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       align-items: flex-end;
       list-style: none;
       text-transform: uppercase;
       font-size: 1rem;
       opacity: 0;
       pointer-events: none;
       transform: translateY(-10px);
       transition: all 0.4s ease;
    }
    
    .contact a,.contact-a a {
       color: black;
       text-decoration: none;
    }
    
    .contact a:hover,.contact-a a:hover {
       /* opacity: 0.6; */
       background-color: var(--grCol3);
    }
    
    .contactbtn:focus+ul {
       opacity: 1;
       pointer-events: all;
       transform: translateY(0);
       outline: none;
    }
    

    .contact-a {
       position: absolute;
       top: 5vh;
       left: 5vw;
       font-family: Helvetica,sans-serif;
       height: 10vh;
       letter-spacing: 3px;
       color: var(--grCol3);
    }
    
    .contact-a ul {
       align-items: flex-start;
       left: 0;
    }

 <div class="contact-a">
            <button class="contactbtn">Contact</button>
            <ul class="contact-content">
               <li>
                  <p>For Any Enquiries→</p>
               </li>
               <li><a href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
               <li>+44 7463 070158</li><br>
               <li><a href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
            </ul>
         </div>

这是因为您为无序列表设置了pointer-events: none。这也会影响它的孩子<li>。

.contact ul,.contact-a ul {
   position: absolute;
   left: -10vw;
   margin-top: 20px;
   width: 300px;
   height: 150px;
   font-size: 1.5rem;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   pointer-events: none;  <<<<<<<<<<<<<<<<<<<<  cause of problem
   transform: translateY(-10px);
   transition: all 0.4s ease;
}

最好删除它。

将焦点逻辑应用于容器，而不使用按钮：

.contact {
  position: relative;
  top: 5vh;
  right: 0;
  font-family: Helvetica,sans-serif;
  height: 10vh;
  letter-spacing: 3px;
}

.contactbtn {
  color: black;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.contactbtn:hover {
  opacity: 0.6;
}

.contact ul,.contact-a ul {
  position: absolute;
  left: -10vw;
  margin-top: 20px;
  width: 300px;
  height: 150px;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  list-style: none;
  text-transform: uppercase;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}

.contact a,.contact-a a {
  color: black;
  text-decoration: none;
}

.contact a:hover,.contact-a a:hover {
  /* opacity: 0.6; */
  background-color: var(--grCol3);
}

.contact-a:focus ul {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  outline: none;
}

.contact-a {
  position: absolute;
  top: 5vh;
  left: 5vw;
  font-family: Helvetica,sans-serif;
  height: 10vh;
  letter-spacing: 3px;
  color: var(--grCol3);
  outline: none;
}

.contact-a ul {
  align-items: flex-start;
  left: 0;
}

<div class="contact-a" tabindex="-1">
  <div class="contactbtn">Contact</div>
  <ul class="contact-content">
    <li>
      <p>For Any Enquiries→</p>
    </li>
    <li><a href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
    <li>+44 7463 070158</li><br>
    <li><a href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
  </ul>
</div>

如何使纯CSS下拉菜单与两个可重定向的链接一起使用？

iCMS 回答：如何使纯CSS下拉菜单与两个可重定向的链接一起使用？

大家都在问