使用 HTML5/CSS3 将我拥有的以下导航栏转换为适合移动设备的版本的最佳方法是什么？
例如来自...
为了...
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
<li>
<a href="#">Page 4</a>
</li>
</ul>
</div>
</body>
</html>
CSS3:
#nav > ul {
margin: 0;
}
#nav > ul > li {
position: relative;
display: inline-block;
margin-left: 1em;
}
#nav > ul > li a {
color: #c0c0c0;
text-decoration: none;
border: 0;
display: block;
padding: 2.3em 0.5em 1.35em 0.5em;
}
#nav > ul > li:first-child {
margin-left: 0;
}
#nav > ul > li:hover a {
color: #fff;
}
#nav > ul > li.current {
font-weight: 600;
}
#nav > ul > li.present {
font-weight: 600;
}
#nav > ul > li.present:before {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
width: 0.75em;
height: 0.75em;
content:'';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: #37c0fb;
}
#nav > ul > li.present a {
color: #fff;
}
#nav > ul > li.active a {
color: #fff;
}
#nav > ul > li.active.present:before {
opacity: 0;
}
#nav {
cursor: default;
background-color: #333;
padding: 0;
text-align: center;
}
#nav:after {
content:'';
display: block;
width: 100%;
height: 0.75em;
background-color: #37c0fb;
}
最佳答案
这是一个使用 html5/css3/jquery 的简单响应式导航示例
检查 fiddle https://jsfiddle.net/w432pmyy/1/
var windowWidth = $(window).width();
$("#nav-toggle").click(function () {
$("#nav ul").slideToggle();
$("#nav ul").toggleClass("open");
});
$(window).resize(function () {
windowWidth = $(window).width();
if (windowWidth > 767) {
if ($("#nav ul").is(":hidden")) {
$("#nav ul").css("display","block");
}
}
else {
$("#nav ul").css("display","none");
}
});
#nav > ul {
margin: 0;
display:block
}
#nav > ul > li {
position: relative;
display: inline-block;
margin-left: 1em;
}
#nav > ul > li a {
color: #c0c0c0;
text-decoration: none;
border: 0;
display: block;
padding:1.05em 0.5em;
}
#nav > ul > li:first-child {
margin-left: 0;
}
#nav > ul > li:hover a {
color: #fff;
}
#nav > ul > li.current {
font-weight: 600;
}
#nav > ul > li.present {
font-weight: 600;
}
#nav > ul > li.present:before {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
width: 0.75em;
height: 0.75em;
content:'';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: #37c0fb;
}
#nav > ul > li.present a {
color: #fff;
}
#nav > ul > li.active a {
color: #fff;
}
#nav > ul > li.active.present:before {
opacity: 0;
}
#nav {
cursor: default;
background-color: #333;
padding: 0;
text-align: center;
}
#nav:after {
content:'';
display: block;
width: 100%;
height: 0.75em;
background-color: #37c0fb;
}
#nav-toggle {
display:none;
background-color: #333;
cursor: pointer;
}
#nav-toggle > a {
float:left;
color:#fff;
padding:10px;
width: 26px;
}
#nav-toggle > a > span {
width:26px;
height:2px;
background-color:#fff;
display:block;
}
#nav-toggle > a > span + span {
margin-top:4px;
}
.menu-caption {
display:inline-block;
color:#fff;
padding:10px;
}
@media screen and (max-width:767px) {
#nav-toggle {
display:block;
}
#nav > ul {
display:none;
}
#nav > ul > li {
display: block;
}
}
<div id="nav-toggle"> <a href="#">
<span></span>
<span></span>
<span></span>
</a>
<div class="menu-caption">Menu</div>
</div>
<div id="nav">
<ul>
<li> <a href="#">Page 1</a>
</li>
<li> <a href="#">Page 2</a>
</li>
<li> <a href="#">Page 3</a>
</li>
<li> <a href="#">Page 4</a>
</li>
</ul>
</div
关于javascript - 使用 HTML5/CSS3 将桌面导航栏转换为响应式移动菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33499222/