Often on sites I see that they create links like more info, etc., when clicking on them, a drop-down menu or info opens, while the rest of the page moves down, and you can also turn everything back, for example, you did it on the main page .

    6 answers 6

    Study the material here , there is an example. Generally entertaining series of articles, I advise!

      According to your reference to the main one, this element is called an accordion (accordeon), and there is still toggle, this is when you can open and close any elements, but others do not change from this, as in an accordion.

      The person above correctly advised you the jQuery library, on it it is implemented. Look for examples on the Internet.

        on ruseller.com saw a similar menu. Anyway through jquery

        • And you can on mootools or even without libraries. =) - ling

        As an option without js using only css - try the information that will be contained on the “more” link, shove it in a relatively positioned block with the display: none attribute and display it on the click event on the link, setting the hidden checkbox to the checked state. Accordingly, based on the state of this checkbox, show / hide info. For example: input: checked + #More_info {display: block}

          For this we assume that the site has such a menu:

          ul id="my-menu"> <li><a href="#0">Главная</a></li> <li><a href="#0">О компании</a> <ul> <li><a href="#0">История</a></li> <li><a href="#0">Настоящее</a></li> <li><a href="#0">Будущее</a></li> </ul> </li> <li><a href="#0">Контакты</a></li> <li><a href="#0">Продукция</a> <ul> <li><a href="#0">Мясные продукты</a> <ul> <li><a href="#0">Колбаса</a></li> <li><a href="#0">Сосиски и сардельки</a></li> <li><a href="#0">Деликатесы</a></li> </ul> </li> <li><a href="#0">Алкоголь</a> <ul> <li><a href="#0">Вино</a></li> <li><a href="#0">Водка</a></li> <li><a href="#0">Пиво</a></li> </ul> </li> </ul> </li> </ul>

          Some leave root links as links, but we will not do that. We have root links ("About Company", "Products", "Meat Products", "Alcohol") will not lead to any page; when you click on them, a submenu will be opened.

          So, first of all, initialize the jquery.js library. It is advisable to connect it in the <head> section of the document:

           <head> .. <script type="text/javascript" src="jquery.js"></script> </head>

          Now we can write javascript scripts. We will do this in a separate js-file, which we add in the same way.

          jquery.js

          . Immediately give the base code:

           $(document).ready(function() { $('ul#my-menu ul').each(function(index) { $(this).prev().addClass('collapsible').click(function() { if ($(this).next().css('display') == 'none') { $(this).next().slideDown(200, function () { $(this).prev().removeClass('collapsed').addClass('expanded'); }); }else { $(this).next().slideUp(200, function () { $(this).prev().removeClass('expanded').addClass('collapsed'); $(this).find('ul').each(function() { $(this).hide().prev().removeClass('expanded').addClass('collapsed'); }); }); } return false; }); }); });

          Here we do the following things:

          when the document's DOM tree is ready, we loop through all the submenus (ul # my-menu ul); in each iteration we assign the class 'collapsible' link, which is responsible for this submenu; We assign the event handler 'click' to the same link, which, depending on the state of the submenu, will reveal or hide it. onlick returns 'false' so that the link does not follow the link.

          It seems to me that when you hide, for example, the submenu "Products", and then you open it - the child submenus should be closed regardless of what position they were in before. Therefore, we add another line to the callback function of the slideUp method:

           $(this).find('ul').each(function() { $(this).hide().prev().removeClass('expanded').addClass('collapsed'); });

          Basically, the menu is ready. However, you can hang a couple more small lotions. For example, to implement the memorization of the opening menu when moving to other pages. Make it through cookie. The point is this - when the menu is opened, a record of the type 'submenuMark-xx = opened' is entered in the cookie, where xx is the index number of this submenu in the list of all submenus. Accordingly, when it is closed - the record is erased from the cookie.

          To work with the cookie, we will be comfortable with the jquery.cookie.js plugin. Download it and connect next to jquery. Now we will write a couple of helper functions for working with cookies:

           function cookieSet(index) { $.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); } function cookieDel(index) { $.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); }

          When loading a document, we need to see which submenus are marked in cookies and open them. Therefore, we insert the following piece of code into the loop for all submenus:

           $('ul#my-menu ul').each(function(i) { ..... if ($.cookie('submenuMark-' + i)) { $(this).show(); $(this).prev().removeClass('collapsed').addClass('expanded'); }else { $(this).hide(); $(this).prev().removeClass('expanded').addClass('collapsed'); } ..... });

          As you can see, we now have the CSS classes 'expanded', 'collapsed' and 'collapsible' - this way you can slightly embellish our menu with CSS.

          And the very last stroke - everywhere, where in our code a submenu opens or closes, put a call to the corresponding cookie function. I will not describe this anymore - you can see it in the finished script.

          http://alt-f4.ru/files/exp_menu.rar

            HTML:

             <ul id="my-menu"> <li><a href="#0">Главная</a></li> <li><span>[+]</span><a #0="">О компании</a> <ul> <li><a href="#0">История</a></li> <li><a href="#0">Настоящее</a></li> <li><a href="#0">Будущее</a></li> </ul> </li> <li><a href="#0">Контакты</a></li> <li><a href="#0">Продукция</a> <ul> <li><span>[+]</span><a #0="">Мясные продукты</a> <ul> <li><a href="#0">Колбаса</a></li> <li><a href="#0">Сосиски и сардельки</a></li> <li><a href="#0">Деликатесы</a></li> </ul> </li> <li><span>[+]</span><a #0="">Алкоголь</a> <ul> <li><a href="#0">Вино</a></li> <li><a href="#0">Водка</a></li> <li><a href="#0">Пиво</a></li> </ul> </li> </ul> </li> </ul>

            CSS:

             <style type="text/css"> #my-menu > li ul {display: none;} #my-menu > li > a {cursor: pointer;} #my-menu li {padding-left: 0; } </style>

            Js:

              jQuery(document).ready(function($) { $('#my-menu a').click(function(){ var current_element = this; $(this).next().animate( {'height':'toggle'}, 200, 'linear', function() { if( $(current_element).next().css('display') == 'block' ) $(current_element).prev().html( "[-]"); else $(current_element).prev().html( "[+]"); } ); return false; }); });

            in my opinion it will be a little bit simpler, as it makes the collection)