Foundation 侧边栏2

简介: 通过在 `<li>` 元素上使用 `.active` 类来标记已点击的链接,并使用 `.divider` 类添加水平分割线,可以创建清晰的导航菜单。示例代码展示了如何实现这一效果。

激活链接与分割线
已点击的链接可以在

  • 上使用 .active 类来标识,使用 .divider 类添加水平分割线:

    实例


    尝试一下 »
  • 相关文章
    Foundation 下拉菜单6
    分割按钮是在普通按钮基础上添加 `.split` 类,生成一个带有下拉箭头的按钮。点击按钮可展开下拉菜单,实现更多操作选项。示例代码展示了如何创建一个分割按钮及关联的下拉菜单。
    |
    2月前
    |
    前端开发
    Foundation 图标1
    Foundation 图标提供了 283 个可自定义样式的图标,适用于文本、按钮、工具条、导航栏和表单等。使用方法简单,只需在 HTML 中添加相应的类名即可。例如:`&lt;i class=&quot;fi-name&quot;&gt;&lt;/i&gt;`。需在 `&lt;head&gt;` 部分引入样式文件。
    |
    25天前
    Foundation 侧边栏1
    Foundation 框架使用 `&lt;ul class=&quot;side-nav&quot;&gt;` 创建侧边栏导航。
    |
    1月前
    |
    前端开发
    Foundation 面板2
    通过添加.radius类,可以将面板设置为圆角样式。此外,还可以利用CSS来自定义面板样式,例如将其设计成卡片形式。示例展示了标题为“长城”的自定义面板,内容为“不到长城非好汉!!!”
    Foundation 面板2
    |
    23天前
    |
    索引
    Foundation 麦哲伦(Magellan)导航1
    Foundation 麦哲伦(Magellan)导航是一种固定的导航索引,用于页面内跳转。通过在 HTML 中添加特定的 `data` 属性和链接,可以轻松创建导航条目。
    |
    23天前
    Foundation 麦哲伦(Magellan)导航2
    麦哲伦导航头部工具条示例:通过固定顶部栏实现页面内导航,包含两个导航链接分别指向“Page 1”和“Page 2”,并使用`data-magellan-destination`属性标记目标位置。
    Foundation 下拉菜单4
    下拉菜单默认位于底部
    Foundation 下拉菜单2
    通过添加 .tiny、.small、.medium、.large 或 .mega 类,可以调整下拉菜单的宽度。在小屏幕上,所有下拉菜单的宽度为 100%。示例:.tiny(200px)、.small(300px)、.medium(500px)、.large(800px)、.mega(100%)。
    |
    1月前
    |
    容器
    Foundation 图标4
    该示例展示了如何使用 `&lt;label&gt;` 元素为图标添加描述。每个图标按钮包含一个图标和一个标签,分别表示“主页”、“分享”、“信息”、“邮件”和“搜索”。整个图标栏通过 `div` 容器和类名 `icon-bar five-up` 进行布局。
    Foundation 图标2
    以下示例展示了图标的不同用法:云图标、作为链接的云图标、样式化的云图标、主页图标、按钮上的主页图标、绿色按钮上的主页图标以及浅蓝色大链接按钮上的主页图标。