Responsive Menu Example 1: Convert Row To Column

Example

Be sure to resize the page!

HTML

<div class="samplenav">

<ul>
    <li><a href="">INFS 205</a></li>
    <li><a href="">INFS 310</a></li>
    <li><a href="">INFS 315</a></li>
    <li><a href="">INFS 361</a></li>
    <li><a href="">INFS 420</a></li>
    <li><a href="">INFS 490</a></li>
    <li><a href="">INFS 491</a></li>
</ul>

</div>

CSS

/* remove the bullets */

.samplenav ul {
    list-style-type: none;
}


/*make list display vertically (default), set width, center the text, and add a border        */
.samplenav li {
    display: block;
    width: 100px;
    border: thin solid black;
    text-align: center;
}


/* media query to display the menu horizontally when the viewport hits or exceeds 800px */

@media (min-width: 800px) {
    .samplenav li {
    display: inline-block;
    }
}

/* remove underline. set anchor to full width of containing element; must display block to make this work*/

.samplenav a {
    display: block;
    text-decoration: none;
    width: 100%;
}


/* add the interactive appearance */

.samplenav a:link {
    color: blue;
    background-color: white;
}

.samplenav a:visited {
    color: blue;
    background-color: white;
}

.samplenav a:focus {
    color: white;
    background-color: blue;
}

.samplenav a:hover {
    color: white;
    background-color: blue;
}

.samplenav a:active {
    color: white;
    background-color: blue;
}