Init HTML

Bài viết sử dụng Bootstrap 3 và jQuery 1.12.4 để demo.

Xem demo Tải về

HTML

Dưới đây là một Navbar cơ bản của Bootstrap.

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Init HTML</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li class="menu-item-has-children"> <!-- Class này sẽ được WordPress tự động thêm nếu có Sub Menu -->
                    <a href="#">Dropdown <span class="caret"></span></a>
                    <ul class="sub-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Mình sử dụng class menu-item-has-children để làm dấu hiệu nhận biết vị trí nào có Sub Menu, vì class này sẽ được WordPress tự động thêm khi bạn chỉnh sửa thêm Sub Menu ở Menu trong Dashboard.

CSS

Mặc định ở máy tính và các thiết bị có màn hình lớn, Sub Menu sẽ được ẩn đi, và với màn hình nhỏ thì Sub Menu sẽ hiện ra trong Menu Collapse.

.sub-menu {
	position: absolute;
	z-index: 99999;
	background: #fff;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 280px;
	max-width: 280px;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
	display: none
}

.sub-menu:after {
	bottom: 100%;
	left: 10%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-bottom-color: #fff;
	border-width: 8px;
	margin-left: -8px
}

.sub-menu li a {
	padding: 10px 15px;
	display: block
}

@media (max-width:767px) {
	.navbar-fixed-top .navbar-collapse.in {
		margin-bottom: 15px
	}

	.sub-menu {
		display: block;
		position: initial;
		padding-left: 15px;
		background: 0 0;
		box-shadow: none
	}

	.sub-menu:after {
		display: none
	}
}

jQuery

Với màn hình có kích thước lớn hơn hoặc bằng 768px thì khi rê chuột vào vị trí nào có Sub Menu sẽ hiện Sub Menu ra.

$(document).ready(function() {
    if (screen && screen.width >= 768) {
        $('.menu-item-has-children').mouseenter(function() {
            $(this).find('.sub-menu').css('display', 'block');
        }).mouseleave(function() {
            $(this).find('.sub-menu').css('display', 'none');
        });
    }
});

Các bạn có thể tự CSS thêm cho Sub Menu thêm sinh động. Chúc các bạn thành công!