标题导航的 HTML&CSS 策略

Question

需要输入有关如何最好地在 HTML 和 CSS 中实现此导航的信息，以便当用户将屏幕大小从 1200 调整为 786 像素时它是流畅的，并且导航选项不会塞满 - 然后它会打破汉堡包的情况。我确实有分层的PSD文件。

我的两个想法：

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

2. 使大 LOGO 变小并向上移动，而导航向内移动，而用户缩小屏幕

任何可以帮助解决这种情况的想法。

Answer 1

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

我看到你可能对风格化边框有问题。固定宽度的图形和流畅的响应式设计不能很好地结合在一起。您可能想要为两个断点创建一组菜单边框图形，一个用于 786px 宽及以上，一个用于看起来像 1200px 宽的位置。也许你的汉堡菜单也有一份。如果您可以牺牲一些设计，您可以创建一个水平重复的平铺图形，甚至为边框创建一个 CSS3 渐变 - 否则您将拥有固定宽度的菜单，每个断点都有一组图形 - 不理想。不过，我可以想出一个技巧来解决这个问题，例如使用 clip-path 来限制您可能想要使用的不同断点的边框元素的宽度，然后使用相同的图像集。

无论如何，您可以将菜单项的大小调整为中型菜单，并且正如您所提到的，减小徽标的大小，将其向上移动，然后删除链接列表中的空间中间。最后一部分的处理方式取决于链接的 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>

我绝对使用我的新居中技巧来定位徽标：

#logo {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

我在 960 像素左右只有一个菜单断点，我在其下方执行汉堡菜单。这是我的 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;
        }
    }
}

我在徽标所在的中间位置创建空间的策略是将margin-right 应用于徽标之前的nth-child。如果您预见到菜单项的数量永远不会改变，那么这也适用于您。

根据我的经验，对于 768 像素到 1024 像素宽度的设备，菜单链接的大小可以比您想象的要小，而且与较大的链接相比，较小的链接间距更宽可能更好。挤满了，确保您将填充应用于a 标签而不是li，以增加“命中”区域的大小。

如果您想进一步说明我的建议，请在 cmets 中告诉我。