如何在没有引导的情况下制作响应式导航栏？
问题描述：
如何做出响应让导航栏在没有引导程序的情况下折叠成汉堡包菜单栏，但从零开始？如何在没有引导的情况下制作响应式导航栏？
这里是视觉 http://imgur.com/a/Tbjwn 这里是小提琴https://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
\t padding: 6px 3em;
\t text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><a href="#home"><img class="navlogo" src="svg/navlogo.svg" alt=""></a></li>
<li class="right-nav"><a href="#Kontakt"><span class="medium">KONTAKT</span></a></li>
<li class="right-nav"><a href="#Pris"><span class="medium">PRIS</span></a></li>
<li class="right-nav"><a href="#Garantier"><span class="medium">GARANTIER</span></a></li>
<li class="right-nav"><a href="#Ommeg"><span class="medium">OM MEG</span></a></li>
</ul>
</div>
</div>
答
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
@media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}<header>
<div class="inner">
<nav>
<a href="#" class="logo">Logo</a>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Work</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
</ul>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
答
你应该参考Hanlin Chong's CodePen，它利用@media查询来处理基于屏幕的max-width的响应行为。
还是先从基本W3Schools的响应导航栏教程：https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
使用媒体查询..只是简单的HTML和CSS的基础，如果你不想使用引导。看到片段。例如 .. –