草庐IT

Foundation 侧边栏

runoob 2023-04-06 原文

Foundation 侧边栏


侧边栏导航

Foundation 使用 <ul class="side-nav"> 创建侧边栏:

实例

<ul class="side-nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

尝试一下 »

激活链接与分割线

已点击的链接可以在 <li> 上使用 .active 类来标识,使用 .divider 类添加水平分割线:

实例

<ul class="side-nav">
  <li class="active"><a class="a" href="#">Link 1</a></li>
  <li><a class="a" href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a class="a" href="#">Link 3</a></li>
  <li><a class="a" href="#">Link 4</a></li>
</ul>

尝试一下 »

网格中的侧边栏

我们可以使用网格设计模式来设置侧边导航栏,实例如下:

实例

<div class="row">
  <div class="medium-4 columns" style="background-color:#f1f1f1;">
    <ul class="side-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Learn HTML</a></li>
      ...
    </ul>
  </div>
  <div class="medium-8 columns">
    <h1>Side Nav</h1>
    <p>Some text..</p>
    ...
  </div>
</div>

尝试一下 »

有关Foundation 侧边栏的更多相关文章

  1. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性? - 2

    大家好,我正在开发一个新的Rails应用程序,我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css,还有它的视觉效果;p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的,如果您对app/assets/stylesheets/

  2. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误,但我不知道如何解决:找不到有效的gem'foundation'(>=0),原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗? 最佳答案 如

  3. vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2

    一、概览实现效果如下:二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default([Vue2]babel,eslint)  2、切换到项目目录,启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh

  4. javascript - 如何根据用户信息显示不同的侧边栏?登录后。ReactJS - 2

    我有一个reactjs应用程序,它使用azure事件目录进行身份验证,然后它显示这个菜单:但是我希望在登录后,根据从AzureAD收到的信息,如Angular色或组,然后显示具有不同选项的不同侧边栏,这样我就可以拥有具有不同用户组的相同应用程序,并且菜单将取决于Angular色或组。这是我的应用结构:相关文件如下:索引.jsimportReactfrom'react';importReactDOMfrom'react-dom';importDashAppfrom'./dashApp';importregisterServiceWorkerfrom'./registerServiceWo

  5. javascript - 悬停时显示的隐藏侧边栏 - 2

    我正在尝试创建一个默认情况下隐藏但在悬停时显示的侧边栏。我能想到的最接近的例子是这个:http://www.sidlee.com/.当您浏览主页以外的任何页面时,边栏仅显示数字。将鼠标移到该区域上后,侧边栏会展开以显示文本。我猜有一种方法可以用JavaScript做到这一点,但我不是专家,所以我想这里有人可以帮助我。 最佳答案 这只是一个简单的示例,但希望它能让您走上正确的轨道:)CSS:#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;b

  6. javascript - 使滚动侧边栏停在页脚处 - 2

    我目前使用的是:http://jsfiddle.net/0mLzseby/469/让我的侧边栏跟随页面。不过我的页脚很大,我希望div在到达页脚时停止,而不是继续滚动。我目前的代码是:functionsticky_relocate(){varwindow_top=$(window).scrollTop();vardiv_top=$('#sticky-anchor').offset().top;if(window_top>div_top){$('#sticky').addClass('stick');}else{$('#sticky').removeClass('stick');}}$(

  7. javascript - 在 Javascript 中检测 Foundation Small/Large 使用情况 - 2

    有没有办法检测Foundationgrid是否存在?使用Javascript处于“小”或“大”模式? 最佳答案 是的,您可以创建这样的函数:varisLarge,isMedium,isSmall;isSmall=function(){returnmatchMedia(Foundation.media_queries['small']).matches&&!matchMedia(Foundation.media_queries.medium).matches;};isMedium=function(){returnmatchMedia

  8. javascript - 如何处理 $(document).foundation() 调用和 WebPack? - 2

    根据基金会的documentation:AfteryouhaveincludedtheFoundationJavaScript,justaddasimplecalltoinitializeallpluginsonyourpage.WerecommendthatyouinitializeFoundationattheendofthepage.$(document).foundation();我的应用使用WebPack,因此模块加载是异步。这意味着正文底部的经典脚本会在ui-view被模板填充之前运行。(使用Angular)。如果我将脚本放在底部,DOM会在被Foundation的脚本解析

  9. javascript - 将 jQuery 变成 Angular,修复侧边栏不起作用(?) - 2

    我正在将jQuery插件转换为Angular指令,但仍然无法正常工作,或者:根本无法工作。ThisisthebehaviorIwanttoachieveHereisajsfiddlealso请记住,我想要通过此实现的是左侧边栏上到处都显示“粘性”的行为。我是用jQuery做的(我是Angular的新手),我需要让它与Angular一起工作。请去看看PlunkrExample,那种行为,就是我想要的。如果你们中的一些人花时间帮助我,请提前致谢。查看jQuery代码:$(function(){varoffset=$("#sidebar").offset();vartopPadding=85

  10. javascript - 如何用 Angular 做多个 View 来支持页眉和侧边栏? - 2

    我是第一次使用AngularJS。我已经在包含header.html模板的index.html页面中成功实现了一个ng-view。所以它看起来像下面但现在我正在创建一个仪表板(dashboard.html)。所以,除了header.html之外,我还有一个左侧菜单,所以它看起来像这样:我的index.html是这样的:我的dashboard.html是这样的:Link1Link2Link3 最佳答案 试试这个:angular.module('app',['ngRoute']).config(['$routeProvider',fun

随机推荐