ThichCode.NET: Create simple DropDown Menu Mega with css and jquery ThichCode.NET: Create simple DropDown Menu Mega with css and jquery
ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.
Create simple DropDown Menu Mega with css and jquery

Create simple DropDown Menu Mega with css and jquery

Create simple DropDown Menu Mega with css and jquery

Tạo DropDown Menu Mega đơn giản


DEMO

Code HTML:

<header class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!-- Mobile toggle button -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <!-- Logo -->
            <a class="brand" href="#"><b>LOGO</b></a>

            <!-- Navigation -->
            <nav class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#top">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu <b class="caret"></b></a>
                        <ul class="dropdown-menu mega-menu">
                            <li class="mega-menu-column">
                                <ul>
                                    <li class="nav-header">Mega menu 1</li>
                                    <img src="http://placehold.it/150x120">
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                </ul>
                            </li>

                            <li class="mega-menu-column">
                                <ul>
                                    <li class="nav-header">Mega menu 2</li>
                                    <img src="http://placehold.it/150x120">
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                </ul>
                            </li>

                            <li class="mega-menu-column">
                                <ul>
                                    <li class="nav-header">Mega menu 3</li>
                                    <img src="http://placehold.it/150x120">
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                    <li><a href="#">Mega-menu link</a></li>
                                </ul>
                            </li>
                        </ul>

                        <!-- dropdown-menu -->

                    </li>

                    <!-- /.dropdown -->
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#pricing">Our Pricing</a></li>
                    <li><a href="#team">Our Team</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>

                <!-- /.nav -->
            </nav>
            <!--/.nav-collapse -->
        </div>
        <!-- /.container -->
    </div>
    <!-- /.nav-inner -->
</header>

Code CSS:

/* page style */
a, a: focus, a: active, a: hover, object, embed {
    outline: none;text - decoration: none;
}: -moz - any - link: focus {
    outline: none;
}
input::-moz - focus - inner {
    border: 0;
}: focus {
    outline: 0;
}
body {
    background: #333; } 
.brand { padding: 10px 40px !important; }
.navbar { border-bottom: 4px solid # 888;
}



/* MEGA MENU STYLE
 ********************************/
.mega - menu {
    padding: 10 px 0 px!important;
    width: 540 px;
    border - radius: 0;
    margin - top: 0 px;
}

.mega - menu li {
    display: inline - block;
    float: left;
    font - size: 0.94 rem;
    padding: 3 px 0 px;
}

.mega - menu li.mega - menu - column {
    margin - right: 20 px;
    width: 150 px;
}

.mega - menu.nav - header {
        padding: 0!important;
        margin - bottom: 10 px;
        display: inline - block;
        width: 100 % ;
        border - bottom: 1 px solid# ddd;
    }
    .mega - menu img {
        padding - bottom: 10 px;
    }




/* Disable Toggle style
 ********************************/

/* Dropdown Toggle on style */
.navbar.nav li.dropdown.open > .dropdown - toggle,
    .navbar.nav li.dropdown.active > .dropdown - toggle,
    .navbar.nav li.dropdown.open.active > .dropdown - toggle {
        background: inherit; /* Set to inherit when using mouse hover to open dropdown */
        color: inherit;
    }
    /* Toggle off style */
    .navbar.nav li.dropdown.open.active > .dropdown - toggle,
    .navbar.nav > li.dropdown > a: focus {
        background: inherit;
        color: inherit;
    }
    /* Toggle hover */
    .navbar.nav li.dropdown > .dropdown - toggle: hover,
    .navbar.nav li.dropdown.open > .dropdown - toggle: hover {
        background - color: #DDDDDD;
    }


/* Toggle caret*/
.navbar.nav li.dropdown > .dropdown - toggle.caret {
        border - bottom - color: ;
        border - top - color: ;
    }
    /* Toggle caret hover */
    .navbar.nav li.dropdown > a: hover.caret,
    .navbar.nav li.dropdown > a: focus.caret {
        border - bottom - color: #333;
        border-top-color: # 333;
    }
    /* Toggle caret active */
    .navbar.nav li.dropdown.open > .dropdown - toggle.caret,
    .navbar.nav li.dropdown.active > .dropdown - toggle.caret,
    .navbar.nav li.dropdown.open.active > .dropdown - toggle.caret {
        border - bottom - color: #333;
        border-top-color: # 333;
    }



/* Hover style
 ********************************/
.navbar.nav > li > a, .mega - menu a {
    -webkit - transition: all 200 ms ease; - moz - transition: all 200 ms ease; - ms - transition: all 200 ms ease; - o - transition: all 200 ms ease;
    transition: all 200 ms ease;

    /* -webkit-transform: translate3d(0, 0, 0); Webkit Hardware Acceleration*/
    - webkit - backface - visibility: hidden; /* Safari Flicker Fix #2 */ - webkit - transform: translateZ(0);
}


Code Javascript:

// Dropdown Menu Fade    
jQuery(document).ready(function() {
    $(".dropdown").hover(
        function() {
            $('.dropdown-menu', this).fadeIn("fast");
        },
        function() {
            $('.dropdown-menu', this).fadeOut("fast");
        });
});
This article helps ?
If this article does not address your issue, leave a comment below

Post a Comment

Most read

Latest