Адаптивный дизайн topnavigation - PullRequest
Новая
       35

Адаптивный дизайн topnavigation

0 голосов
/ 23 октября 2018

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

Проблема в том,максимальная ширина: 576 пикселей.

nav {
  width: 17%;
  float: left;
  padding-top: 4px;
  margin-left: 0.5em;
  margin-right: 0.6em;
}


/*210/1200*/

nav ul {
  list-style: none;
  padding-left: 2.14%;
}


/*3/140? = 0.125% ändra padding til procent här?*/

nav ul ul {
  margin-left: 5%;
}

nav li {
  margin-top: 2px;
  display: block;
}

nav a {
  display: block;
  border: 1px solid grey;
  padding: 4px;
  text-decoration: none;
  color: white;
  border-radius: 5px 5px 5px 5px;
  background-color: #225d66;
}


/*display block gör att länkarna fyller ut hela bredden för kolumen*/

nav a:link {
  background-color: #225d66;
}

nav a:hover {
  background-color: #22a4b3;
}

nav ul li ul li {
  padding-top: 1px;
  display: block;
}

#lokalnav a {
  background-color: #2e7d87;
}

#lokalnav a:hover {
  background-color: #3fa9b5;
}

nav #thisPage:before {
  content: "> ";
}

nav #thisPage {
  color: yellow;
}

nav #thisSection:before {
  content: "> ";
}

nav #thisSection {
  color: yellow;
}

.submenu {
  cursor: pointer;
  display: block;
}

.submenu ul {
  display: none;
}

.submenu input {
  display: none;
}

.submenu input:checked~ul {
  display: block;
}

@media screen and (max-width: 620px) {
  nav {
    float: none;
    width: 100%;
    margin-top: -22px;
    margin-left: 1px;
  }
  nav ul li {
    display: inline-block;
    position: relative;
  }
  nav a {
    text-align: center;
    border-radius: 0px 0px 5px 5px;
    padding: 7px 12px 7px 12px;
  }
  #lokalnav {
    position: absolute;
    z-index: 1;
  }
  nav ul li ul li {
    margin-top: 0px;
    margin-bottom: 0;
  }
  nav ul li a:not(:only-child):after {
    content: " ▾";
    padding-left: 6px;
  }
  #dropdownbtn {
    padding-top: 4px;
  }
  .topnav a {
    padding-right: 2px;
  }
  main {
    margin: 2px;
  }
  header {
    height: 170px;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  #coursenotes {
    float: none;
    font-size: 11px;
    width: 100%;
    margin-bottom: -70px;
    font-size: 12px;
    padding-left: 10px;
  }
  #content {
    float: none;
    width: 100%;
  }
  #coursenotes a:hover {
    font-size: 10px;
  }
}

@media screen and (max-width:576px) {
  header {
    background-size: contain;
  }
  #steps figure {
    float: none;
  }
}

@media screen and (max-width: 480px) {
  nav ul li {
    display: block;
    width: 100%;
  }
}
<nav>
  <ul>
    <li><a href="inlogpage.html">Hem</a></li>
    <li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
      <ul id="lokalnav">
        <li><a href="matematik.html" id="thisPage">Matte</a></li>
        <li><a href="svenska.html">Svenska</a></li>
        <li><a href="engelska.html">Engelska</a></li>
        <li><a href="no.html">NO</a></li>
        <li><a href="bild.html">Bild</a></li>
        <li><a href="so.html">SO</a></li> 
      </ul>
     </label>
    </li>
    <li><a href="minainlämningar.html" id="thisSection">Mina Inlämningar</a></li>
    <li><a href="laxhjalp.html">Läxhjälp</a></li>
    <li><a href="kontaktformular.html">Kontakt</a></li>
  </ul>
</nav>

Ответы [ 3 ]

0 голосов
/ 23 октября 2018 
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>
<br>

</body>
</html>
0 голосов
/ 23 октября 2018

Добавьте этот стиль CSS к медиа-запросам max-width: 576px 

   #lokalnav {
      position: relative;
    }
0 голосов
/ 23 октября 2018

удалить position:absolute из нижнего класса в медиа-запросе.также проверьте обновленный фрагмент кода 

  #lokalnav {
    z-index: 1;
  }


nav {
  width: 17%;
  float: left;
  padding-top: 4px;
  margin-left: 0.5em;
  margin-right: 0.6em;
}


/*210/1200*/

nav ul {
  list-style: none;
  padding-left: 2.14%;
}


/*3/140? = 0.125% ändra padding til procent här?*/

nav ul ul {
  margin-left: 5%;
}

nav li {
  margin-top: 2px;
  display: block;
}

nav a {
  display: block;
  border: 1px solid grey;
  padding: 4px;
  text-decoration: none;
  color: white;
  border-radius: 5px 5px 5px 5px;
  background-color: #225d66;
}


/*display block gör att länkarna fyller ut hela bredden för kolumen*/

nav a:link {
  background-color: #225d66;
}

nav a:hover {
  background-color: #22a4b3;
}

nav ul li ul li {
  padding-top: 1px;
  display: block;
}

#lokalnav a {
  background-color: #2e7d87;
}

#lokalnav a:hover {
  background-color: #3fa9b5;
}

nav #thisPage:before {
  content: "> ";
}

nav #thisPage {
  color: yellow;
}

nav #thisSection:before {
  content: "> ";
}

nav #thisSection {
  color: yellow;
}

.submenu {
  cursor: pointer;
  display: block;
}

.submenu ul {
  display: none;
}

.submenu input {
  display: none;
}

.submenu input:checked~ul {
  display: block;
}

@media screen and (max-width: 620px) {
  nav {
    float: none;
    width: 100%;
    margin-top: -22px;
    margin-left: 1px;
  }
  nav ul li {
    display: inline-block;
    position: relative;
  }
  nav a {
    text-align: center;
    border-radius: 0px 0px 5px 5px;
    padding: 7px 12px 7px 12px;
  }
  #lokalnav {
    z-index: 1;
  }
  nav ul li ul li {
    margin-top: 0px;
    margin-bottom: 0;
  }
  nav ul li a:not(:only-child):after {
    content: " ?";
    padding-left: 6px;
  }
  #dropdownbtn {
    padding-top: 4px;
  }
  .topnav a {
    padding-right: 2px;
  }
  main {
    margin: 2px;
  }
  header {
    height: 170px;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  #coursenotes {
    float: none;
    font-size: 11px;
    width: 100%;
    margin-bottom: -70px;
    font-size: 12px;
    padding-left: 10px;
  }
  #content {
    float: none;
    width: 100%;
  }
  #coursenotes a:hover {
    font-size: 10px;
  }
}

@media screen and (max-width:576px) {
  header {
    background-size: contain;
  }
  #steps figure {
    float: none;
  }
}

@media screen and (max-width: 480px) {
  nav ul li {
    display: block;
    width: 100%;
  }
}
<nav>
  <ul>

    <li><a href="inlogpage.html">Hem</a></li>
    <li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
 
         <ul id="lokalnav">
             <li><a href="matematik.html" id="thisPage">Matte</a></li>
             <li><a href="svenska.html">Svenska</a></li>
             <li><a href="engelska.html">Engelska</a></li>
             <li><a href="no.html">NO</a></li>
             <li><a href="bild.html">Bild</a></li>
             <li><a href="so.html">SO</a></li> 
         </ul>
         </label>
    </li>

    <li><a href="minainlämningar.html" id="thisSection">Mina Inlämningar</a></li>
    <li><a href="laxhjalp.html">Läxhjälp</a></li>
    <li><a href="kontaktformular.html">Kontakt</a></li>

  </ul>

</nav>
...