Question

我正在尝试使我的网站上的导航响应（并最终移动友好），但我不能按照我想要的方式工作。

理想情况下，徽标将位于顶部，而其他导航链接将在低于480px的屏幕上堆叠（每行一个），但我现在将满足于在移动屏幕上清晰易读的任何内容。

我已经研究了很多不同的响应选项，但似乎没有任何关于我的导航设置的方法。

相关CSS：

#navmenu {
    background: url(http://prettylushrecords.comoj.com/prettylushlogosmall.png) no-repeat center top;
    position: relative;
    margin: auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
    }

li, li + li + li + li {
    display: block; 
    float: left;
    height: 220x;
    width: 200px;
    margin: 0;
    padding: .5em 1%;
    text-align: center;
    vertical-align: middle;
    width: 18%;
    }

li + li + li {
    margin-left: 20%;
    padding: .5em 0;
    }

li {
    font-size: 2.5em;
    color: #000;
    line-height: 220px;
    font-family: Courier, monospace;
    font-weight: bold;
    color: #bdb0b0;
    }

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

#navmenu {
    background: url(http://prettylushrecords.comoj.com/prettylushlogosmall.png) no-repeat center top;
    position: relative;
    margin: auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
    }

li {
    font-size: 1em;
    color: #000;
    line-height: 100px;
    font-family: Courier, monospace;
    font-weight: bold;
    color: #bdb0b0;
    }

Answer 1

继续尝试http://tinynav.viljamis.com/

这就是它的作用

....转换和导航到小的选择下拉列表屏幕。它还会自动选择当前页面并添加选定=＆＃34;选择＆＃34;该项目。

Answer 2

我真的建议以更干净的方式构建你的html标签。

 <nav>
  <ul>
   <li>asdfad</li>
   <li><div><img src="yourimage"/></div></li>
   <li>asdf</li>
   <li>asdf</li>
 </ul>
</nav>

CSS

不要这样做li + li + li（你只需要一个li来设置所有lis并查看css选择器）试试这个：

  li{
    display: block;
    float: left;
    height: 220x;
    width: 200px;
    margin: 0;
    padding: .5em 1%;
    text-align: center;
    vertical-align: middle;
    width: 18%;
    }

@media only screen and (max-device-width: 480px){
float: none;
line-height: 5px;
}

尝试查看w3规范和其他网站如何设置标题。总是使用检查元素来设置它们和它们的css，它会对你有帮助。

GL

如何使无序列表导航移动友好

2 个答案: