Tự tạo Dropdown Menu với CSS và jQuery sử dụng được cho WordPress

15/12/2020 0 bình luận 14 lượt xem

Nếu bạn đang muốn tự làm cho mình một Dropdown Menu nhưng không muốn sử dụng thư viện của bên thứ 3 vì khó tương thích với WordPress hoặc khó cấu hình, tải quá nặng v.v… Bài viết này xẽ hướng dẫn bạn tự tạo cho mình một Dropdown Menu cực đơn giản và thực dụng.

Tự tạo Dropdown Menu với CSS và jQuery sử dụng được cho WordPress

Mục lục

HTML
CSS
jQuery

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