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

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");
        });
});
Bài trước
Bài sau

Thíchcode.NET - Mang lại giải pháp cho coder. Nếu các bạn có gì khó khăn trong lập trình thì liên hệ chúng tôi (FanFace). Chúng tôi sẽ hỗ trợ miễn phí cho các bạn.

0 comments:


Hỗ trợ