HTML&；标题导航的CSS策略

需要输入如何在HTML和CSS中最好地实现此导航，以便在用户将屏幕大小从1200调整到786px（例如786px）时它是流动的，并且导航选项不会塞满-然后它将变成一个汉堡的情况。我有PSD文件分层和所有

我的两个想法：

我正在考虑将导航定位在该位置，然后在导航选项上创建链接区域

使大徽标变小并向上移动，同时导航向内移动，而用户使屏幕变小

---

有什么想法可以帮助解决这个问题。

我不完全理解你为什么要做第一个想法。但是，第二个想法很容易实现，并且有助于使您的菜单适合786px或更高浏览器窗口宽度的一行

一下子我发现你可能对样式化的边框有问题。固定宽度图形和流体响应设计不能完全配合使用。您可能需要为两个断点创建一组菜单边框图形，一个用于786px宽及以上的断点，另一个用于1200px宽的断点。也许你的汉堡菜单上也有一份。如果您愿意牺牲一些设计，您可以创建一个水平重复的平铺图形，或者甚至为边框创建一个CSS3渐变-否则您将有固定宽度的菜单，每个断点都有一组图形-这并不理想。不过，我可以想出一个技巧来解决这个问题，比如使用同一组图像来限制可能要使用的不同断点的边界元素的宽度

无论如何，你可以调整菜单项的大小，以减小菜单的大小，移动它，并删除中间链接列表中的空间。如何完成最后一部分取决于链接的HTML结构

我目前正在为一个项目制作一个类似于您的菜单，并具有以下标记：

    <header id="header">
        <div class="container">
            <div class="nav-toggle">
                <div class="hamburger">
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
            </div>
            <div id="logo">
                <a href="#"><img src="assets/img/logo.png" alt="" class="logo"></a>
            </div>
            <nav>
                <ul class="list-inline">
                    <li class="current-menu-item"><a href="#">Home</a></li><!--
                    --><li><a href="#">Restaurant</a></li><!--
                    --><li><a href="#">Menu</a></li><!--
                    --><li><a href="#">Gallery</a></li><!--
                    --><li><a href="#">Catering</a></li><!--
                    --><li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

我只有一个大约960px的菜单断点，在它下面我就可以做汉堡包菜单了。以下是我的Sass/SCSS：

@media only screen and (min-width: $nav-breakpoint) {
    .list-inline {
        margin-left: -10px;

        li {
            display: inline-block;

            &:nth-child(3) {
                margin-right: 180px;
            }
        }

        a {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
}

我的策略是在标志的中间创建空间，就是在标号之前把<代码>空白右边的<代码>应用到<代码>第n个子< /代码>。如果你预见到菜单项的数量永远不会改变，这对你来说也是可行的

根据我的经验，对于768px到1024px宽度的设备，菜单链接的大小可能比你想象的要小，而且可能最好使用间隔更宽的较小链接，而不是塞满的较大链接，确保对

a

标记而不是

li

应用填充，以增大“命中”区域的大小

如果你想对我的建议作进一步的阐述，请在评论中告诉我

@media only screen and (min-width: $nav-breakpoint) {
    .list-inline {
        margin-left: -10px;

        li {
            display: inline-block;

            &:nth-child(3) {
                margin-right: 180px;
            }
        }

        a {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
}