How to get Susy going with a CSS only toggle navigation


Tags: css3,sass,susy-compass

Problem :

I've tried to apply a Susy grid to my header containing one logo and nav links. But i ran into some real unexpected behaviour i can't explain myself. The HTML looks like the following:

    <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 is the class for the Susy container. .logohome hosts the logo (i've placed code for Scott Jehls picturefill there). The nav element contains the menu with 5 menu points as well as the toggler button for the menu as a font icon and a hidden list element for closing the open menu. The CSS only toggle navigation is based on the following article 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;
    }
}

The Toggle Button is absolute positioned and everything looks fine with the present setup pasted above: Toogle Nav without Susy . Now i've tried simply to put the logo into one column and the togglebutton for smaller viewports and the nav for broader into another. But already in the first step one of the three behaves odd. I've tried around by trying different element hooks as well as switch off position absolute for the toggle element, but nothing helped and i am just confused why Susy acts like it acts and what i've done wrong. ;) I've removed the .logohome with the float:left and the fixed width and replaced it with the following:

.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 as well as .logohome behave as expected on a desktop viewport (Desktop Viewport). But if you take a look on a mobile viewport (Mobile Viewport) the column for .toggler is broader and the position of the toggler icon is in total contrary to its absolute position. If anyone could shed some light onto why the .toggler column and its content behaves like it behaves i would be glad. Thanks in advance Ralf



Solution :

  1. The absolute position on #togglenav (also known as .navio) pushes that element out past the grid-padding to the edges of the container. You need that padding back in order for any nested elements to line up on the grid. .toggler is also absolutely positioned, and then offset from the right edge. I assume that is to fix the grid-padding problem, but it doesn't work because the element width is relative to a larger container than it should be. In order for Susy to properly calculate the width of an element, it has to be in the proper context.

    I think there would be simpler ways to write this entire widget, but given your approach the best option is probably to add absolute positioning on your li:first-child, with $grid-padding for left and right position offsets (and top: 0;). That will get your columns aligned properly.

  2. Your initial layout (pre-susy) has no set width on the .toggler - so it is collapsing to the size of the icon. Once you add Susy, you give it a fairly large set width, so the icon aligns to the left of that width (as you might expect). Try changing the text-align of .toggler or floating the icon itself to the right.

  3. When you use span-columns you are adding floats and margins that are rendered irrelevant by your absolute positioning. Instead, you can just use width: columns(12,18); to get the width. There is also no need for omega in that case.


    CSS Howto..

    How do I get this CSS text-decoration override to work?

    How to stretch line between two cells ( tags)

    How to create border corner spacing in CSS

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    How to vertically center inline elements in CSS

    How to resize QR code?

    How to organize html and css to do this UI design with responsive design

    How to write page specific CSS in backbone js

    how to I use an Arabic font in my css?

    How can I specify relative positioning in HTML?

    How to left-align and right-align elements in one row using flexbox?

    CSS simple menu - how to align?

    how can i make the li inside the div be horizontal?

    jquery show() not displaying properly for highcharts graph

    How to position two elements side by side using CSS

    CSS : How to add an absolute div to a scrollable background? [closed]

    how to use input[type=range] CSS Pseudo-elements with firefox and IE

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    Pure CSS: Show image2 above/over/on top image1 on hover

    How to write CSS selector for this page?

    How to move text list items to align with an image list item

    How to allow user to switch back to standard view from a mobile device (CSS) [duplicate]

    How to add custom code to specific
  • s in wordpress while building navigation?
  • How to put some divs in a row?

    How to line up lists side by side?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to filter elements on click in js?

    How to create a speech bubble in css?

    How to add mouse hover properties to pie drawn on a node in d3?