【发布时间】：2018-05-03 13:18:14
【问题描述】：
我设计了一个响应式导航栏，到目前为止我真的很喜欢它的样式。但是，尽管它本质上是响应式的，但在最小化分辨率时它不会创建汉堡菜单。有没有办法将代码添加到我现有的导航栏以创建这种效果（不会丢失我的样式）？抱歉，如果我的代码有点草率。任何帮助将非常感激。
<!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()">☰</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;
}
【问题讨论】：
-
可以尝试学习css查询
-
欢迎来到 SO。我冒昧地稍微编辑了您的问题。我嵌入了图片并删除了你的介绍，因为问候、感谢、个人介绍等被认为会分散实际问题的注意力。
-
谢谢。我确实尝试添加图片，但它说我没有足够的帖子来做。感谢您的帮助。
标签： html css navigation nav