htmldog suckerfish液体 [英] htmldog suckerfish liquid
问题描述
任何人都知道htmldog suckerfish菜单是否可以更流畅的方式完成
方式： http://www.htmldog.com/articles/suckerfish/dropdowns/
或者更确切地说，2级菜单：
http：// www。 htmldog.com/articles/suck...le/bones2.html
在流体中我的意思是：
1）每个下拉菜单的宽度等于可见下拉菜单中包含的任何项目的最宽文本
。
2）每个区域的宽度为永远可见的文本（Percoidei，
Anabantoidei和Gobiodei）与每个单词的文本相匹配。
3）在始终可见之间插入相等的距离菜单词取决于浏览器窗口宽度上的
，以防万一浏览器窗口发生
例如是600像素：
--------------------------- 600px ----------------------------
Percoidei Anabantoidei Anabantoidei
或者如果窗口的大小减小到360像素：
--------------- 360px ---------- -------
Percoidei Anabantoidei Anabantoidei
这可以用CSS完成吗？如果有任何提示将如何受到高度赞赏！
timmy写道：任何人都知道如果htmldog suckerfish菜单可以更流畅的方式完成： http ：//www.htmldog.com/articles/suckerfish/dropdowns/
或者更确切地说，2级菜单：
http://www.htmldog.com/articles/suck...le/bones2.html
流体我的意思是：
1）每个下拉菜单的宽度等于可见掉落中包含的任何项目的最宽文本
菜单。
2）每个区域的宽度始终可见的文本（Percoidei，
Anabantoidei和Gobiodei）与每个单词的宽度相匹配。
3）在始终可见的男人之间插入相等的距离你在浏览器窗口的宽度上依赖
，所以如果浏览器窗口发生例如600像素：
--------- ------------------ 600px ----------------------------
Percoidei Anabantoidei Anabantoidei
或者如果窗口大小不超过360像素：
--------------- 360px -----------------
Percoidei Anabantoidei Anabantoidei
这可以用CSS完成吗？如果有的话，任何提示将不胜感激！
timmy，
1）显示：表格可能就是你想要的。
2）模糊的要求。什么是区域的宽度。意思？我看到
三个字，长度各不相同。我没有看到任何区域。
3）宽度：每个单词的33％左右，或者存在
单词的div。 br />
可能在CSS？可能，如果你只限于符合标准的浏览器。换句话说，忘记IE，这可能不是一个坏主意......
我在这里故意模糊。按照你想要的方式工作将是一项乏味且令人沮丧的工作。使用
不兼容的浏览器可以将您送到有趣的农场。
Chris Beall
>三个字，长度不同。我没有看到任何区域。
是的，你是对的，区域不可见，因为它们没有上色
例子。
我的意思是htmldog示例的块（链接）区域，它们
都跨越相同的宽度CSS代码中定义的10em：
http://www.htmldog.com/articles/suck...le/bones2.html
我想要摆脱的多余空间介于两者之间这个词的结尾
Percoidei到Anabantoidei这个词的开头，并且从结尾的
Anabantoidei到Gobioidei的开头。这将使水平
样式菜单更加紧凑。
我在这里故意模糊。让你按照自己想要的方式工作将是一项乏味且令人沮丧的工作。使用它
好的 - 听起来很复杂，所以相反，如果我减少问题和机会
去搞笑的农场，是否可以：
1）使包含始终可见链接的区域（例如Percoidei，
Anabantoidei和Gobiodei）仅限于需要内容宽度？ （在
其他的话 - 任何单词右边没有空格）。
2）每个下拉菜单的宽度是否等于宽度内部最长的文字？
我可以使用图形代替纯文本链接并固定每个下拉菜单区域的
像素宽度，但它会使更新任何网站
经常变化多于繁琐的程序。
timmy写道：
（剪辑）好的 - 听起来很复杂，所以相反，如果我减少了问题以及我去滑稽农场的机会，那么它是否可能：
Anabantoidei和Gobiodei）的大小仅限于所需的内容宽度？ （换句话说 - 任何单词右侧都没有空格。）
2）每个下拉菜单的宽度是否等于最长文本的宽度？
我可以使用图形而不是纯文本链接和固定的每个下拉菜单区域的像素宽度，但它会更新任何网站
经常变化的更多
timmy，
使用图形禁止访问者更改文本大小
并阻止搜索引擎索引单词（可能是页面上最关键的单词用于搜索目的）。
天，我可能会认为这是一个有趣的技术挑战，但这不是其中之一。我要做的第一件事是
仔细设定我的目标：
- 仅限HTML和CSS。没有JavaScript。
- 不支持IE，这已经过时了。这将允许我使用
：悬停。
因为最后的标准可能是不可接受的（还）真实的
世界，我知道如果它是我的网站我会怎么做：
- 折腾JavaScript
- 折腾与#nav相关的所有CSS。
这给你留下了一个三级嵌套列表，让我们面对它，
数据是什么。以这种方式呈现给用户。
隐藏大部分信息的重点是什么，然后只有当用户用稳定的手牌徘徊在正确的位置时才显示它的碎片一只老鼠？
（我只是尝试使用Tab键来浏览它。我推断
这个''有效'，但是第二级和第三级该列表永远不会显示，因此用户无法确定焦点在哪里，使其无用。）
您可以解决的一些问题，有些你可以跳过。对于一些人来说，最好的办法就是走开，寻找另一条道路。我认为这是后者之一。
Chris Beall
Anyone knows if the htmldog suckerfish menu can be done in a more fluid
way: http://www.htmldog.com/articles/suckerfish/dropdowns/
Or more precisely, the 2-level menu:
http://www.htmldog.com/articles/suck...le/bones2.html
In fluid I mean:
1) The width of each drop menu to equal the widest text of any item
contained within the visible drop menu.
2) The width each of the area for the always visible texts (Percoidei,
Anabantoidei and Gobiodei) to match that of each of those words.
3) Insert an equal distance between the always visible menu words depending
on the width of the browser window, so in case the browser window happens
to be for example 600 pixels:
---------------------------600px----------------------------
Percoidei Anabantoidei Anabantoidei
Or if the window is sized down to 360 pixels:
---------------360px-----------------
Percoidei Anabantoidei Anabantoidei
Can this be done in CSS? If so any tips how would be greatly appreciated!
解决方案timmy wrote:Anyone knows if the htmldog suckerfish menu can be done in a more fluid
way: http://www.htmldog.com/articles/suckerfish/dropdowns/
Or more precisely, the 2-level menu:
http://www.htmldog.com/articles/suck...le/bones2.html
In fluid I mean:
1) The width of each drop menu to equal the widest text of any item
contained within the visible drop menu.
2) The width each of the area for the always visible texts (Percoidei,
Anabantoidei and Gobiodei) to match that of each of those words.
3) Insert an equal distance between the always visible menu words depending
on the width of the browser window, so in case the browser window happens
to be for example 600 pixels:
---------------------------600px----------------------------
Percoidei Anabantoidei Anabantoidei
Or if the window is sized down to 360 pixels:
---------------360px-----------------
Percoidei Anabantoidei Anabantoidei
Can this be done in CSS? If so any tips how would be greatly appreciated!
timmy,
1) display: table might be what you want here.
2) Ambiguous requirement. What does "width of the area" mean? I see
three words, of differing lengths. I don''t see any "area".
3) width: 33% or thereabouts for each word, or a div within which the
word exists.
Possible in CSS? Probably, if you confine yourself to
standards-compliant browsers. In other words, forget IE, which probably
isn''t a bad idea...
I''m being deliberately vague here. Getting this to work the way you
want will be a tedious and frustrating exercise. Making it work with
non-compliant browsers will send you to the funny farm.
Chris Beall
> three words, of differing lengths. I don''t see any "area".
Yes you''re right, the areas are not visible, as they''re not colored on the
example.
What I mean is the area of the blocks (links) of the htmldog example, they
all span the same width of 10em as defined in the CSS code:
http://www.htmldog.com/articles/suck...le/bones2.html
The excess space which I want to get rid of is between the end of the word
Percoidei to the start of the word Anabantoidei , and from the end of
Anabantoidei to the start of Gobioidei. This would make the horizontal
style menu more compact.
I''m being deliberately vague here. Getting this to work the way you
want will be a tedious and frustrating exercise. Making it work with
OK - sounds complicated, so instead, if I reduce the problem and my chances
of going to the funny farm, would it be possible to:
1) Make the areas containing the always visible links (eg. Percoidei,
Anabantoidei and Gobiodei) size only to required width of contents? (In
other words - no space on the right of any of the words).
2) Can the width of each drop menu equal the width of longest text within?
I can do the above using graphics instead of plain text links and fixed
pixel widths for each drop menu area, but it would make updating any site
that is changing on a frequent basis a more than tedious procedure.
timmy wrote:
(snip)OK - sounds complicated, so instead, if I reduce the problem and my chances
of going to the funny farm, would it be possible to:
1) Make the areas containing the always visible links (eg. Percoidei,
Anabantoidei and Gobiodei) size only to required width of contents? (In
other words - no space on the right of any of the words).
2) Can the width of each drop menu equal the width of longest text within?
I can do the above using graphics instead of plain text links and fixed
pixel widths for each drop menu area, but it would make updating any site
that is changing on a frequent basis a more than tedious procedure.
timmy,
Using graphics prohibits your visitor from changing the size of the text
and prevents search engines from indexing the words (which are probably
the most critical ones on the page for search purposes).
On some days, I might consider this to be an interesting technical
challenge, but this isn''t one of them. The first thing I would do is
set my goal carefully:
- HTML and CSS only. No JavaScript.
- No support for IE, which is obsolete. This would allow me to use
:hover.
Since that last criteria probably isn''t acceptable (yet) in the real
world, I know what I would do if it were MY site:
- Toss the JavaScript
- Toss all of the CSS associated with #nav.
That leaves you with a three-level nested list, which is, let''s face it,
what the data is. Present it to the user that way. What''s the point of
hiding most of the information, then showing fragments of it only when
the user, with a steady hand, hovers over the right spot with a mouse?
(I just tried to navigate through it using only the Tab key. I infer
that this ''works'', but the 2nd and 3rd levels of the list are never
visible, so the user can''t tell where the focus is, making it useless.)
Some problems you can bull through, some you can leap over. For some,
the best thing to do is just walk away and look for another path. I
think this is one of the latter.
Chris Beall
这篇关于htmldog suckerfish液体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
