Suckerfish 下拉菜单的流体宽度
对于 CSS 下拉菜单,我通常坚持使用 Son of Suckerfish 下拉菜单。该技术效果非常好,但有一件小事一直困扰着我:下拉链接的宽度始终是固定的。
有什么方法可以自动调整 Suckerfish 下拉菜单中项目的宽度吗?如果没有,是否有其他基于 CSS 的下拉菜单策略可以实现此目的?
For CSS dropdown menus, I usually stick with the Son of Suckerfish dropdowns. The technique works extremely well, but there's one small thing that's always bothered me: the width of the dropdown links is always fixed.
Are there any ways to automatically resize the width of the items in a Suckerfish dropdown menu? If not, are there any other CSS-based dropdown menu strategies that can accomplish this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
未必。如果您将辅助列表项设置为向左清除,那么它们将堆叠在一起。
但问题是,如果您想在悬停时更改背景颜色,则必须设置固定宽度,否则您将拥有不同宽度的列表项。
但如果您不必更改 BG 颜色,那么这是一个很好的方法,可以让事情保持流畅。
Not necessarily. If you set the secondary list items to clear left, then they will stack on top of each other.
The problem there however is that if you want to change the background color on hover you have to set a fixed width, or else you'll have list items of varying widths.
But if you don't have to change the BG color, it's a nice way to do it and keep things fluid.
由于
li
元素在ul
元素内浮动
,因此它们需要具有等于ul< /代码> 元素。否则,他们都会在同一条线上。固定宽度迫使每个人跳到下一行。
示例: http://jsfiddle.net/ZhguL/3/
如果您愿意,可以使用jQuery 或简单的 JavaScript 来计算每个
ul
中最长菜单项的宽度,并将每个li
和ul
的宽度设置为此这个值。Because the
li
elements arefloat
ed inside theul
element, they need to have a set width that is equal to theul
element. Otherwise, they will all be on the same line. The fixed width forces each one to jump to the next line.Example: http://jsfiddle.net/ZhguL/3/
If you want, you can use jQuery or just plain JavaScript to calculate the width of the longest menu item in each
ul
and set eachli
and theul
's widths to this this value.看看这个页面,它帮助了我。
不用js也可以做到。
http://www.pmob.co.uk/temp/dropdown-all -流体.htm
Take a look at this page, it helped me out.
You can do it without using js.
http://www.pmob.co.uk/temp/dropdown-all-fluid.htm