Выпадающее меню не подключается к липкой панели навигации при прокрутке

ProgramBox

Выпадающее меню не подключается к липкой панели навигации при прокрутке

Post author:admin
Запись опубликована:8 ноября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я создал заголовок, а под ним липкую панель навигации с выпадающим меню.

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

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

Я пытался исправить это в течение нескольких дней, но не могу заставить его работать.

 /* THIS IS FROM MY topnavigation.css*/

.topnav {
  position: sticky;
  top: 0px;
  overflow: hidden;
  background-color: rgb(2, 31, 70);
}

.topnav a {
  float: left;
  display: block;
  border-right:1px solid #bbb;
  width: 125px;
  font-size: 1.0em !important;
  font-family: 'verdana';
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  border-right:1px solid #bbb;
}

.dropdown .dropbtn {
  width: 125px;
  font-size: 17px;    
  border: 0;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  border-right:0px;
  border-bottom:1px solid #bbb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(53, 76, 105);
  color: white;
}

.dropdown-content a:hover {
  background-color: rgb(79, 111, 150);
  color: white;
}

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

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: auto;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
  }
}

/* THIS IS FROM MY style.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: rgb(3, 19, 34);
}

.header {
  top: 0px;
  padding: 40px;
  margin: auto;
  background-color: rgb(17, 54, 102);
  text-align: center;
  color: #ffffff;  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  min-height: calc(100vh - 157.88px - 70px);
}

/* Left and right column */
.column.side {
  width: 20%;
  margin-top: 1%;
}

.front.leftside.columns.content {
  width: 100%;

}

.front.rightside.columns.content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Middle column */
.column.middle {
  width: 60%;
}

.front.column.middle {
  width: 100%;
}

/* Artikel på forsiden */
.front.article {
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 781px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.sixteen.px {
  font-size: 16px;
}

.eighteen.px {
  font-size: 18px;
}

/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  }

/* Style the footer */
.footer {
  left: 0;
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 10px;
  background-color: rgb(2, 31, 70);
  text-align: center;
  color: #ffffff;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Website Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/topnavigation.css">
</head>

<body>

<header class="header">Mads Ottobrøker</header>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i> Forsiden</a>
  <a href="mig.html"><i class="fa fa-fw fa-user"></i> Om mig</a>
  <a href="cv.html"><i class="fa fa-fw fa-file-alt"></i> CV</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
    </button>
    <div class="dropdown-content">
      <a href="#">Webdesign</a>
      <a href="#">3D Grafik</a>
    </div>
  </div>
  <a href="kontakt.html"><i class="fa fa-fw fa-envelope"></i> Kontakt</a>
  <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>


<div class="row">
  <div class="column side">
    <div class="front leftside columns content">
        <img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
    </div>
  </div>

  <div class="column middle">
    <div class="front column middle">
      <div class="front article">
        <h1>Voksenelevplads søges!</h1>
        <p>
        <h2>Kontorelev med speciale i administration søger elevplads.</h2>
        </p>
        <p><i><h5>Dec 15, 2020</h5></i></p>
        <hr>
        <h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
        <p class="sixteen px">
          Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
          kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
          netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
          er et godt og spændende arbejde.
        </p>
        <p class="sixteen px">
          Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
        </p>
        <h3 class="eighteen px">Hvad jeg tilbyder:</h3>
        <p class="sixteen px">
          Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
          udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
          mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
          skiftende arbejdsfunktioner.
        </p>
        <p class="sixteen px">
          Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
          at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
          bl.a. har håndteret varelager, indkøb, salg og bestillinger.
        </p>
        <p class="sixteen px">
          Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
        </p>
        <p class="sixteen px">
          Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
        </p>
        <br>
        <br>
        <br>
      </div>
    </div>
  </div>

  <div class="column side">
    <div class="front rightside columns content">
      <a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
        href="https://twitter.com/MadsOttobroker?ref_src=twsrc^tfw">Tweets by MadsOttobroker</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className  = " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

<div class="footer">
  <p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>

</body>
</html>

Развернуть фрагмент

Выпадающее меню выглядит хорошо

Выпадающее меню больше не подключается к панели навигации после прокрутки

1. Вы можете попробовать добавить position: sticky; top: 48px к .dropdown-content , но при наведении курсора он увеличит высоту .topnav . Кроме того, если вы попытаетесь использовать родительский элемент с position: relative и .dropdown-content с position: absolute , он не будет отображаться из visibility: hidden -за этого. Эта разметка .topnav должна быть переработана, потому что я предполагаю, что для этого нет возможностей CSS.

Ответ №1:

position: fixed; Включение .dropdown-content приводит к тому, что этот элемент находится относительно окна браузера и игнорирует любого родителя или дедушку, в котором он находится, поэтому он все время остается в одном и том же месте. Если на вашей странице было много контента, делающего страницу выше, вы бы прокручивали, и этот элемент оставался бы на том же месте.

Переключение на него position: absolute; расположит его относительно родительского элемента.
Затем удалите overflow: hidden; из .topnav и .dropdown , поскольку это отключено.
Затем .topnav , добавьте width: 100%; и float: left; .

 /* THIS IS FROM MY topnavigation.css*/

.topnav {
  position: sticky;
  top: 0px;
  /* overflow: hidden; */
  background-color: rgb(2, 31, 70);
  float: left;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  border-right:1px solid #bbb;
  width: 125px;
  font-size: 1.0em !important;
  font-family: 'verdana';
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  /* overflow: hidden; */
  border-right:1px solid #bbb;
}

.dropdown .dropbtn {
  width: 125px;
  font-size: 17px;    
  border: 0;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  border-right:0px;
  border-bottom:1px solid #bbb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(53, 76, 105);
  color: white;
}

.dropdown-content a:hover {
  background-color: rgb(79, 111, 150);
  color: white;
}

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

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: auto;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
  }
}

/* THIS IS FROM MY style.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: rgb(3, 19, 34);
}

.header {
  top: 0px;
  padding: 40px;
  margin: auto;
  background-color: rgb(17, 54, 102);
  text-align: center;
  color: #ffffff;  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  min-height: calc(100vh - 157.88px - 70px);
}

/* Left and right column */
.column.side {
  width: 20%;
  margin-top: 1%;
}

.front.leftside.columns.content {
  width: 100%;

}

.front.rightside.columns.content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Middle column */
.column.middle {
  width: 60%;
}

.front.column.middle {
  width: 100%;
}

/* Artikel på forsiden */
.front.article {
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 781px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.sixteen.px {
  font-size: 16px;
}

.eighteen.px {
  font-size: 18px;
}

/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  }

/* Style the footer */
.footer {
  left: 0;
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 10px;
  background-color: rgb(2, 31, 70);
  text-align: center;
  color: #ffffff;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Website Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/topnavigation.css">
</head>

<body>

<header class="header">Mads Ottobrøker</header>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i> Forsiden</a>
  <a href="mig.html"><i class="fa fa-fw fa-user"></i> Om mig</a>
  <a href="cv.html"><i class="fa fa-fw fa-file-alt"></i> CV</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
    </button>
    <div class="dropdown-content">
      <a href="#">Webdesign</a>
      <a href="#">3D Grafik</a>
    </div>
  </div>
  <a href="kontakt.html"><i class="fa fa-fw fa-envelope"></i> Kontakt</a>
  <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>


<div class="row">
  <div class="column side">
    <div class="front leftside columns content">
        <img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
    </div>
  </div>

  <div class="column middle">
    <div class="front column middle">
      <div class="front article">
        <h1>Voksenelevplads søges!</h1>
        <p>
        <h2>Kontorelev med speciale i administration søger elevplads.</h2>
        </p>
        <p><i><h5>Dec 15, 2020</h5></i></p>
        <hr>
        <h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
        <p class="sixteen px">
          Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
          kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
          netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
          er et godt og spændende arbejde.
        </p>
        <p class="sixteen px">
          Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
        </p>
        <h3 class="eighteen px">Hvad jeg tilbyder:</h3>
        <p class="sixteen px">
          Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
          udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
          mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
          skiftende arbejdsfunktioner.
        </p>
        <p class="sixteen px">
          Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
          at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
          bl.a. har håndteret varelager, indkøb, salg og bestillinger.
        </p>
        <p class="sixteen px">
          Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
        </p>
        <p class="sixteen px">
          Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
        </p>
        <br>
        <br>
        <br>
      </div>
    </div>
  </div>

  <div class="column side">
    <div class="front rightside columns content">
      <a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
        href="https://twitter.com/MadsOttobroker?ref_src=twsrc^tfw">Tweets by MadsOttobroker</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className  = " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

<div class="footer">
  <p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>

</body>
</html>

Развернуть фрагмент

Ответ №2:

В вашем коде есть две проблемы. Исправьте эти два CSS, и вы получите ожидаемое поведение.

Во-первых, position: fixed в .dropdown-content . Поскольку position: fixed элемент расположен относительно окна браузера. Измените его на position: absolute .

 .dropdown-content {
  display: none;
  //position: fixed;
  position: absolute;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

Во-вторых, overflow: hidden .topnav в. Я предполагаю, что вы используете это для создания контекста форматирования на уровне блоков. Поэтому вместо использования overflow: hidden для форматирования на уровне блоков добавьте display: flow-root .topnav css.

 .topnav {
  position: sticky;
  top: 0px;
  //overflow: hidden;
  background-color: rgb(2, 31, 70);
  display: floot-root;
 }

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

R преобразование выходного списка из runner в фрейм данных

Как перехватить исключение, вызванное функцией, назначенной для onload в javascript

Как я могу запретить пользователю перейти к следующему шагу, не заполнив все необходимые заполненные?