Śliczne animowane menu jQuery od apycom!

///Śliczne animowane menu jQuery od apycom!

Śliczne animowane menu jQuery od apycom!

Ileż to ja dzisiaj błądziłem nad OpenCart, żeby dodać tam animowane menu.. Zabawną zagrywką od strony twórców jest śliczne, animowane, lekko przezroczyste menu, które znajduje się … no właśnie.. tylko na zapleczu administracyjnym strony. Na froncie mamy proste, lekko przezroczyste „wyskakujące” menu. Na szczęście natrafiłem na stronę apycom.com, gdzie znalazłem mnóstwo fajnych  menusów  z wykorzystaniem jQuery .

Zdaje sobie sprawę, że brzmi to jak reklama, dlatego zastrzegam, że nie mam z tą stroną nic wspólnego. Po prostu dają świetnie wyglądające, animowane menusy za darmo 🙂

Daję kilka przykładów w galerii, ale jest ich znacznie więcej. Polecam! www.apycom.com

 

 

A oto instrukcja wdrożenia menu (j. ang.) za stroną apycom.com:

Step 1: Select the style of the menu you like and download
zip file with all menu files.

Step 2: Copy 'images' folder, menu.css, menu.js and jquery.js
files to the same directory
as the page itself.

Step 3: Open your index.html file in any text editor. Copy and
insert the following code
into the <head> section of your page:

    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>

Step 4: Create an unordered list for your base navigation.
Add  the sample markup to the
<body> section of your page.

    <div id="menu">
        <ul>
            <li><a href="#"><span>Home</span></a>
                <div><ul>
                    <li><a href="#"><span>Sub Item 1</span></a>
                        <div><ul>
                            <li><a href="#"><span>Sub Item 1.1</span></a>
                                <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                                </ul></div>
                            </li>
                            <li><a href="#"><span>Sub Item 1.2</span></a></li>
                            <li><a href="#"><span>Sub Item 1.3</span></a></li>
                            <li><a href="#"><span>Sub Item 1.4</span></a></li>
                            <li><a href="#"><span>Sub Item 1.5</span></a></li>
                            <li><a href="#"><span>Sub Item 1.6</span></a></li>
                            <li><a href="#"><span>Sub Item 1.7</span></a>
                                <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                                </ul></div>
                            </li>
                        </ul></div>
                    </li>
                    <li><a href="#"><span>Sub Item 2</span></a></li>
                    <li><a href="#"><span>Sub Item 3</span></a></li>
                </ul></div>
            </li>
            <li><a href="#"><span>Product Info</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#"><span>Sub Item 1.7</span></a></li>
                    </ul>
                    <ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                        <li><a href="#"><span>Sub Item 2.3</span></a></li>
                        <li><a href="#"><span>Sub Item 2.4</span></a></li>
                        <li><a href="#"><span>Sub Item 2.5</span></a></li>
                        <li><a href="#"><span>Sub Item 2.6</span></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#"><span>Help</span></a></li>
            <li><a href="#"><span>Contacts</span></a></li>
        </ul>
    </div>

Step 5: Change the items' caption, specify links and change the
menu structure as you like. You can create as many sub-menus
and list items as necessary.

Note: Please don't forget to use the DOCTYPE declaration for universal compatibility,
for example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

License: Free, but please put a link to this page where you want:

    <a href="http://apycom.com/">Apycom jQuery Menus</a>

Skomentuj wpis

komentarzy

By | 2012-10-09T16:08:05+00:00 Czerwiec 12th, 2012|Webdesign - html / php / js|2 komentarze

About the Author:

2 komentarze

  1. sadasd 10-02-2013 at 22:45

    A gdzie download?

  2. pyby 10-02-2013 at 23:07

Leave A Comment