Posts contrassegnato dai tag ‘menu animato’

La sezione BUG e MIGLIORAMENTI è qui per dargli maggiore visibilità

Allora cominciamo con le modifiche:

E stato aggiornato un BUG sulla trasparenza del DIV MASTER. Scaricate il nuovo file


Buongiorno,

oggi sono qui a presentarvi un nuovo plugin JQuery: SLIDING.

SLIDING è un plugin che vi permette di creare uno splendido effetto movimento per il vostro sito.

In pratica si è pensato di creare un vero e proprio menu grande quanto tutto la pagina(questa la mia idea) ma ovviamente lui si regola in base al suo contenitore.

Nel caso in cui il contenitore non abbia un altezza impostata, SLIDING prenderà l’altezza della finestra del browser come impostazione base.

Infatti il plugin è auto regolabile in base alle dimensioni di risoluzione.

Scaricate la demo in fondo alla pagina prima di continuare a leggere.

Per questo plugin è stata utilizzara la versione 1.7 di Jquery scaricabile dal sito stesso di Jquery 🙂 .

Allora cominciamo.

Per prima cosa aprimo la nostra bella pagina HTML/ASP/ASPX/PHP ec…….

Andiamo ad inserire all’interno dell’head in nostri file JS di jquery e quello del plugin SLIDING.

In più aggiungiamo il CSS del plugin SLIDING.

In tutto ci dovremmo trovare in questa situazione:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
  <link href="css/sliding.css" rel="stylesheet" type="text/css" />
  <script src="scripts/jquery-1.7.min.js" type="text/javascript"></script>
  <script src="scripts/sliding.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" ">

</form>
</body>
</html>

Dopo di che andiamo a inserire il codice HTML necessario al funzionamento del plugin:

<div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div id="master">
  </div>
</div>

Spieghiamo:ogni DIV con classe PICCOLO rappresenta l’unita cliccabile di piccole dimensioni, mentre il DIV MASTER rappresenta il contenitore del contenuto.

Bisogna guardare la DEMO per capirne bene il funzionamento e le specifiche.

Continuiamo:

Ora non resta che avviare il nostro script subito dopo il caricamento dell’intera pagina in questo modo:


<script>
$(document).ready(function () {
sliding.init();
});
</script>

Solo creando e impostando queste piccole cose il plugin funziona correttamente, ma ci sonoun po di parametri che e possibile impostare:

  • time (ms)  :  numerico – imposta il tempo di spostamento degli element. Di default è impostato a 1500 ms
  • childrenHover :  0/1 – setta o meno l’effetto del passaggio sui DIV con classe PICCOLI. Di default = 1
  • segnaPosto : 0/1 – setta o meno l’effetto di elemento DIV selezionato
  • segnaPostoHTML : stringa – HTML da passare per impostare il segnaposto. Necessario segnaPosto=1.  Di default = <div></div> in modalità trasparente bianco
  • classPiccoli : stringa – classe assegna ai DIV PICCOLI se impostate una classe diversa da”piccoli”.Di default ovviamente è “piccoli”
  • IDmaster : stringa – ID del DIV MASTER se gli assegnate un’ID diverso da “master”. Di default ovviamente è “master”
  • marginElement (px) : numerico – setta la spaziatura tra tutti i DIV nel contesto.
  • diffHeight (px) : numerico – setta una spaziatura in altezza per rimpicciolire le dimensioni del plugin.
  • piccoliWidth : stringa – setta la dimensione dei DIV PICCOLI. si può inpostare in qualsiasi unità o percentuale.

Potete scaricare tutti gli script con una pagina di esempio QUI

Se avente miglioire da comunicare o critiche , sono qui ad aspettare

Ciaooooo

Annunci