Drop down menu (jQuery)

-

Drop down menu can be done without JavaScript, only with the help of CSS. With :hover. But the JavaScript menu has its advantages. The most important thing is the delay.

Consider a menu with one level of nesting. We will write the code using jQuery.

HTML

<ul class="nav">
    <li>
        <a href="#">Item 1</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 2</a>
        <ul>
            <li><a href="#">Subitemт</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 3</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
</ul>

JS

(() => {
    let itemMenu = $('ul.nav > li'),
        close,
        flag;
 
    function closeLinks(that){
        close = setTimeout(function(){
            $(that).find('ul').stop().fadeOut();
        }, 200); //set delay 200 ms
        flag = that;
    }
 
    itemMenu.on('mouseenter', function(){
        if(flag === this){
            clearTimeout(close);
        }
        $(this).find('ul').stop().fadeIn();
    });
 
    itemMenu.on('mouseleave', function(){
        closeLinks(this);
    });
})();

Nested menu items should be hidden using CSS

CSS

ul.nav li ul{
    display: none;
}

Comments

Post a Comment

Popular posts from this blog

Typical gulpfile.js

-
The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){
Read more

JavaScript Inheritance and Classes

-
In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre
Read more

Swipe events on touch devices

-
Every day sensory devices are being introduced into our lives. These devices have specific events, unlike the desktop. One of these events is the swipe . Especially often have to deal with it when developing a mobile version of the site. Code: (() => { let initialPoint; let finalPoint; document.addEventListener('touchstart', function(event) { initialPoint=event.changedTouches[0]; }, false); document.addEventListener('touchend', function(event) { finalPoint=event.changedTouches[0]; let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX); let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); if (xAbs > 20 || yAbs > 20) { if (xAbs > yAbs) { if (finalPoint.pageX < initialPoint.pageX){ // to left } else{ // to right } } else { if (final
Read more