Эффекты на основе Java Script

Вертикальное меню с горизонтально разворачивающимися подменю

Viewer

Home Close

Articles

Advocacy

Advocacy One Advocacy Two Advocacy Three Advocacy Four Advocacy Five Advocacy Six Advocacy Seven

Blogs

PHP Guru

Guru One Guru Two Guru Three Guru Four

Design

Archive

Archive One

Design One Design Two Design Three Design Four Design Five

Develop

Develop One Develop Two Develop Three Develop Five Develop Six Develop Seven Develop Eight

News

News One News Two News Three News Four

Reviews

Review One Review Two

File Manager

Links

Advocacy

Interviews

Interview One Interview Two Interview Three Interview Four Interview Five Interview Six Interview Seven

PHP

PHP One PHP Two PHP Three

Advocacy One Advocacy Two Advocacy Three Advocacy Four Advocacy Five

Community

Community One Community Two Community Three Community Four Community Five

Concepts

Books

Book One Book Two Book Three Book Four

Patterns

Pattern One Pattern Two Pattern Three Pattern Four

Concept One Concept Two Concept Three

Tutorials

Introductory

Introductory One IIntroductory Two Introductory Three Introductory Four Introductory Five Introductory Six Introductory Seven

Tutorial One Tutorial Two Tutorial Three Tutorial Four Tutorial Five Tutorial Six Tutorial Seven Tutorial Eight Tutorial Nine

Help

About XulMenu About this site

<Вернуться в каталог>

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

Всё подписано. Все параметры и стили задаются в CSS таблице. Чтобы что то изменить Вы должны скачать файл example2.css, воспользовавшись функцией [Скачать с сервера], и внести необходимые изменения.

Внутри тега <BODY> - </BODY> там где у Вас будет меню.

<table cellspacing="0" cellpadding="0" height="100%"><tr><td id="bar">
        
        <table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu">
        <tr>
            <td>
                <a class="button" href="javascript:void(0)">Viewer</a>
                <div class="section">
                    <a class="item" href="#">Home</a>
                    <a class="item" href="#">Close</a>
                </div>

<a class="button" href="javascript:void(0)">Articles</a>
                <div class="section">
                    <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="#">Advocacy One</a>
                        <a class="item" href="#">Advocacy Two</a>
                        <a class="item" href="#">Advocacy Three</a>
                        <a class="item" href="#">Advocacy Four</a>
                        <a class="item" href="#">Advocacy Five</a>
                        <a class="item" href="#">Advocacy Six</a>
                        <a class="item" href="#">Advocacy Seven</a>
                    </div>
                    <a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">Guru One</a>
                            <a class="item" href="#">Guru Two</a>
                            <a class="item" href="#">Guru Three</a>
                            <a class="item" href="#">Guru Four</a>
                        </div>
                    </div>
                    <a class="item" href="javascript:void(0)">Design<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="javascript:void(0)">Archive<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">Archive One</a>
                        </div>
                        <a class="item" href="#">Design One</a>
                        <a class="item" href="#">Design Two</a>
                        <a class="item" href="#">Design Three</a>
                        <a class="item" href="#">Design Four</a>
                        <a class="item" href="#">Design Five</a>
                    </div>
                    <a class="item" href="javascript:void(0)">Develop<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="#">Develop One</a>
                        <a class="item" href="#">Develop Two</a>
                        <a class="item" href="#">Develop Three</a>
                        <a class="item" href="#">Develop Five</a>
                        <a class="item" href="#">Develop Six</a>
                        <a class="item" href="#">Develop Seven</a>
                        <a class="item" href="#">Develop Eight</a>
                    </div>
                    <a class="item" href="javascript:void(0)">News<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="#">News One</a>
                        <a class="item" href="#">News Two</a>
                        <a class="item" href="#">News Three</a>
                        <a class="item" href="#">News Four</a>
                    </div>
                    <a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="#">Review One</a>
                        <a class="item" href="#">Review Two</a>
                    </div>
                    <a class="item" href="#">File Manager</a>
                </div>

<a class="button" href="javascript:void(0)">Links</a>
                <div class="section">
                    <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">Interview One</a>
                            <a class="item" href="#">Interview Two</a>
                            <a class="item" href="#">Interview Three</a>
                            <a class="item" href="#">Interview Four</a>
                            <a class="item" href="#">Interview Five</a>
                            <a class="item" href="#">Interview Six</a>
                            <a class="item" href="#">Interview Seven</a>
                        </div>
                        <a class="item" href="javascript:void(0)">PHP<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">PHP One</a>
                            <a class="item" href="#">PHP Two</a>
                            <a class="item" href="#">PHP Three</a>
                        </div>
                        <a class="item" href="#">Advocacy One</a>
                        <a class="item" href="#">Advocacy Two</a>
                        <a class="item" href="#">Advocacy Three</a>
                        <a class="item" href="#">Advocacy Four</a>
                        <a class="item" href="#">Advocacy Five</a>
                    </div>
                    <a class="item" href="javascript:void(0)">Community<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="#">Community One</a>
                        <a class="item" href="#">Community Two</a>
                        <a class="item" href="#">Community Three</a>
                        <a class="item" href="#">Community Four</a>
                        <a class="item" href="#">Community Five</a>
                    </div>
                    <a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="javascript:void(0)">Books<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">Book One</a>
                            <a class="item" href="#">Book Two</a>
                            <a class="item" href="#">Book Three</a>
                            <a class="item" href="#">Book Four</a>
                        </div>
                        <a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">Pattern One</a>
                            <a class="item" href="#">Pattern Two</a>
                            <a class="item" href="#">Pattern Three</a>
                            <a class="item" href="#">Pattern Four</a>
                        </div>
                        <a class="item" href="#">Concept One</a>
                        <a class="item" href="#">Concept Two</a>
                        <a class="item" href="#">Concept Three</a>
                    </div>
                    <a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                    <div class="section">
                        <a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="arrow1.gif" width="4" height="7" alt="" /></a>
                        <div class="section">
                            <a class="item" href="#">Introductory One</a>
                            <a class="item" href="#">IIntroductory Two</a>
                            <a class="item" href="#">Introductory Three</a>
                            <a class="item" href="#">Introductory Four</a>
                            <a class="item" href="#">Introductory Five</a>
                            <a class="item" href="#">Introductory Six</a>
                            <a class="item" href="#">Introductory Seven</a>
                        </div>
                        <a class="item" href="#">Tutorial One</a>
                        <a class="item" href="#">Tutorial Two</a>
                        <a class="item" href="#">Tutorial Three</a>
                        <a class="item" href="#">Tutorial Four</a>
                        <a class="item" href="#">Tutorial Five</a>
                        <a class="item" href="#">Tutorial Six</a>
                        <a class="item" href="#">Tutorial Seven</a>
                        <a class="item" href="#">Tutorial Eight</a>
                        <a class="item" href="#">Tutorial Nine</a>
                    </div>
                </div>

<a class="button" href="javascript:void(0)">Help</a>
                <div class="section">
                    <a class="item" href="#">About XulMenu</a>
                    <a class="item" href="#">About this site</a>
                </div>
            </td>
        </tr>
        </table>

</td>
    </tr></table>

Здесь задаётся структура самого меню. Я думаю в ней Вы легко разберётесь.

Внутри тега <BODY> - </BODY> в самом конце, перед </BODY>.

Здесь должно быть всё понятно.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.