在应用了 clip-path 的 css 网格列中显示隐藏的下拉菜单

Question

我有一个来自 Django 的管理员 header，它分为 2 列 css 网格。我在用户图标上添加了 JavaScript 下拉效果以显示其他元素，例如 "Change Password" 和 "Log Out" 但问题是下拉列表隐藏在列内，不显示在列外。

我需要提到 drop-down 留在容器中 clip-path: polygon applied.

我该如何解决这个问题？

提前致谢，

网络开发新手

所附图片将准确显示上述情况：

强制高度为 header 以显示下拉菜单：

您可以在下面找到部分 Django 代码：

{% load i18n static %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
{% block extrastyle %}{% endblock %}
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
{% block extrahead %}
    {{ block.super }}
    <script>
        /* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function openDropdown() {
          document.getElementById("myDropdown").classList.toggle("show");
        }
        // Close the dropdown if the user clicks outside of it
        window.onclick = function(event) {
          if (!event.target.closest('.dropbtn')) {
            let dropdowns = document.getElementsByClassName("dropdown-content");
            let i;
            for (i = 0; i < dropdowns.length; i++) {
              let openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }
          }
        }
    </script>
{% endblock %}

Header Django 中的代码

<div id="header">
        <div id="branding">
        {% block branding %}{% endblock %}
        </div>
        {% block usertools %}
        {% if has_permission %}
        <div id="user-tools">
            {% block welcome-msg %}
                {% trans 'Welcome,' %}
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            {% endblock %}
            {% block userlinks %}
{#                {% if site_url %}#}
{#                    <a href="{{ site_url }}">{% trans 'View site' %}</a> /#}
{#                {% endif %}#}
                {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                        <a href="{{ docsroot }}">{% trans 'Documentation' %}</a> /
                    {% endif %}
                {% endif %}
            <div class="dropdown">
                <button onclick="openDropdown()" class="dropbtn"><img src="{% static "admin/img/user.svg"%}" alt="User Menu" style="height: 30px;"></button>
                <div id="myDropdown" class="dropdown-content">
                    {% if user.has_usable_password %}
                    <a href="{% url 'admin:password_change' %}">{% trans 'Change password' %}</a> /
                    {% endif %}
                    <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
                </div>
            </div>
            {% endblock %}
        </div>

我正在显示下拉菜单的 CSS：

/* Dropdown in navbar */

.dropbtn {
  background-color: #0071ce;
  color: white;
  /*padding: 16px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #005ba6;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  /*overflow: auto;*/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
  right: 0.5rem;
}

.dropdown-content a {
  color: black !important;
  padding: 1rem 1rem !important;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

Answer 1

下拉内容需要绝对定位，并且具有比要显示的内容更高的 z-index。

Codepen 或类似工具可以帮助简化此操作。

Answer 2

我 copy/pasted 你的代码在下面的代码片段中，来自 #header 的评论 overflow: hidden; 似乎有效，不是吗？

/* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function openDropdown() {
         const myDropdown = document.getElementById("myDropdown");
          const show = document.getElementById("myDropdown").classList.toggle("show");
          
          if(show){
           const {top, left, width} = myDropdown.getBoundingClientRect();
            myDropdownClone = myDropdown.cloneNode(true);
            myDropdownClone.style.width = `${width}px`;
            myDropdownClone.style.top = `${top}px`;
            myDropdownClone.style.left = `${left}px`;
            myDropdownClone.style.position = 'fixed';
            myDropdownClone.id = 'myDropdownClone';
            document.body.append(myDropdownClone);
          } else {
           document.getElementById("myDropdownClone").remove();
          }
          
        }
        // Close the dropdown if the user clicks outside of it
        window.onclick = function(event) {
          if (!event.target.closest('.dropbtn')) {
            let dropdowns = document.getElementsByClassName("dropdown-content");
            let i;
            for (i = 0; i < dropdowns.length; i++) {
              let openDropdown = dropdowns[i];
              if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
              }
            }
          }
        }

#header {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  background: #417690;
  color: #ffc;
   /* overflow: hidden; */
   clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#header {
  background: #FFF;
  -moz-box-shadow: 0 3px 3px 0 rgba(148, 148, 148, 0.5);
  box-shadow: 0 3px 3px 0 rgba(148, 148, 148, 0.5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "logo navbar";
}

.dropbtn {
  background-color: #0071ce;
  color: white;
  /*padding: 16px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #005ba6;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  /*overflow: auto;*/
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
  right: 0.5rem;
}

.dropdown-content a {
  color: black !important;
  padding: 1rem 1rem !important;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

<div id="header">
  <div id="branding">

  </div>

  <div id="user-tools">

    <strong>My name</strong>.

    <a href="#">View site</a>
    <a href="#">trans Documentation</a> /

    <div class="dropdown">
      <button onclick="openDropdown()" class="dropbtn"><img src="" alt="User Menu" style="height: 30px;"></button>
      <div id="myDropdown" class="dropdown-content">

        <a href="#">Change password</a> /
        <a href="#">Log out</a>
      </div>
    </div>
  </div>
</div>

[编辑] 我编辑了代码片段以考虑评论中提到的 clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%);

Answer 3

对于带有剪辑路径的容器内的下拉菜单，最好的解决方案是添加一个额外的 div，就像在此处找到的解决方案一样：

在应用了 clip-path 的 css 网格列中显示隐藏的下拉菜单

Display a dropdown hidden in a css grid column with clip-path applied

javascript

css

django

grid

django-admin