Bài viết của tôi

Các bài viết về công nghệ, coder,... từ kinh nghiệm thực tế.
  • Tất cả
  • android (1)
  • blogspot (22)
  • code (30)
  • download (8)
  • Error (1)
  • Javascript (2)
  • kiến thức (2)
  • phần cứng (3)
  • phần mềm (5)
  • seo (13)
  • tài liệu (1)
  • thủ thuật (12)
  • tiện ích (1)
Tạo DropDown Menu Mega đơn giản

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

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");
        });
});

Đăng nhận xét

Đọc nhiều nhất

Bài viết mới hơn