响应式导航（从水平到垂直）的分析与实现

使用媒体查询，在宽屏下，使用类pure-u-md-1-3，使得导航水平放置，隐藏切换按钮；在窄屏下，使用类pure-u-1，使得导航垂直放置，显示切换按钮，其中切换按钮使用了绝对定位。

代码详情

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->

<style>.custom-wrapper {
    background-color:#ffd390;
    margin-bottom:1em;
    -webkit-font-smoothing: antialiased;
    height:2.1em;
    overflow: hidden;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    transition:0.5s;
}

.custom-wrapper.open {
    height:14em;
}

.custom-menu-3 {
    text-align: right;
}

.custom-toggle {
    width:34px;
    height:34px;
    position: absolute;
    top:0;
    right:0;
    display: none;
}

.custom-toggle .bar {
    background-color:#777;
    display: block;
    width:20px;
    height:2px;
    border-radius:100px;
    position: absolute;
    top:18px;
    right:7px;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    transition:0.5s;
}

.custom-toggle .bar:first-child {
    -webkit-transform:translateY(-6px);
    -moz-transform:translateY(-6px);
    -ms-transform:translateY(-6px);
    transform:translateY(-6px);
}

.custom-toggle.x .bar {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

.custom-toggle.x .bar:first-child {
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

@media (max-width: 47.999em) {

    .custom-menu-3 {
        text-align: left;
    }

    .custom-toggle {
        display: block;
    }</style>
<div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-menu">
            <a href="#" class="pure-menu-heading custom-brand">Brand</a>
            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-menu pure-menu-horizontal custom-can-transform">
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
            </ul>
        </div>
    </div>
</div>
<script>function (window, document)
var menu = document.getElementById('menu'),
    WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';

function toggleHorizontal()
    [].forEach.call(
        document.getElementById('menu').querySelectorAll('.custom-can-transform'),
        function(el){
            el.classList.toggle('pure-menu-horizontal');
        }
    );
};

function toggleMenu()
    // set timeout so that the panel has a chance to roll up
    // before the menu switches states
    if (menu.classList.contains('open')) {
        setTimeout(toggleHorizontal, 500);
    }
    else {
        toggleHorizontal();
    }
    menu.classList.toggle('open');
    document.getElementById('toggle').classList.toggle('x');
};

function closeMenu()
    if (menu.classList.contains('open')) {
        toggleMenu();
    }
}

document.getElementById('toggle').addEventListener('click', function (e)
    toggleMenu();
    e.preventDefault();
});

window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);

</script>

参考网址：
​​​https://purecss.io/menus/​​​
​​​https://purecss.io/layouts/tucked-menu-vertical/​​