Question

需要输入有关如何在HTML＆amp;中实现此导航的最佳方法CSS，以便当用户从1200调整屏幕大小到例如786px并且导航选项不会填满时它是流动的 - 然后它会破坏到汉堡包的情况。我确实将PSD文件分层出来了。

我的两个想法：

我想将导航定位在该位置，然后在导航选项上创建链接区域
当用户缩小屏幕时导航向内移动时，大LOGO会变小并向上移动

那里有任何可以帮助解决问题的想法。

Answer 1

我不完全理解为什么你会做第一个想法。但第二个想法可以轻松完成，并有助于让您的菜单适合一行，浏览器窗口宽度为786px或更高。

关闭蝙蝠我发现你可能会遇到程式化边框的问题。固定宽度的图形和流体响应设计并不能很好地协同工作。您可能希望为两个断点创建一组菜单边框图形，一个用于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;
}

我只有一个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;
        }
    }
}

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

根据我的经验，对于宽度为768px到1024px的设备，菜单链接的大小可能会比您想象的要小，而且可能更好的是使较小的链接间隔得比较大的链接大得多塞满，确保你在a标签而不是li上应用填充，以增加“点击”区域的大小。

如果您对我建议的任何内容有任何进一步的阐述，请在评论中告诉我。

用于标题导航的HTML＆amp; CSS策略

1 个答案: