css - 如何让 Susy 使用纯 CSS 切换导航

标签 css sass susy-compass

我尝试将 Susy 网格应用到包含一个 Logo 和导航链接的页眉。但是我遇到了一些我无法解释的真正意外行为。 HTML 如下所示:

    <header id="top" role="banner" class="headerstyle headerline">
    <div class="sectionwrap">
        <div itemscope itemtype="http://schema.org/Organization">
            <a class="logohome" href="#gohome" title="Logo">
                <span itemprop="logo" class="sitelogo" data-picture data-alt="Logo">
                    <span data-src="img/logo.png"></span>
                    <span data-src="img/logo_x2.png"      data-media="(min-device-pixel-ratio: 2.0)"></span>
                    <!--[if (lt IE 9) & (!IEMobile)]>
                        <span data-src="img/logo.png"></span>
                    <![endif]-->
                    <span data-src="img/logo400.png"     data-media="(min-width: 350px)"></span>
                    <span data-src="img/logo400_x2.png"     data-media="(min-width: 350px) and (min-device-pixel-ratio: 2.0)"></span>
                    <span data-src="img/logo800.png"      data-media="(min-width: 800px)"></span>
                    <span data-src="img/logo800_x2.png"      data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></span>
                    <span data-src="img/logo1000.png" data-media="(min-width: 1000px)"></span>
                    <span data-src="img/logo1000_x2.png" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>
                    <noscript>
                        <img itemprop="logo" class="sitlogo" src="img/logo.png" alt="Logo">
                    </noscript>
                </span>
            </a>
        </div>
        <nav role="navigation">
            <ul class="navio" id="togglenav" tabindex="0">
                <li>
                    <a href="#togglenav" class="icon-alone toggler" title="Menu">
                        <span aria-hidden="true" data-icon="t"></span>
                        <span class="screen-reader-text">Menu open and close</span>
                    </a>
                </li><!--
                --><li><a class="navessentials" href="#pointone">Point1</a></li><!--
                --><li><a class="navessentials" href="#pointtwo">Point2</a></li><!--
                --><li><a class="navessentials" href="#pointthree">Point3</a></li><!--
                --><li><a class="navessentials" href="#pointfour">Point4</a></li><!--
                --><li><a class="navessentials" href="#pointfive">Point5</a></li><!--
                --><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
            </ul>
        </nav>
    </div>
</header>

.sectionwarp 是 Susy 容器的类。 .logohome 托管 Logo (我已将 Scott Jehls picturefill 的代码放在那里)。 nav 元素包含带有 5 个菜单点的菜单以及作为字体图标的菜单切换按钮和用于关闭打开菜单的隐藏列表元素。仅 CSS 切换导航基于以下文章 Toggle Navigation 

.logohome{
    float:left;
    width:17em;
}

.toggler{
    position: absolute;
    z-index: 1001;
    top: 0.55em;
    right: 0.5em;
    text-decoration: none;
    cursor: pointer;
    font-size: 2.75em; //3em
}

#togglenav li:not(:first-child) a {
    @include tran(color, $navtext);
    text-decoration: none;
    @include tran(bg, $fixedheader, 0.95);
    display: inline-block;
    height: 3em;
    line-height: 1.5em;
    padding: .8em;
    border-bottom: 1px solid orange;
    width: 100%;
}

body:not(:target) #togglenav {
    margin: 0;
    padding-top: 5.3em;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}
body:not(:target) #togglenav li:not(:first-child) {
    width: 100%;
    height: 0;
    line-height: 0;
    overflow: hidden;
    -webkit-transition: height 0.25s;
    -moz-transition: height 0.25s;
    -o-transition: height 0.25s;
    transition: height 0.25s;
}
body:not(:target) #togglenav:target {
    z-index: 1001;
}
body:not(:target) #togglenav:target .toggler {
    z-index:-1;
}

body:not(:target) #togglenav:target li:not(:first-child) {
    height: 3em;
    line-height: auto;
    overflow: visible;
    -webkit-transition: height 0.25s;
    -moz-transition: height 0.25s;
    -o-transition: height 0.25s;
    transition: height 0.25s;
}
body:not(:target) #togglenav:target .togglereset {
    height: 0;
    line-height: 0;
}
body:not(:target) #togglenav:target .togglereset a {
    width: 100%;
    background-color: transparent;
    border: none;
    height: auto;
    position: absolute;
    top: -101em;
    bottom: -101em;
    left: 0;
    right: 0;
    text-indent: -999em;
    direction:ltr;
    z-index: -1;
}

@include breakpoint($menutogglerswitch) {
    .toggler {
        display: none;
    }
    body:not(:target) #togglenav {
        padding-top: 0;
        float:right;
        position:relative;
        top:0.8em;
    }
    body:not(:target) #togglenav li:not(:first-child):not(:last-child) {
        display: inline;
        border: none;
    }
    body:not(:target) #togglenav li:not(:first-child) a {
        line-height: 1.5em;
        height: 2em;
        width: auto;
        border: none;
        background-color: transparent;
        padding: 0;
        margin-left: 1.5em;
        &:hover{
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom:5px $navunderline solid;
        }
    }
    body:not(:target) #togglenav .togglereset {
        display: none;
    }
}

切换按钮是绝对定位的，使用上面粘贴的当前设置一切看起来都很好:Toogle Nav without Susy .现在我尝试简单地将 Logo 放入一列，将切换按钮用于较小的视口(viewport)，将导航用于更宽的视口(viewport)。但是在第一步中，三个中的一个已经表现得很奇怪了。我尝试过尝试不同的元素 Hook 以及关闭切换元素的绝对位置，但没有任何帮助，我只是很困惑为什么 Susy 的行为就像它的行为以及我做错了什么。 ;) 我已经删除了带有 float:left 和固定宽度的 .logohome，并将其替换为以下内容:

.logohome {
        @include span-columns(6,18);
        outline: 1px solid green;
}
.toggler {
    @include breakpoint(1px 899px) {
        @include span-columns(12 omega,18);
        outline:1px solid red;
    }
}
.navio{
    @include breakpoint(900px) {
        @include span-columns(12 omega,18);
        outline:1px solid yellow;
    }
}

.navio 和 .logohome 在桌面视口(viewport)上的行为符合预期 (Desktop Viewport)。但是，如果您查看移动视口(viewport) (Mobile Viewport)，.toggler 的列会更宽，并且切换器图标的位置与其绝对位置完全相反。如果有人能阐明为什么 .toggler 列及其内容的行为与它的行为相似，我会很高兴。在此先感谢拉尔夫

最佳答案

  1. #togglenav 上的 absolute 位置(也称为 .navio)将该元素推出网格填充以容器的边缘。您需要重新填充以使任何嵌套元素在网格上对齐。 .toggler也是绝对定位的，然后从右边缘偏移。我认为这是为了解决网格填充问题，但它不起作用，因为元素宽度相对于一个比它应该的更大的容器。为了让 Susy 正确计算元素的宽度，它必须在正确的上下文中。

    我认为会有更简单的方法来编写整个小部件，但考虑到您的方法，最好的选择可能是在 li:first-child 上添加绝对定位，使用 $grid -padding 用于 left 和 right 位置偏移(和 top: 0;)。这将使您的列正确对齐。

  2. 您的初始布局(pre-susy)在 .toggler 上没有设置宽度 - 因此它会折叠成图标的大小。一旦你添加了 Susy，你就给了它一个相当大的设置宽度，所以图标对齐到那个宽度的左边(正如你所期望的)。尝试更改 .toggler 的文本对齐方式或将图标本身 float 到右侧。

  3. 当您使用 span-columns 时，您将添加与绝对定位无关的 float 和边距。相反，您可以只使用 width: columns(12,18); 来获取宽度。在那种情况下也不需要 omega。

关于css - 如何让 Susy 使用纯 CSS 切换导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18324675/

上一篇：CSS动画淡入淡出下滑

下一篇：javascript - 如何使 float 元素正确调整大小

相关文章：

susy-compass - 苏西 : fluid columns with fixed gutters?

node.js - 在 Node.js 和 Sass 之间共享配置变量

sass 文件，使用 gulp 组合和分离主题颜色文件

reactjs - 如何使用 Next.js 在组件级别导入 SCSS

css - 苏西网格: how to nest an odd number of columns inside a grid

jquery - 在构建移动优先布局时，可以使用 jquery 重新排列 HTML 的视觉源顺序吗？

html - 当窗口缩小时，如何让元素符号元素与图像保持对齐？

php - 在 PHP 中刷新我的注册(注册)表单后，CSS 不会加载

html - 如何创建和管理大型 CSS 元素？

需要 CSS 帮助，我需要将圆形 div 堆叠在一起

©2024 IT工具网  联系我们