Сделать отзывчивую панель навигации - PullRequest
Новая
       40

Сделать отзывчивую панель навигации

0 голосов
/ 07 апреля 2020

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

Для настольных ПК панель навигации выглядит правильно, для мобильных устройств панель навигации не разрушается.

Ниже фрагмента приведена панель навигации из примеров W3Schools - 

<body>
    <div class="nav navbar"  body {background-color:#000000;font-weight: bold;font-size: 15px;color: red;} >
        <ul class="nav nav-tabs">
            <li class="active"><a class="t1" data-toggle="tab" href="#tab_google_search">Search</a>
            </li>

.. .. 

    <div class="tab-content">
        <div id="tab_google_search" class="tab-pane fade in active">
            <iframe id="google_search" src="https://www.google.com/" frameborder="0" scrolling = "yes"></iframe>
          </div>
        </div>

Каковы возможные изменения для работы моего сайта для мобильных устройств

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Попробуйте это: 

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

<head>
  <title>Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <a class="navbar-brand" href="#">My WebsiteName</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="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <br>

  <div class="container">
    <h3>Hello World</h3>
  </div>

</body>

</html>

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

Примечание: Я использовал Bootstrap v4.0 (последний фреймворк).

Надеюсь, это поможет.

0 голосов
/ 07 апреля 2020

Вы хотите сделать складную панель навигации. Он называется медиа-запросом, по которому навигационная панель веб-сайта сравнивается с экраном.

Bootstrap - лучший инструмент для создания адаптивного веб-сайта. Для Bootstrap вам не требуется медиазапрос, и эта структура предназначена для ускорения процесса разработки. Приведенный ниже фрагмент кода скопирован из другого ответа , только для целей понимания. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="navbar navbar-inverse">
  <div class="container">
    <a href="#" class="navbar-brand">MyWebsite</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="">Home</a>
        </li>
        <li><a href="">about</a>
        </li>
        <li><a href="">contact</a>
        </li>
        <li><a href="">search</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Запустите фрагмент в полноэкранном режиме, чтобы избежать мобильного просмотра веб-сайта

...