Menu centrato in Foundation

Mattepuffo's logo
Menu centrato in Foundation

Menu centrato in Foundation

Programmazione, HTML - CSS

Foundation è un frameowrk CSS che sta riscuotendo un buon successo.

Lo trovo un'ottima alternativa a Twitter Bootstrap.

Una problematica abbastanza richiesta è come centrare il menu.

Allora procedendo con ordine, prima scaricate la libreria dal link sopra.

Come potete vedere viene scaricata anche una versione di Modernizr (qui i dettagli su questa libreria).

A questo postiamo la pagina per intero:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Marzia Ferrone</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="js/vendor/custom.modernizr.js"></script>
        <script>
            Modernizr.load({
                test: Modernizr.mq('only all'),
                nope: 'js/vendor/respond.min.js'
            });
        </script>
    </head>
    <body>
        <header>
            <div class="row" style="max-width: 19.4em;">
                <div class="contain-to-grid">
                    <nav class="top-bar">
                        <ul class="title-area">
                            <li class="name">
                                <h1 id="logo" class="hide-text"><a href="#">LOGO</a></h1>
                            </li>
                            <!-- Icona e testo per il menu su mobile.
                                 Rimuovere la classe "menu-icon" per eliminare l'icona.
                                 Rimuovere il testo "Menu" per avere solo l'icona -->
                            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                        </ul>
                        <section class="top-bar-section">
                            <ul class="left">
                                <li><a href="index.php">Home</a></li>
                                <li class="divider"></li>
                                <li class="has-dropdown"><a href="#">Portfolio</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="contact.php">Contact me</a></li>
                            </ul>
                        </section>
                    </nav>
                </div>
            </div>
        </header>
        ...................
        <script src="js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>

Quindi, includiamo i CSS che servono, includiamo JQuery e Modrnizr, e infine, prima della chiusura del body, includiamo e inizializiamo Foundation.

Il nostro obiettivo è raggiunto tramite il div che sta subito sotto il tag header.

Niente di più!

Ciao!

Condividi

Commentami!