Menu centrato in Foundation
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!
css javascript framework foundation jquery modernizr
8 Commenti
I noticed that your mattepuffo.com website could be missing out on approximately 1,000 visitors daily. Our AI powered traffic system is tailored to enhance your site's visibility: https://cutt.ly/8eDg5TMA We're offering a free trial that includes four thousand targeted visitors to show the potential benefits. After the trial, we can supply up to a quarter million targeted visitors per month. This service could greatly increase your website's reach and visitors.
05/11/2024I see that your mattepuffo.com website might be missing out on approximately a thousand visitors daily. Our AI powered traffic system is tailored to boost your site's visibility: https://ow.ly/T4ag50TR2oM We're offering a free trial that includes four thousand targeted visitors to show the potential benefits. After the trial, we can supply up to 250,000 targeted visitors per month. This service could greatly enhance your website's reach and visitors.
05/11/2024I noticed that your mattepuffo.com website may be missing out on approximately a thousand visitors daily. Our AI powered traffic system is tailored to boost your site's visibility: https://ow.ly/QRAX50TR2rR We're offering a free trial that includes 4,000 targeted visitors to show the potential benefits. After the trial, we can supply up to 250,000 targeted visitors per month. This solution could greatly enhance your website's reach and traffic.
31/10/2024I saw that your mattepuffo.com website may be missing out on approximately 1,000 visitors daily. Our AI powered traffic system is tailored to enhance your site's visibility: https://ow.ly/T4ag50TR2oM We're offering a free trial that includes 4,000 targeted visitors to show the potential benefits. After the trial, we can supply up to 250,000 targeted visitors per month. This solution could greatly enhance your website's reach and visitors.
29/10/2024I noticed that your mattepuffo.com website could be missing out on approximately 1K visitors daily. Our AI powered traffic system is tailored to enhance your site's visibility: https://ow.ly/QRAX50TR2rR We're offering a free trial that includes 4,000 targeted visitors to show the potential benefits. After the trial, we can supply up to 250K targeted visitors per month. This opportunity could greatly amplify your website's reach and engagement.
26/10/2024I saw that your mattepuffo.com website might be missing out on approximately a thousand visitors daily. Our AI powered traffic system is tailored to enhance your site's visibility: https://cutt.ly/xeDg5bbk We're offering a free trial that includes 4,000 targeted visitors to show the potential benefits. After the trial, we can supply up to 250K targeted visitors per month. This opportunity could greatly increase your website's reach and engagement.
25/10/2024I see that your mattepuffo.com website may be missing out on approximately a thousand visitors daily. Our AI powered traffic system is tailored to enhance your site's visibility: https://ln.run/VZn5V We're offering a free trial that includes 4,000 targeted visitors to show the potential benefits. After the trial, we can supply up to 250K targeted visitors per month. This service could greatly enhance your website's reach and visitors.
20/10/2024I noticed that your mattepuffo.com website could be missing out on approximately 1,000 visitors daily. Our AI powered traffic system is tailored to boost your site's visibility: https://ln.run/_s3yp We're offering a free trial that includes 4,000 targeted visitors to show the potential benefits. After the trial, we can supply up to 250K targeted visitors per month. This solution could greatly enhance your website's reach and visitors.
18/10/2024