个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我有一个使用响应式 CSS 的网站。根据响应状态，我想更改菜单:
我最近的做法是使用两个 CSS 类，水平和垂直:
@media (min-width: 801px) {
.vertical { display: none; }
}
@media (max-width: 800px) {
.horizontal { display: none; }
}
这些类用于装饰类别和标签概览的两个菜单项以及菜单下方的类别和标签列表。
[编辑]:为了简化代码，我只放了类别，标签是等价的。恐怕我错过了一些读者(抱歉!)，所以我添加了更多代码以清楚地显示两个选项之间的区别。
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
...
<aside>
<nav class="nav">
<ul class="list-bare">
{% for title, link in MENUITEMS %}
<li><a class="nav__link" href="{{ link }}">{{ title }}</a></li>
{% endfor %}
<li class="vertical"><a class="nav__link" href="/categories.html">Categories</a></li>
</ul>
</nav>
<h2 class="horizontal">Categories</h2>
<ul class="navbar horizontal">
{% for cat, null in categories %}
<li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
{% endfor %}
</ul>
</aside>
这确实有效。但我想知道这是否是 CSS 艺术的状态。还是有另一种机制来做这些交替的事情？
最佳答案
如果我对您的帖子的理解正确，您正在考虑复制菜单并根据视口(viewport)或屏幕宽度隐藏一个或另一个版本。
虽然这可行，但有一个更简洁、更易于维护的解决方案。
请查看此建议:https://codepen.io/panchroma/pen/eMKGKw
如您所见，只有一个菜单，我正在使用一个简单的媒体查询来控制菜单列表项的宽度。
HTML
<ul>
<li><a class="nav__link" href="/categories.html">Categories</a></li>
<li><a class="nav__link" href="/tags.html">Tags</a></li>
</ul>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
width:100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
@media (min-width: 801px) {
li {
width:50%;
}
}
加一个viewport meta tag在文档的头部
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
更新
这是我认为可以完成您需要做的事情的变体: https://codepen.io/panchroma/pen/VXGPEM
代码非常相似，带有用于标签云和类别列表的嵌套列表以及一些管理其显示的媒体查询:
祝你好运!
关于html - 根据响应状态在菜单项和列表之间交替，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49592801/
24
4
0
我想交织相同模式和相等长度的两个向量。说： a <- rpois(lambda=3,n=5e5) b <- rpois(lambda=4,n=5e5) 我想交织或交织这两个向量，以创建一个等效于c(a
我有两个矩阵，我想以交替方式交织/交错/堆叠在彼此之上/rbind。 ranks=1:3 names=c("Karl", "Klaus", "Mary") x <- cbind(ranks, name
我在 JavaScript 中有一个字符串，如下所示: "This {{@is}} a $|test$| string with $|@string$| delimiters {{as}} follo
那么，我正在尝试“合并”一个字符串 (a) 和一个字符串列表 (b): a = '1234' b = ['+', '-', ''] 获得所需的输出(c): c = '1+2-34' 所需输出字符串中的
我有几个可变长度的数组，其中填充了表示好数据 block 和坏数据 block 的元组。 input = [ [(True, 0, 400), (False, 400, 500), (True
我有一个包含 3 个单元格的表，我想知道是否可以在每个单元格之间“旋转”数据？ 基本上，在设定的时间后，我希望第一个单元格中的数据移动到第二个单元格，第二个单元格数据移动到第三个单元格，第三个单元格数
使用 RichFaces dataTable 组件交替行颜色的最简单方法是什么？ 最佳答案 查找组件的 rowClasses 属性。 抱歉.. 阅读 richfaces 文档两秒钟后就明白了。 :)
我想创建一个有 4 列的表格，但只显示 3 列。所以我理想情况下有一个跨越 3 列的 div 并应用溢出:隐藏。单击按钮时，我希望第 3 列(公司 2)向左滑动，并替换为第 4 列(公司 3)，以便将
有没有办法在 AngularJS 中替代 ng-repeats ？ 例如，假设我有两个数组。 数组1 [a1, a2, a3, ...] 数组2 [b1, b2, b3, ...] 我想针对中型和大屏
我有三个包含元素的列表: a = [[0,1],[2,3],...] b = [[5,6],[7,8],...] c = [] 我想将 a 和 b 中的元素 append 到 c 中以获得: c =
我喜欢在 MATLAB 中绘制经过傅立叶变换的信号。通过 set(gca,'xtick',peaks,'FontSize',12);我可以在 x 轴上显示峰值。但有时，峰值靠得太近，显示峰值的文本与其
我正在使用 CSS Grid 为我的网站构建服务列表。整个网站网格中的一行被分成两个 CSS 网格列。 在第一行的第一列中，有一项服务的描述。在第二列中，有一个代表服务的图像。 每一行，描述和图像交替
我有以下 html 代码: 1 2 3 4 5 6 7 8 我想做的是使用奇数/偶数 nth-child 选择器对它们进行一些交替
在下面的代码示例中，我将 window.status 从“a”替换为“b” function alternateViaIntrvl() { setInterval('alterStatus()
下面的CSS和HTML代码生成 News Interviews ---------------------- Djing Break dance ---------------------- 为什么横
我曾经在 tableView willDisplay cell 方法中使用这段代码，但它没有准确地交替颜色 - 它几乎做到了，但有时仍然搞砸了 1 或 2 个相同的颜色和我不确定。 我发现一些建议在我
我的问题的本质是解决方案太多，我想在围绕它构建基础设施之前找出哪一个在优缺点中胜出。 (为了本论坛的目的进行了简化)这是一个拍卖网站，其中五个拍卖按排名#1-5 存储，#1 是当前特色拍卖。其他四个人
如果可能的话，我正在尝试找出是否有一种方法可以替换内容行分隔符的颜色。 例如: 问题是它必须是自动的，所以我假设可能需要 javascript，但我找不到这样的东西。我知道有些事情表明如果你有类似 t
这个看似简单的问题困扰了我整整 10 年。 (好的，不是每天!) 它在 IE 中运行良好，但在 FF 和 Chrome 中运行不正常，这通常表示代码有问题...我想在两侧都有 DIV 框(它们实际上是
我想找到交替 [0, 1, 0, 1] 所需的最少翻转次数，例如给定 [1, 1, 0, 1]。所以在这种情况下，它是一次翻转。 def solution(A): count = 0
我是一名优秀的程序员,十分优秀！