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

<div id="bar">
        
        <table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu" width="99%">
        <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></td>
            
      <td>
                <a class="button" href="javascript:void(0)">Articles</a>
                <div class="section">
                    <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/550/images/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="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/550/images/arrow1.gif" width="4" height="7" alt="" /></a>
                    
          <div class="section">
                        <a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/550/images/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="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/550/images/arrow1.gif" width="4" height="7" alt="" /></a>
                    
          <div class="section">
                        <a class="item" href="javascript:void(0)">Archive<img class="arrow" src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_gor/550/images/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="images/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="images/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="images/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></td>
            
      <td>
                <a class="button" href="javascript:void(0)">Links</a>
                <div class="section">
                    <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
                    
          <div class="section">
                        <a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/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="images/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="images/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="images/arrow1.gif" width="4" height="7" alt="" /></a>
                    
          <div class="section">
                        <a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/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="images/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="images/arrow1.gif" width="4" height="7" alt="" /></a>
                    
          <div class="section">
                        <a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/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></td>
            
      <td>
                <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>
      <td align=right>  

        <div id="search">
            <input type="text" name="searchField" value="" />
            <select name="searchWhat"><option value="">Articles</option><option value="">Links</option><option value="">PHP Manual</option></select>
            <input type="button" value="Search" />
        </div>
         </td>  </tr>
        </table>
    </div>

<script type="text/javascript">
    var menu1 = new XulMenu("menu1");        // идентификатор меню 
    menu1.arrow1 = "images/arrow1.gif";      // указатель пассивной ссылки  подменю
    menu1.arrow2 = "images/arrow2.gif";      // указатель активной ссылки подменю
    menu1.init();
    </script>

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

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

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