Question

我尝试将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 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。现在我试着简单地将徽标放在一列中，将togglebutton放在较小的视口中，将nav放到另一列中。但是在第一步中，三个中的一个表现得很奇怪。我试过尝试不同的元素钩子以及关闭切换元素的绝对位置，但没有任何帮助，我只是混淆为什么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列及其内容的行为就像它表现的那样我会很高兴。在此先感谢拉尔夫

Answer 1

absolute上的#togglenav位置（也称为.navio）会将该元素推出网格填充到容器的边缘。您需要返回填充，以便任何嵌套元素在网格上排成一行。 .toggler也是绝对定位的，然后从右边缘偏移。我假设这是修复网格填充问题，但它不起作用，因为元素宽度相对于一个更大的容器而不是它应该是。为了让Susy正确计算元素的宽度，它必须在适当的上下文中。

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

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

1 个答案: