Как сделать мою адаптивную навигационную панель липкой, используя только HTML и CSS? - PullRequest
Новая
       106

Как сделать мою адаптивную навигационную панель липкой, используя только HTML и CSS?

1 голос
/ 04 августа 2020

Итак, в настоящее время у меня есть панель навигации, которая реагирует на размер экрана, созданного только с помощью HTML и CSS. Но я хочу, чтобы он оставался привязанным к контейнеру, а также оставался отзывчивым к экранам разных размеров. Есть ли способ сделать это только с HTML и CSS? Я включил в этот пост адаптивный код Navbar, который я хотел бы обновить и сделать липким. 

body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

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

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="sidebar">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>

  <div class="content">
    <h2>Responsive Sidebar Example</h2>
    <p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
    <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
    <h3>Resize the browser window to see the effect.</h3>
  </div>

</body>

</html>

```

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

Вы также можете использовать position:sticky; и top:0 в своем первом медиа-запросе, чтобы навигационная панель оставалась на месте вверху, даже при прокрутке. Это будет работать лучше, чем position:fixed, потому что контент не будет скользить вверх за заголовком, пока вы находитесь наверху.

Редактировать - встроенный код напрямую. 

body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #4caf50;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div class="sidebar">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>

  <div class="content">
    <h2>Responsive Sidebar Example</h2>
    <p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
    <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
    <h3>Resize the browser window to see the effect.</h3>
  </div>

</body>

</html>
0 голосов
/ 04 августа 2020

Вам понадобится position: fixed; и фактическая позиция, например top: 0;.

Но также вы можете использовать свойство position: sticky; вместо этого, чтобы избежать перекрытия содержимого, как и в другом упомянутом ответе. Здесь вы можете увидеть поддержку браузера , которая неплохо подходит для фиксированной позиции, но немного хуже, чем фиксированная. 

body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

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

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
  }
  .sidebar a {
    float: left;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>

  </style>
</head>

<body>

  <div class="sidebar">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>

  <div class="content">
    <h2>Responsive Sidebar Example</h2>
    <p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
    <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
    <h3>Resize the browser window to see the effect.</h3>
  </div>

</body>

</html>
...