Expanding and Closing menus

@kbkgroupFeb 26.2020 — #KBK **[Nanobubbles technology in water purification](https://kbkgroup.in/nanobubbles-technology)** is developed by applying the shear resistance relationship between the interface of the object and the adjacent area. When gas is splitted into nanosize by the shear force generated at the interface of the object, dissolved gas is increased. Nano-sized bubble (gas) exists in water for a long time without degassing, and dissolved gas is maintained high for a long time.

@SempervivumFeb 26.2020 — #Recently I coded this menu for another member in this forum:

&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
 &lt;title&gt;Menu Navigation Test&lt;/title&gt;
 &lt;style&gt;
 ul {
 list-style-type: none;
 }
 
 <i>    </i>    nav&gt;ul {
 <i>    </i>        display: flex;
 <i>    </i>    }
 
 <i>    </i>    nav&gt;ul&gt;li {
 <i>    </i>        position: relative;
 <i>    </i>    }
 
 <i>    </i>    nav&gt;ul&gt;li&gt;ul {
 <i>    </i>        padding: 0;
 <i>    </i>        top: 100%;
 <i>    </i>        left: 0;
 <i>    </i>        position: absolute;
 <i>    </i>        display: none;
 <i>    </i>    }
 
 <i>    </i>    button.open+ul {
 <i>    </i>        display: block;
 <i>    </i>    }
 
 <i>    </i>    button::after {
 <i>    </i>        content: '25bc';
 <i>    </i>    }
 
 <i>    </i>    button.open::after {
 <i>    </i>        content: '25b2';
 <i>    </i>    }
 <i>    </i>&lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;header&gt;
 &lt;nav&gt;
 &lt;ul class="menu"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;
 &lt;!-- First Drop Down --&gt;
 &lt;button id="drop-1"&gt;About&lt;/button&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Departments&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 
 <i>    </i>            &lt;/li&gt;
 <i>    </i>            &lt;li&gt;
 <i>    </i>                &lt;!-- First Drop Down --&gt;
 <i>    </i>                &lt;button id="drop-2"&gt;Rooms&lt;/button&gt;
 <i>    </i>                &lt;ul&gt;
 <i>    </i>                    &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt;
 <i>    </i>                    &lt;li&gt;&lt;a href="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
 <i>    </i>                &lt;/ul&gt;
 <i>    </i>            &lt;/li&gt;
 <i>    </i>            &lt;li&gt;&lt;a href="#"&gt;Special Collections&lt;/a&gt;&lt;/li&gt;
 <i>    </i>            &lt;li&gt;&lt;a href="#"&gt;Giving&lt;/a&gt;&lt;/li&gt;
 <i>    </i>            &lt;li&gt;&lt;a href="#"&gt;More&lt;/a&gt;&lt;/li&gt;
 <i>    </i>        &lt;/ul&gt;
 <i>    </i>    &lt;/nav&gt;
 <i>    </i>&lt;/header&gt;
 <i>    </i>&lt;script&gt;
 <i>    </i>    const btns = document.querySelectorAll('nav button');
 <i>    </i>    for (let i = 0; i &lt; btns.length; i++) {
 <i>    </i>        btns[i].addEventListener('click', function () {
 <i>    </i>            this.classList.toggle('open');
 <i>    </i>            for (let j = 0; j &lt; btns.length; j++) if (btns[j] != this) btns[j].classList.remove('open');
 <i>    </i>        });
 <i>    </i>    }
 <i>    </i>&lt;/script&gt;
 
 &lt;/body&gt;
 
 
 &lt;/html&gt;

Check if it fits you needs. I focused on the open/close functions, not on design. Feel free to style it as you like.

Is jQuery still a valid and current library or is there something better now?[/quote]Yes it is but it's benefits are less than some years ago:

The extent of browser specific code has reduced significantly.

Additional features like classList, dataset, forEach etc. have been added.

Ajax can be done by fetch API which is more easy and clear.

Expanding and Closing menus

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Expanding and Closing menus

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴