Как мне превратить существующую адаптивную панель навигации в меню гамбургеров для небольших экранов? - PullRequest
Новая
       32

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

0 голосов
/ 03 мая 2018

Я разработал адаптивную навигационную панель, и мне до сих пор нравится стиль. Однако, несмотря на то, что он является адаптивным по своей природе, он не создает меню гамбургеров, когда разрешение минимизировано. Есть ли способ добавить код в мою существующую панель навигации для создания этого эффекта (без потери стиля)? Извиняюсь, если мой код немного небрежный. Любая помощь приветствуется.

enter image description here

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="index.html" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<style type="text/css">
body,td,th {
color: #CCC;
}
body {
background-image: url(images/bg-main.jpg);
}
</style>
</head>
<body>
<div class="feed">
<img src="images/bg-nav.png" class="trw" alt="header" longdesc="http://roguewarriorstc.com"> </div>
<div id="LayoutDiv1">
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#contact">Online Dojo</a>
<a href="#tenshin">TenShin Aikido</a>
<a href="#tsaa">TSAA</a>
<a href="#events">Live Events</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#forum">Forum</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div> 

</div>

</body>
</html>




@charset "utf-8";
/* CSS Document */
/* Show in default resolution screen*/

/* Add a black background color to the top navigation */
#LayoutDiv1 {
max-width: 80%;
margin-left: auto;
margin-right: auto;
-moz-border-image: url(images/bg-main.jpg) 0;
}

.topnav {
border-radius: 10px;
background-image:url(images/bg-nav.jpg);
max-width: 100%;
text-align: center;
background-color: #333;
overflow: hidden;
border-style: solid; color:#666;
border-width: thin;

}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
font-weight: bold;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 13px;
}

/* Change the color of links on hover */
 .topnav a:hover {
background-color: #00C;
opacity: 0.6;
color: white;
}

/* Add an active class to highlight the current page */
.active {
background-color: #00C;
opacity: 0.6;
color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
} 

 img.trw
{
position: relative;
max-width: 70%;
margin: 0;
padding: 0;
padding-bottom: 0px;
}

.feed {
border-radius: 10px 10px 0px 0px;
background-image:url(images/bg-nav.jpg);

text-align: center;
font-color: #00C; 
font-weight:bold;
background-color: #333;
    overflow: hidden;
max-width: 70%;
margin-left: auto;
margin-right: auto;
padding: 0px;
border-style: solid; color:#666;
border-bottom: none;
border-width: thin;
-moz-border-image: url(images/bg-h2.jpg) 0;
margin-top: 10px;

    }

1 Ответ

0 голосов
/ 03 мая 2018

Для этого вы можете использовать CSS Media Queries и JavaScript.

Использование CSS (рекомендуется):

Создайте медиа-запрос в своем CSS, это способ создать адаптивное правило CSS, основанное на ширине экрана. Смотрите эту статью: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries, раздел под названием: Создание сложных медиазапросов

Вот рабочий фрагмент кода для CSS, нажмите фрагмент кода выполнения, затем измените ширину окна, пока не исчезнут div-ы навигационной кнопки и не появится гамбургер

. 

<!DOCTYPE html>
<html>

<head>
  <style>
    @media only screen and (min-width: 701px) {
      /* hide the hamburger */
      .hamburger {
        display: none;
      }
      /* show all the nav-buttons */
      .nav-button {
        display: block;
      }
    }
    /* if browser window is small (max-width) */
    
    @media only screen and (max-width: 700px) {
      /* show everything with the hamburger class */
      .hamburger {
        display: block;
      }
      /* hide all the nav-buttons */
      .nav-button {
        display: none;
      }
    }
  </style>
</head>

<body>
  <div class="hamburger">
    hamburger
  </div>

  <div class="nav-button">
    nav-button
  </div>

  <div class="nav-button">
    nav-button
  </div>

  <div class="nav-button">
    nav-button
  </div>

  <div class="nav-button">
    nav-button
  </div>
</body>

</html>

Использование JavaScript:

Вы хотите использовать функцию window.matchMedia: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

if (window.matchMedia("(min-width: 400px)").matches) {
  // make all the navigation visible
  // hide the hamburger icon
} else {
  // show the hamburger icon
  // hide the navigation until someone presses the hamburger
}
...