Nav-select

css-only navigation element that displays as select box for small screens and inline links for larger ones.

by jorgeluis

HTML

<div class="nav-select">
    <svg class="icon--arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 18">
        <polygon class="shape" points="0 0 36 0 18 18 " />
    </svg>

    <nav>
        <a href="#opt1">Option1</a>
        <a href="#opt2">Option2</a>
        <a href="#opt3">Option3</a>
        <a href="#opt4">Option4</a>
    </nav>

    <select>
        <option value="opt1">Option1</option>
        <option value="opt2">Option2</option>
        <option value="opt3">Option3</option>
        <option value="opt4">Option4</option>
    </select>

</div>

CSS

.nav-select {
    position: relative;
    overflow: hidden;
    background: #003 url("triangle.svg") no-repeat 90% 50%;
    color: #fff;
}

.nav-select .icon--arrow {
    width: 18px;
    position: absolute;
    right: 9px;
    top: 50%;
    margin-top: -5px;
}

.nav-select .shape {
    fill: #fff;
}
.nav-select select,
.nav-select nav a {
    display: inline-block;
    padding: 15px;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    color: #fff;
    font-size: 1em;
    font-family: sans-serif;
}

.nav-select a,
.nav-select a:hover {
    text-decoration: none;
}


.nav-select nav {
    display: none;
}

.nav-select select {
    margin: 0;
    width: 100%;
}
.nav-select select:focus {
    outline: none;
}
.nav-select option {
    margin: 0;
    width: 100%;
}


@media screen and (min-width: 900px) {
   .nav-select nav {
        display: inline-block;
    }

   .nav-select select,
   .nav-select .icon--arrow {
        display: none;
    }
}