Śliczne animowane menu jQuery od apycom! – VSX.pl – arduino, domoticz, informatyka, wordpress, windows, homeassistant

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>

Facebook - komentarze

Autor: Marcin Przybysz