我试图将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。现在,我仅尝试将徽标放入一列,将切换按钮放入较小的视口,将导航栏放入更宽的区域。但已经在第一步中,这三个行为之一很奇怪。我已经尝试通过尝试不同的元素挂钩以及切换元素的绝对关闭位置来进行尝试,但是没有任何帮助,我只是感到困惑,为什么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列及其内容的行为方式,我将很高兴。在此先感谢Ralf

最佳答案

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

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

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

10-16 00:25