Home html How to make a drop-down and closing menu?

How to make a drop-down and closing menu?

Author

Date

Category

Often on sites I see that you create links like more info, etc., when you click on which the drop-down menu or info opens, while the rest of the page shifts down, and you can also roll back, for example, here on the main thing did.


Answer 1, Authority 100%

Explore the material here , there is an example. In general, an entertaining series of article, I advise!


Answer 2, Authority 33%

For your link on the main thing, this item is called Accordon (Accordeon), but there is another Toggle, this is when you can open and close any items, but others do not change from it as in the accordion.

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


Answer 3, Authority 33%

On Ruseller.com I saw a similar menu. In any case, through jQuery


Answer 4, Authority 33%

As an option without JS using only CSS – Try the information to be contained by the “More details” link, shove into a relatively positioned block with the attribute of the Display: None and display it by the event of clicking on the link, translating hidden checkbox to the Checked state. Accordingly, based on the status of this checkbox to show / hide the info. For example: INPUT: Checked + #more_info {Display: Block}


Answer 5, Authority 33%

To do this, let’s say that there is a menu on the site:

ul id = "my-menu" & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Home & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; About company & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; history & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; real & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Future & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; contacts & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Products & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; meat products & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; sausage & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; sausages and sausages & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; delicacies & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; alcohol & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Wine & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; vodka & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; beer & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; / ul & gt;

Some leave root links with links, but we will not do so. We have root links (“About company”, “Products”, “Meat Products”, “Alcohol”) will not lead any page, when you click on them, the submenu will be disclosed.

So, the first thing is initializing the jQuery.js library. It is advisable to connect it in the section & lt; Head & gt; Document:

& lt; Head & gt;
..
& lt; script type = "text / javascript" src = "jQuery.js" & gt; & lt; / script & gt;
& lt; / Head & gt;

Now we can write javascript scripts. We will do it in a separate JS file that attach the same way

jQuery.js

. Immediately I will give the Basic 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 DOM document is ready, running in the cycle for all submenu (UL # My-Menu UL);
In each iteration, we assign the class ‘collapse’ link, which is responsible for this submenu;
The same link assign an “click ‘event handler, which, depending on the state, the submenu will disclose or hide it.
Onlick returns ‘False’ so that the link does not follow.

It seems to me when you hide, for example, the “Products” submenu, and then open it – the child submenu should be closed regardless of what they were before. Therefore, add the SlideUp method in the callback function to the SlideUp still:

$ (this) .find ('UL'). Each (function () {
$ (this) .hide (). Prev (). Removeclass ('Expanded'). AddClass ('COLLAPSED');
});

In principle, the menu is ready. However, you can hang a couple of small rims. For example, to implement the resolution of the opening of the menu when switching to other pages. Let’s do it through the cookie. The meaning of this is when the menu is open, the cookie is recorded by the view of the ‘submenumark-xx = Opened’, where the XX is the sequence number (index) of this submenu in the list of all submenu. Accordingly, when it closes – recording is erased from cookie.

To work with a cookie, we will be convenient for the jQuery.Cookie.js plugin. Download it and connect next to jQuery. Now write a couple of auxiliary fuchs to work with Cookie:

Function Cookieset (index) {
$ .Cookie ('submenumark-' + index, 'Opened', {EXPIRES: NULL, PATH: '/'});
}
FUNCTION COOKIEDEL (INDEX) {
$ .Cookie ('Submenumark-' + Index, NULL, {EXPIRES: NULL, PATH: '/'});
}

When the document is loaded, we need to see which submenu are marked in cookies and open them. Therefore, insert the following piece of code into the cycle in all submenues:

$ ('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 might notice, we now have CSS classes ‘expanded’, ‘collapsed’ and ‘collapsible’ – in this way you can adapt to our menu using CSS.

and the latest barcode – everywhere, where in our code opens or closes the submenu, to call the corresponding cookie function. I will not describe this, you can not look at the finished script.

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


Answer 6, Authority 33%

html:

& lt; ul id = "my-menu" & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Home & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; span & gt; [+] & lt; / span & gt; & lt; a # 0 = "" & gt; About company & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; history & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; real & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Future & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; contacts & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Products & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; span & gt; [+] & lt; / span & gt; & lt; a # 0 = "" & gt; meat products & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; sausage & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; sausages and sausages & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; delicacies & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; li & gt; & lt; span & gt; [+] & lt; / span & gt; & lt; a # 0 = "" & gt; alcohol & lt; / a & gt;
& lt; ul & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; Wine & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; vodka & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "# 0" & gt; beer & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; / ul & gt;
& lt; / li & gt;
& lt; / ul & gt;

CSS:

& lt; style type = "text / css" & gt;
# My-Menu & gt; Li UL {Display: None;}
# My-Menu & gt; Li & GT; A {Cursor: Pointer;}
# my-menu li {padding-left: 0; }
& lt; / style & gt;

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 simpler, as it boys to the collection)

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions