jjzjj

html - Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上

coder 2023-08-12 原文

我正在尝试使用 foundation 6 创建一个非 Canvas ；这个想法是我有两个基本的列应用程序，然后我尝试仅在屏幕较小时使用 Canvas 外效果隐藏左侧的一个，但首先我需要让它工作:第 2 列显示完整屏幕宽度和第一列这应该只在屏幕上激活。在桌面屏幕上应该只在一个屏幕上显示两列。

想法是要有内容，而不仅仅是基础示例中的菜单。 怎样才能达到描述的效果？

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Page1 content -->

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page2 content -->
      </div>
    </div>
  </div>
</body>

检查这段代码: https://jsfiddle.net/q1e45fzz/16/

最佳答案

为了让 Canvas 外部分默认显示在更宽的屏幕上，您需要向 Canvas 外区域添加一个“reveal-for”类，例如 reveal-for-medium。试试这个:

    <div class="off-canvas-wrapper">
        <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
            <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
                <div class="title-bar-left">
                    <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
                    <span class="title-bar-title">Open sidebar</span>
                </div>
            </div>
            <div class="off-canvas position-left reveal-for-medium" id="offCanvasLeft" data-off-canvas >
                <h3>Side area</h3>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div id="widemenu" class="top-bar">
                <div class="top-bar-left">
                    Top area
                </div>
            </div>
            <div class="off-canvas-content" data-off-canvas-content>
                <div class="row column">
                    <h3>Main content</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                    <img src="http://placehold.it/2000x3000" alt="" />
                </div>
            </div>
        </div>
    </div>

您可以将任何您想要的内容放入 Canvas 外区域。它不必局限于列表、菜单或导航。在上面的例子中，我只放了一个标题和一段内容。

要调整 Canvas 外区域的宽度，您需要覆盖默认的 Foundation CSS。在这种情况下，选择器是 .position-left.reveal-for-medium ~ .off-canvas-content。所以在你用来覆盖 Foundation 样式的 CSS 中(所以你需要在 Foundation 的 CSS 之后加载它)你会做这样的事情:

.position-left.reveal-for-medium ~ .off-canvas-content {
  margin-left: 50%;
}

您可以通过调整is-open-left类来调整小屏幕 Canvas 外元素的宽度，如下所示:

.is-open-left {
  transform: translateX(90%);
}

四处移动这些百分比数字以准确适应您正在寻找的效果。在这两种情况下，这些都只是标准的 CSS 覆盖。我鼓励您使用 Chrome 检查器或 Firebug(取决于您使用的是什么)来检查布局中的元素，并尝试寻找您需要覆盖的特定 CSS 选择器。

有关使用检查器的更多信息，请参阅: https://developers.google.com/web/tools/chrome-devtools/ 和: http://getfirebug.com/faq/#Is_there_some_basic_description_of_how_Firebug_works

关于html - Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36671424/

FoundationOff-Canvas34ltgthtmlcsszurb-foundationzurb-foundation-6

有关html - Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - 无法覆盖 irb 中的 to_s - 2

    我在pry中定义了一个函数:to_s，但我无法调用它。这个方法去哪里了，怎么调用？pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后，我认为我得到了正确的答案:这个方法用在什么地方？在irb或pry中定义方法时，会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)

  6. ruby - 覆盖相似的方法，更短的语法 - 2

    在Ruby类中，我重写了三个方法，并且在每个方法中，我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗？如何缩短代码？ 最佳答案 如何使用别名？classExampleClassdefconfirmation_required?is_a

  7. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  10. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

随机推荐