Responsive Menu Example 5: Dropdown

Example

HTML

In this example, the .demo class provides the same interactive appearance to all hyperlinks. The first hyperlink targets #menu, which is the full menu. When selected, the :target attribute will apply the formatting.

<div class="demo">

    <a href="#menu">Menu</a>

    <div id="menu">

        <a href="">Close Menu</a>
        <a href="">INFS 205</a>
        <a href="">INFS 310</a>
        <a href="">INFS 315</a>
        <a href="">INFS 361</a>
        <a href="">INFS 420</a>
        <a href="">INFS 490</a>
        <a href="">INFS 491</a>

        </div>
</div>

CSS

Note that #menu is hidden by default. When the user clicks on the hyperlink, the :target attribute will apply the specified formatting. In this example, the menu is arranged as a flexbox. A little extra formatting is used to control the positioning; that can be adjusted as necessary.

The first hyperlink in the menu (in the HTML) has a null target; this is used to close the menu.

#menu {
    display: none;
}


#menu:target {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 10; 
    background-color:transparent;
    width: 10em;
    position: relative;
    top: -25px;
    left: 0px;  
}

#menu a {
    padding: 10px;
    flex-grow: 0;
    flex-shrink: 0;
    text-decoration: none;
    text-align: center;
    width: 100%;
}        

/* add the interactive appearance */

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

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

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

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

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