Smint Menu One Page
Smint es un plugin de jQuery que te permite añadir en tu Web un menú que te sigue al hacer scroll con el ratón y también al clickear en uno de sus elementos con efecto slide.
Utilizando este plugin podemos crear una Web donde cada página será un contenedor y cada contenedor asociado a un elemento del menú para hacer slide scroll hacia la página al pulsar en el elemento.
Añadirlo a tu Web es tan sencillo como añadir la librería jQuery, el plugin y su llamada además de los estilos necesarios para la presentación:
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
Ahora tendremos que crear el menú de elementos dentro del <body>:
<div class="subMenu"> <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Productos</a> <a href="#" id="s2" class="subNavBtn">Servicios</a> <a href="#" id="s3" class="subNavBtn">Clientes</a> <a href="#" id="s4" class="subNavBtn">Contacto</a> <a href="#" id="s5" class="subNavBtn">Download</a> </div> </div>
Y seguidamente tendremos los bloques o contenedores que representarán las páginas, como por ejemplo:
<div class="section s1"> <div class="inner"> <!--YOUR CONTENT--> </div> </div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
Una respuesta a “Smint Menu One Page”
Deja una respuesta
33 artículos que te podrían interesar
Ver más sobre
una consulta, puedo colocar mas secciones de las que aparece en el demo?, asi por ejemplo unos 6 o 7?…. saludos.