Проблема производительности раскрывающегося меню SCSS - PullRequest
Новая
       7

Проблема производительности раскрывающегося меню SCSS

0 голосов
/ 05 декабря 2018

Я пытаюсь создать раскрывающееся меню с помощью шаблона этого меню: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

Однако в моем браузере раскрывающееся меню медленно реагирует при наведении, если оно отображается привсе, что является причиной этого?

Примечание: код (функциональность и дизайн раскрывающегося меню) работает, но он очень мерцающий, когда ловит зависание, в отличие от w3Schoolsпример.

Очень конкретный пример проблемы заключается в том, что, когда я немного отводю мышь от зависания и возвращаюсь к зависанию, зависание вообще не активирует раскрывающуюся функцию.

SCSS (Частицы содержат только смешанные и объявления переменных для простых элементов проектирования, не ожидается, что они сильно повлияют на производительность.): 

@import 'color';
@import 'box-shadow';
@import 'border';

@mixin dropdown-template() {
    ul {
        list-style-type: none;
        margin: -10px 150px 0 0;
        padding: 0;
        overflow: hidden;
      }

      li {
        float: right;
      }

      li a, .dropbtn {
        display: inline-block;
        color: $netflix-black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover, .dropdown:hover .dropbtn {
        background-color: $netflix-red;
      }

      li.dropdown {
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        max-width: 200;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

      .dropdown-content a:hover {
          background-color: #f1f1f1
        }

      .dropdown:hover .dropdown-content {
        display: block;
      }
}

и SCSS позже напрямуюскомпилирован в CSS-файл, связанный с CSS: 

#ULTRAHEADER { 
    background: $linear-gradient-facebook-dark;
    & h1 {
        text-align: left;
        margin-left: 40px;
    }
    @include dropdown-template;
}

и соответствующий HTML: 

   <header id="ULTRAHEADER">
    <h1>Principles</h1> <!-- The Meta-Title above 4 AoL -->
    <ul>
        <li class="dropdown"><a class="dropbtn">Spiritual</a>
        <div class="dropdown-content">
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Boost your odds of success through de-centralized principle-guided decision-making.
                </a>
                <a href="markups/IntPrinHTML/ApplyPrin.html">
                    Apply Principles in Comple Sub-systems of Reality
                </a>
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Learn, Grow, Evolve. Be Anti-Fragile.        
                </a>
          </div>
        </li>
        <li class="dropdown"><a class="dropbtn">Relationship</a>
        <div class="dropdown-content">
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Boost your odds of success through de-centralized principle-guided decision-making.
                </a>
                <a href="markups/IntPrinHTML/ApplyPrin.html">
                    Apply Principles in Comple Sub-systems of Reality
                </a>
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Learn, Grow, Evolve. Be Anti-Fragile.        
                </a>
          </div>
        </li>
        <li class="dropdown"><a class="dropbtn">Physical</a>
          <div class="dropdown-content">
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Boost your odds of success through de-centralized principle-guided decision-making.
                </a>
                <a href="markups/IntPrinHTML/ApplyPrin.html">
                    Apply Principles in Comple Sub-systems of Reality
                </a>
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Learn, Grow, Evolve. Be Anti-Fragile.        
                </a>
          </div>
        </li>
        <li class="dropdown"><a class="dropbtn">Intellectual</a>
            <div class="dropdown-content">
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Boost your odds of success through de-centralized principle-guided decision-making.
                </a>
                <a href="markups/IntPrinHTML/ApplyPrin.html">
                    Apply Principles in Comple Sub-systems of Reality
                </a>
                <a href="markups/IntPrinHTML/BoostOdds.html">
                    Learn, Grow, Evolve. Be Anti-Fragile.        
                </a>
            </div>
          </li>
      </ul>
    </header>

Пожалуйста, попросите любую другую информацию, которая вам нужна, спасибо

...