html - 将现有菜单转换为响应式菜单

Question

我的站点导航菜单编码如下:

HTML 代码:

<div class="menu">
    <ul>
        <li class="active"><a href="#" class="btn">Home</a></li>
        <li class="inactive"><a href="#" class="btn">About</a></li>
        <li class="inactive"><a href="#" class="btn">Post Your Ad</a></li>
        <li class="inactive"><a href="#" class="btn">Tenders</a></li>
        <li class="inactive"><a href="#" class="btn">Contact Us</a></li>
        <li class="inactive"><a href="#" class="btn">FAQ</a></li>
    </ul>
</div>

CSS 代码:

    .menu {
    height: 100px;
    z-index: 999;
}

.menu li {
    display: inline;
    float: left;
    width: auto;
}

.menu ul {
    margin-top: 2px;
}           

.menu a {
    text-decoration : none;
    font-size: 15px;
    color: #ffffff;
}

.menu li:hover {
       background-color: #16a085;
}

.active , .inactive {
    width: 83%;
}

.active {
    background-color: #16a085;
}

.inactive {
    background-color: #34495e;
}

/* Navigation Button */
.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-size: 22px;
  background: #34495e;
  padding: 48px 40px 31px 40px;
  text-decoration: none;
}

.btn:hover {
  background: #16a085;
  text-decoration: none;
}

JSFiddle 位于:http://jsfiddle.net/VCKwN/

问题定义:

如何将现有菜单转换为移动网站的响应式菜单，同时保持其所有样式不变？

当屏幕尺寸缩小时，菜单应该隐藏起来，并且应该出现一个按钮。单击按钮，菜单应重新出现。

这可能吗？

Answer 1

你可以这样做 - JSFiddle Demo

Javascript

var menu = document.getElementById('menu');

document.getElementById('open-menu').onclick = function() {
    menu.classList.toggle('show');
}

CSS:

我们最初隐藏了移动菜单按钮。当宽度低于 480 像素时，有一个媒体查询会覆盖一些菜单样式。 (设置菜单项显示 block 等；)

.mobile-menu { display:none; }


  @media only screen and (max-width: 480px) {

    .mobile-menu { display:inline-block; padding:5px; background:#ccc; border:1px solid #000;}
    .menu { display:none; }
    .menu ul { height:auto;}
    .menu ul li,
    .menu ul li a { float:none; display:block }
    .menu ul li a { padding:15px 6px;}

    .show { display:block; }
  }