首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chevron 导航:以图标引导的交互模式

    通过对 Chevron 图标的起源、在面包屑导航、后退按钮、折叠面板以及侧边导航等多种场景中的实际应用进行剖析,并结合完整的 HTML + CSS + JavaScript 示例,本文旨在帮助开发者深入了解...Chevron 图标的含义与起源Chevron 一词源自法语,其字面含义为屋梁或人字形横梁,这种倒 V 型或 V 型的图形在古希腊陶器和徽章中便可见到 。...在视觉设计领域,chevron 图标通常呈现为尖头或角标,指示方向或分隔层级,为用户提供直观的路径暗示。...Chevron Navigation 模式的应用场景不同的界面模块往往会依赖 chevron 图标来传递层级关系、展开状态或导航方向,下面分几个典型场景来分析。...Breadcrumb 面包屑导航面包屑导航需要向用户显示当前页面在层级结构中的位置,同时允许用户快速跳转到上级页面。

    42310

    WordPress为导航菜单添加个性图标字体

    目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体。...我们还可以单独为导航菜单上的项目也配上个性化的图标字体。 具体方法: 一、WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。...图标字体选择器名称,打开此页查看:http://fontawesome.io/icons/ 点开一个认为合适的图标字体,在下会显示类似: 只需在菜单...那然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。...如果认为上面插件提供的图标字体不符合自己的要求(其实这套Font Awesome图标字体早已烂大街),还可以自己做一套更加个性化的图标字体。

    2.4K10

    jQuery特效 | 导航底部横线跟随鼠标缓动

    HTML5学堂(码匠):jQuery来实现如下特效 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项底部。...今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上) 功能效果图 ?...功能需求明确 横向导航条; 当鼠标移入导航区域的时候,在当前导航底部淡入一个横线; 当鼠标在导航区域当中左右移动时,横线跟随鼠标移动; 当鼠标移出导航区域的时候,横线淡出。...hover事件 hover事件是jQuery中的事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)的功能综合体; hover事件的基本语法为:...offsetLeft是JavaScript原生方法,ele.offsetLeft中,ele表示具体元素,元素的offsetLeft属性,表示该元素左侧与父级元素的距离; position()方法是jQuery

    10.3K50
    领券