如何让 Susy 只使用 CSS 切换导航答案

【问题标题】：How to get Susy going with a CSS only toggle navigation如何让 Susy 只使用 CSS 切换导航
【发布时间】：2013-08-19 23:26:51
【问题描述】：

我尝试将 Susy 网格应用于包含一个徽标和导航链接的标题。但是我遇到了一些我无法解释自己的真正意外行为。 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 托管徽标（我已将 Scott Jehls 图片填充的代码放在那里）。 nav 元素包含带有 5 个菜单点的菜单以及作为字体图标的菜单切换按钮和用于关闭打开菜单的隐藏列表元素。 CSS only 切换导航基于以下文章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。现在，我尝试简单地将徽标放入一列，将切换按钮用于较小的视口，将导航用于更宽的视口。但是已经在第一步中，这三个中的一个表现得很奇怪。我已经尝试过尝试不同的元素挂钩以及关闭切换元素的绝对位置，但没有任何帮助，我只是困惑为什么 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 在桌面视口 (Desktop Viewport) 上的行为与预期相同。但是，如果您查看移动视口 (Mobile Viewport)，.toggler 的列更宽，并且切换器图标的位置与其绝对位置完全相反。如果有人能解释为什么 .toggler 列及其内容的行为与它的行为一样，我会很高兴。在此先感谢拉尔夫

【问题讨论】：

标签： css sass susy-compass

【解决方案1】：

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

我认为编写整个小部件会有更简单的方法，但鉴于您的方法，最好的选择可能是在您的 li:first-child 上添加绝对定位，$grid-padding 用于 left 和 right 位置偏移（和top: 0;)。这将使您的列正确对齐。
您的初始布局（预susy）在.toggler 上没有设置宽度 - 因此它正在折叠到图标的大小。添加 Susy 后，您为其设置了一个相当大的宽度，因此图标与该宽度的左侧对齐（如您所料）。尝试更改 .toggler 的 text-align 或将图标本身浮动到右侧。
当您使用span-columns 时，您添加的浮动和边距与您的绝对定位无关。相反，您可以使用 width: columns(12,18); 来获取宽度。在这种情况下也不需要omega。

【讨论】：

我已经尝试过您建议的步骤和要点。 2&3清楚。关于第1点。红色轮廓框比黄色框大的原因是因为sectionwrapper是相对于整个窗口宽度的（黄色和红色框的百分比相同，只是关系不同）。对于 $grid-padding 偏移，我现在使用了您在此处另一个线程中发布的 bleed mixin。 li:first-child 你的意思是我应该使用第三个位置：绝对放在一边.toggler 和#togglenav？我会继续调查和尝试，还没有驯服红盒子。 ;)
好吧，我想我明白了。我仍然不明白为什么当位置设置为绝对时，ul 中的第一个 li 作为祖先回退到文档正文。但我绕过了事情。我已将 .toggler 元素从 ul 中移出，将其放在 nav 元素内的正前方。删除了一些 li:first-child 选择器。将 .toggler 设置为 position:relative 并设置 float:right 并删除 .toggler 的宽度，因此框具有内容的范围。所以切换框粘在sectionwrapper的右边框上。