Implémenter un menu de navigation adaptatif avec CSS

Cette fois, je vais vous apporter du CSS pour implémenter un menu de navigation adaptatif. Quelles sont les précautions pour implémenter un menu de navigation adaptatif avec CSS Voici un cas pratique, jetons un oeil.

Ce qui suit est un exemple simple à travers lequel vous pouvez apprendre à créer un menu de réponses.

html

 <nav class="nav">
        <ul>
            <li class="current"><a href="#">Portfolio</a></li>
            <li><a href="#">Illustration</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Print Media</a></li>
            <li><a href="#">Graphic Design</a></li>
        </ul>
    </nav>

css

 .nav {
            position: relative;
            margin: 20px 0;
        }
            .nav ul {
                margin: 0;
                padding: 0;
            }
                .nav ul li {
                    margin: 0 5px 10px 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                }
            .nav a {
                padding: 3px 12px;
                text-decoration: none;
                color: #999;
                line-height: 100%;
            }
                .nav a:hover {
                    color: #000;
                }
            .nav .current a {
                background: #999;
                color: #fff;
                border-radius: 5px;
            }
            /* right nav */
            .nav.right ul {
                text-align: right;
            }
            /* center nav */
            .nav.center ul {
                text-align: center;
            }

Les pages inférieures à 600 sont affichées dans une seule colonne

        @media (max-width: 600px) {
            .nav {
                position: relative;
                min-height: 30px;
            }
                .nav ul {
                    width: 180px;
                    padding: 5px 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border: solid 1px #aaa;
                    background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
                    border-radius: 5px;
                    box-shadow: 0 1px 2px rgba(0,0,0,.3);
                }
                .nav li {
                    display: none; /* hide all <li> items */
                    margin: 0;
                }
                .nav .current {
                    display: block; /* show only current <li> item */
                }
                .nav a {
                    display: block;
                    padding: 5px 5px 5px 32px;
                    text-align: left;
                }
                .nav .current a {
                    background: none;
                    color: #666;
                }
                /* on nav hover */
                .nav ul:hover {
                    background-image: none;
                }
                    .nav ul:hover li {
                        display: block;
                        margin: 0 0 5px;
                    }
                    .nav ul:hover .current {
                        background: url(images/icon-check.png) no-repeat 10px 7px;
                    }
                /* right nav */
                .nav.right ul {
                    left: auto;
                    right: 0;
                }
                /* center nav */
                .nav.center ul {
                    left: 50%;
                    margin-left: -90px;
                }
        }

Je crois que vous le maîtrisez après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser CSS3 pour obtenir un effet de barrage

Propriétés CSS impopulaires que vous ne connaissez pas

Comment personnaliser l'omission de texte avec CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!