Aller au contenu principal
loading

Fisheye menu (menu Mac 3D)

POSTÉ DANS jQuery TAGS jQuery AUTEUR herve COMMENTAIRES 4

Créer simplement un menu style Mac

Afin de créer un menu du style mac, jQuery fourni un "Fisheye Menu" très simple d'utilisation.

Il suffit d'écrire le code suivant pour que celui-ci fonctionne :

HTML

    <div id="fisheye" class="fisheye">
        <div class="fisheyeContainter">
            <a href="#" class="fisheyeItem"><img src="image.jpg" width="30" /><span>Image 1</span></a>
            <a href="#" class="fisheyeItem"><img src="image2.jpg" width="30" /><span>Image 2</span></a>
            <a href="#" class="fisheyeItem"><img src="image3.jpg" width="30" /><span>Image 3</span></a>
            <a href="#" class="fisheyeItem"><img src="image4.jpg" width="30" /><span>Image 4</span></a>
        </div>
    </div>

 Javascript

$('#fisheye').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.fisheyeContainter', itemWidth: 40, proximity: 90, halign : 'center' } )

Options

items String mandatory items selection
container String mandatory container element
itemWidth Integer mandatory the minimum width for each item
maxWidth Integer mandatory the maximum width for each item
itemsText String mandatory selection of element that contains the text for each item
proximity Integer mandatory the distance from element that makes item to interact
valign String mandatory vertical alignment
halign String mandatory horizontal alignment

 



4 commentaire