收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 7377|回复: 27

[讨论] 【分享】弧形排列的可折叠二级导航

[复制链接]
发表于 2009-2-16 10:45:48 | 显示全部楼层 |阅读模式
前几日论坛里有朋友遇到一个 弧形导航的难题,很有挑战性,于是利于周末时间做出了这个演示。

设计效果图:



实际演示地址(文件较多不方便采用代码框,请见谅): 弧形排列的可折叠二级导航 - 演示地址

简单解释一下思路。

最大的难点就是弧形排列,而且还是动态的、可折叠的。因此,各菜单项的位置不能做死。基本方法还是 CSS 教材中都会讲到的异形文本排版——用多个不同宽度的无语义空元素浮动,占位模拟曲线轮廓,从而限制文本在合理范围内流动。(我认为在这种场合,无语义元素是可以接受的。)

此外,还使用了一些小技巧来保证基本的用户体验,比如扩展菜单项热区,避免 hover 跳闪等等。CSS 代码中均有详细注释。

最终,无需 JS 进行定位计算,我们完全实现了纯 CSS 定位。同时,菜单项可自由增减,结构代码也清晰严谨。兼容所有主流浏览器。

与各位分享,同时也请大家多批评!有疑问也可在此交流!

[[i] 本帖最后由 birdstudio 于 2010-1-6 17:25 编辑 ]

评分

参与人数 1威望 +2 收起 理由
yoom + 2 原创内容,如果能更详细讲解下原理就好了! ...

查看全部评分

发表于 2009-2-16 13:45:45 | 显示全部楼层
效果不错。学习了。
只是对于像我只要有代码洁癖的人不大好接受
回复 支持 反对

使用道具 举报

发表于 2009-2-16 15:23:20 | 显示全部楼层
好东西,学习了,谢谢!
回复 支持 反对

使用道具 举报

发表于 2009-2-17 11:56:04 | 显示全部楼层
pre 标签啊 用这个干什么 注意语义
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-17 14:45:35 | 显示全部楼层
原帖由 [i]phoenix2212 于 2009-2-17 11:56 发表
pre 标签啊 用这个干什么 注意语义

谢谢关注和批评!
我的理解是,<pre> 并不是一个负责表现的标签。即使在 XHTML 1.0 Strict DTD 中,它仍然是有效的、可使用的。
它的作用是,输出预定义格式的文本,说得通俗一点,它表明其内部文本不能像普通文本那样被压缩空格、任意换行。这便是它的语义。
它是一个块级元素,所以通常它与 <code> 配合用来表示一段计算机代码。
很显然在类似的场合,<pre> 比 <div style="white-space: pre;"> 更有语义。

这是我的看法,欢迎继续讨论。

[[i] 本帖最后由 birdstudio 于 2009-2-17 21:19 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-2-17 17:20:50 | 显示全部楼层
<pre> 并不是一个负责表现的标签 他也没涉及到你的表现 表现是css来控制的 html标签本身没有这个功能

你选择这种方式与方法说明你的思维被禁锢在css上 万事都要求与css

学css前应该打好html基础 html是一门博大精深的语言 有90多个标签 不要只用一个div 这样你用远停留再div+css的基础上 你对css已经掌握差不多了 回过头应该研究研究语义和标签了
xhtml是xml的子集 xml 不可能只用两三种标签解决问题 个人愚见
回复 支持 反对

使用道具 举报

发表于 2009-2-17 17:31:07 | 显示全部楼层
原帖由 [i]whiteleaf 于 2009-2-16 13:45 发表
效果不错。学习了。
只是对于像我只要有代码洁癖的人不大好接受


同意,结构表现没有分离啊~
回复 支持 反对

使用道具 举报

发表于 2009-2-17 20:14:59 | 显示全部楼层

回复 1# birdstudio [楼主] 的帖子

经典的右浮动使用,赞!!!!
回复 支持 反对

使用道具 举报

发表于 2009-2-17 20:38:42 | 显示全部楼层
不错,到LZ的站里收获更多,

谢谢分享
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-17 21:37:29 | 显示全部楼层
原帖由 [i]phoenix2212 于 2009-2-17 17:20 发表
并不是一个负责表现的标签 他也没涉及到你的表现 表现是css来控制的 html标签本身没有这个功能
你选择这种方式与方法说明你的思维被禁锢在css上 万事都要求与css
学css前应该打好html基础 html是一门博大精深 ...

您对语义的看法我很赞同。但是我怀疑我们是否在讨论同一个案例?在这个演示中我并没有使用 <pre> 标签,只是我的网站的首页用到它来输出一段代码。尴尬……

在这个演示中,我也尽力做到清晰的结构和语义。虽然添加了一些无语义的占位标签,但起码它们在代码中也是清晰易读的。如有不妥,请继续批评。
回复 支持 反对

使用道具 举报

发表于 2009-2-18 09:20:12 | 显示全部楼层
效果不错
回复 支持 反对

使用道具 举报

发表于 2009-2-18 10:27:10 | 显示全部楼层
既然每个li都有一个class,为什么还要用div来顶出空白的位置,而不利用li的class呢。添加一个padding-right我想也应该可以达到你所要的效果,并且可以少了很多空的div标签了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-18 10:48:22 | 显示全部楼层
原帖由 [i]phantom 于 2009-2-18 10:27 发表
既然每个li都有一个class,为什么还要用div来顶出空白的位置,而不利用li的class呢。添加一个padding-right我想也应该可以达到你所要的效果,并且可以少了很多空的div标签了。

谢谢关注!
为每个 li 分配 class 主要还是为手风琴效果服务,用 class 来匹配并控制二级菜单的折叠比较方便。
如果是静态布局的话,确实可以用 padding-right,不过我碰到的最大难点在于各菜单项在折叠和展开后都要贴合弧线。所以用那些占位的空 div 标签也是不得以而为之。
回复 支持 反对

使用道具 举报

发表于 2009-2-19 15:18:17 | 显示全部楼层
谢谢楼主的指教方法。下次再遇到时就不怕难调位置了。
最后我们还是用FLASH解决了,因为客户要一点一级栏目有一点哗拉拉的感觉,就像流水样。CSS好像还没有实现这样效果吧。
请把FLASH放在黑色背景的页就可以显示了。

[[i] 本帖最后由 瑶子 于 2009-2-19 15:19 编辑 ]

menu2_jie.swf

25.7 KB, 下载次数: 395

回复 支持 反对

使用道具 举报

发表于 2009-2-19 17:25:03 | 显示全部楼层
font: 700 26px/1.2

这里的700是代表什么?  为什么要有/1.2?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-19 17:29:40 | 显示全部楼层
原帖由 [i]writeidea 于 2009-2-19 17:25 发表
font: 700  26px/1.2  Arial, ... ;

这里的700是代表什么?  为什么要有/1.2?

谢谢关注。
这是 font 属性的简写方式。要注意 font-size 与 font-family 不可省略。
700 为 font-weight 值。粗体。
1.2 为 line-height 值。
都是为了控制字体样式,达到理想效果。

[[i] 本帖最后由 birdstudio 于 2009-2-19 17:31 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-2-19 17:31:45 | 显示全部楼层
哦,学到了. 经常写文字的样式,,但以前没见过简写原来是这么写的..谢谢分享
回复 支持 反对

使用道具 举报

发表于 2009-2-19 17:56:23 | 显示全部楼层
  楼主可以把源代码贴出来不
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-19 18:06:20 | 显示全部楼层
原帖由 [i]ailong168 于 2009-2-19 17:56 发表
  楼主可以把源代码贴出来不

页面代码(html, css, js)都是开源的啊,直接下载。

[[i] 本帖最后由 birdstudio 于 2009-2-20 20:00 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-2-20 20:05:13 | 显示全部楼层
非常不错的效果,赞一个!收藏了,不定哪个时候用得上。
用CSS来做这样的特例,我觉得不必要死扣标签的语义化。哪些东西都是死的,只要做到简洁,结构清晰,兼容性强就可以了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-20 20:20:22 | 显示全部楼层
原帖由 [i]瑶子 于 2009-2-19 15:18 发表
谢谢楼主的指教方法。下次再遇到时就不怕难调位置了。
最后我们还是用FLASH解决了,因为客户要一点一级栏目有一点哗拉拉的感觉,就像流水样。CSS好像还没有实现这样效果吧。
请把FLASH放在黑色背景的页就可以显示了 ...

谢谢分享 Flash~~
回复 支持 反对

使用道具 举报

发表于 2009-2-20 23:30:53 | 显示全部楼层
感谢分享,先收藏了
回复 支持 反对

使用道具 举报

发表于 2009-2-21 14:26:06 | 显示全部楼层
非常不错,学习ing
回复 支持 反对

使用道具 举报

发表于 2009-2-21 14:42:28 | 显示全部楼层
打个包,我下载看看
回复 支持 反对

使用道具 举报

发表于 2009-2-21 21:01:37 | 显示全部楼层
学习了了了了了了
回复 支持 反对

使用道具 举报

发表于 2009-2-22 01:35:51 | 显示全部楼层
挺好看!
回复 支持 反对

使用道具 举报

发表于 2009-3-6 17:10:42 | 显示全部楼层
好东西,收了
回复 支持 反对

使用道具 举报

发表于 2009-3-7 13:07:38 | 显示全部楼层
学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-27 05:31 , Processed in 0.174368 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表