Question

我设计了一个响应式导航栏，到目前为止我非常喜欢这种造型。然而，虽然它本质上是响应性的，但是当分辨率最小化时它不会创建汉堡包菜单。有没有办法将代码添加到我现有的导航栏来创建此效果（不会丢失我的样式）？如果我的代码有点草率，请道歉。任何帮助将非常感激。

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;

    }

Answer 1

您可以使用CSS媒体查询和JavaScript来完成此任务。

使用CSS（推荐）：

在CSS中创建媒体查询，这是一种基于屏幕宽度创建响应式CSS规则的方法。看到这篇文章： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries，标题为： 创建复杂的媒体查询

以下是CSS的工作代码段，点击运行代码段，然后调整窗口宽度，直到导航按钮div消失，汉堡包＆lt; div＆gt;出现。

<!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
}

如何将现有的响应式导航栏变为小屏幕的汉堡菜单？

1 个答案: