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 ：

我们最初隐藏移动菜单按钮。并且有一个媒体查询在低于480px宽时覆盖了一些菜单样式。（将菜单项设置为显示块等;）

.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; }
  }

Answer 2

div宽度：100％
使用媒体查询来控制屏幕大小
创建一个按钮并将其隐藏，然后通过媒体查询显示它并隐藏div菜单

看一下响应式bootstrap菜单，这样你就可以发表一个想法

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

问题定义：

2 个答案: