Question

我已经建立了一些具有响应式导航功能的网站。如果您有静态导航，则有许多解决方案可用于网站导航的响应设计。

但是，对于我当前的项目，我正在构建一个用户专用的动态导航，因此导航元素的数量及其内容可能会发生变化，并且是用户个人的。因此，我已经尝试过使用flexbox和浮动布局进行其他操作，但是找不到满足我需求的解决方案。

您是否知道如何解决所附图片中显示的问题？

我还附了一些示例代码。

<!DOCTYPE html>
<html>
<head>
<style>
        * {
            font-family: "Avenir";
        }
        body {
            margin: 0;
        }
        header {
            background: #303ca2;
            color: white;
            margin-bottom: 20px;
            display: flex;
        }
        h1 {
            font-size: 24px;
            margin: 0;
            text-transform: uppercase;
            font-weight: 400;
            padding: 10px;
            line-height: 40px;
            flex-shrink: 0;
        }
        nav {

        }
        nav ul {
            margin: 0;
            padding: 0;
            text-align: right;
        }

        nav ul li {
            list-style: none;
            display: inline-block;
            font-size: 16px;
            padding: 10px 10px;
            line-height: 40px;
        }

    </style>
   </head>
   <body>
    <header>
        <h1>Title Zone</h1>
        <nav>
            <ul>
                <li>Navigation Elem 1</li>
                <li>Navigation Element 2</li>
                <li>Navigation 3</li>
                <li>Element 4</li>
                <li>Element 5</li>
                <li>Navigation 6</li>
                <li>Element n</li>
            </ul>
        </nav>
   </header>

   </body>
   </html>

Answer 1

您需要使用媒体查询来设置将在每个屏幕尺寸中显示的内容。在HTML文件中，您将定义所有情况，包括带有li标签的div标签“ more” 但是如果屏幕尺寸小于某个特定数字，则此display: none会返回<ul> <li>element 1</li> <li>element 2</li> <li class="disabledOnMobile">element 3</li> <li class="disabledOnMobile">element 4</li> <div class="activeOnMobile">more... <ul> <li>element 3</li> <li>element 4</li> </ul> </div> </ul> 例如：

@media only screen and (max-width: 400px) {
  .disabledOnMobile {
    display: none;
  }
}

通过媒体查询，您可以在宽度屏幕上隐藏或显示某些内容，如下所示：

disabledOnMobile

隐藏所有带有@media only screen and (min-width: 400px) { .activeOnMobile { display: none; } }类的标签（元素3和4仅显示“更多”标签）

activeOnMobile

当屏幕大于400px时，我们仅显示activeOnMobile类之外的元素3和4时隐藏defmodule Treewalk do @type tree :: {:node, integer(), tree(), tree()} | nil def depth({:node, value, nil, nil}, _fun) do value end def depth({:node, value, nil, right}, fun) do fun.(value, depth(right, fun), nil) end def depth({:node, value, left, nil}, fun) do fun.(value, depth(left, fun), nil) end def depth({:node, value, left, right}, fun) do fun.(value, depth(left, fun), depth(right, fun)) end # The function to be run on each # node of the tree which is passed # the current value, the result of # running the funciton on the left # branch and the result of running # the function on the right branch def adder(a, b, nil) do a + b end def adder(a, b, c) do a + b + c end # Test tess def tree do {:node, 1, {:node, 2, {:node, 4, nil, nil}, nil }, {:node, 3, nil, {:node, 4, nil, nil} } } end def sum(tree) do depth(tree, &adder/3) end # run a test, returns 14 def test do depth(tree(), &adder/3) end end

在您的情况下，您需要将鼠标悬停在“更多”上并设置其他设置，这只是一个示例，您还可以在任何屏幕尺寸上添加一个Breakpoin。为了变得更容易，您可以使用一些类似bootstrap的库。您可以了解有关媒体查询here

的更多信息

具有自适应设计和纯CSS的动态导航

1 个答案: