Hướng dẫn tạo Menu xổ bằng Jquery đơn giãn

Xin chào các bạn cũng khá là lâu rồi mình cũng không code một ti nào hismiley Hôm nay tự nhiên thấy có cảm giác lại đành làm một bài viết hi để chia sẽ nhưng kiến thức tìm tồi được đễ chia sẽ với mấy bạn.

Hôm này mình xin chia sẽ và chỉ các bạn tạo một menu xỗ đơn giãn có sự kết hợp của Jquery sẽ làm cho menu thấy mượt hơn hi. Thì mấy bạn cũng biết để sử dụng được Jquery thì chúng ta phải include thư viện jquery vào nhé.

Đầu tiên mình sẽ tạo một file menu-xo.html trong file này mình sẽ include thư viện jquery vào và code css và html trên file này luôn nhé.

các bạn làm theo mình nghe.

Code Css

<style>
		*{margin:0px;padding:0px;}

        div.list-menu{width: 250px;margin-left: 200px;margin-top: 50px;}

        div.list-menu-parent{width: 250px;}

        .list-menu-parent ul{width: 250px;background: rgba(0, 145, 234, 1)}

        .list-menu-parent ul li{width: 250px;
        	text-align: center;list-style: none;
        	border-bottom:1px solid rgba(225,225,225,0.2);
        	
        	box-sizing: border-box;}
        .list-menu-parent ul li:last-child{
          	border: none;
          }

        .list-menu-parent ul li a{text-decoration: none;font-weight: bold;font-size: 0.8em;font-family: sans-serif;color: #fff;padding:10px 0px;display: block;}

        .list-menu-parent ul li ul{width: 250px;background: rgba(0,0,0,0.5);display: none;}

        .list-menu-parent ul li ul li{width: 250px;
        	opacity: 0.8px;border-bottom:1px solid rgba(225,225,225,0.2);}
        .list-menu-parent ul li ul li a{
        	padding:10px 0px;display: block;
        }

        .list-menu-parent ul li{cursor: pointer;}
        .list-menu-parent ul li ul li:last-child{
        	border: none;
        }

	</style>

Code HTML

<div class="list-menu">
        <div class="list-menu-parent">    
            <ul class="menu">
                <li class="list-1"><a href="#">THỜI TRANG NAM</a>
                    <ul>
                        <li><a href="#">Áo Len-Áo Thung</a></li>
                        <li><a href="#">Giày Thể Thao</a></li>
                        <li><a href="#">Balo-Túi Xách</a></li>
                        <li><a href="#">Quần Tây-Quần Jean</a></li>
                    </ul>
                </li>
                <li class="list-2"><a href="#">THỜI TRANG NỮ</a>
                    <ul>
                        <li><a href="#">Áo Len-Áo Thung</a></li>
                        <li><a href="#">Giày Thể Thao</a></li>
                        <li><a href="#">Balo-Túi Xách</a></li>
                        <li><a href="#">Quần Tây-Quần Jean</a></li>
                    </ul>
                </li>
                <li class="list-3"><a href="#">THỜI TRANG TRẼ EM</a>
                    <ul>
                        <li><a href="#">Giày Dép</a></li>
                        <li><a href="#">Áo Thung</a></li>
                        <li><a href="#">Quần Dài</a></li>
                    </ul>
                </li>
                <li class="list-4"><a href="#">THỜI TRANG KHÁC</a>
                    <ul>
                        <li><a href="#">Thắt Lưng</a></li>
                        <li><a href="#">Mắt Kính</a></li>
                        <li><a href="#">Trang Sức</a></li>
                        <li><a href="#">Vali</a></li>
                    </ul>

                </li>

            </ul>

        </div>

    </div>

Code Jquery

<script>
	$(document).ready(function(){
        $("ul.menu li").hover(function(){
                    var bien=$(this).attr('class');
                    $('ul.menu li.'+bien+" ul").slideDown(1000);

        },function(){
                    var bien=$(this).attr('class');
                    $('ul.menu li.'+bien+" ul").slideUp(1000);

        });       
    });
	</script>

 

Còn đây là toàn bộ code nhé các bạn

Full code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta https-equiv="X-UA-Compatible" content="IE=edge">
	<title>HƯỚNG DẪN TẠO MENU XỔ BẰNG JQUERY</title>
	<script src="jquery.min.js" type="text/javascript" ></script>
	<style>
		*{margin:0px;padding:0px;}

        div.list-menu{width: 250px;margin-left: 200px;margin-top: 50px;}

        div.list-menu-parent{width: 250px;}

        .list-menu-parent ul{width: 250px;background: rgba(0, 145, 234, 1)}

        .list-menu-parent ul li{width: 250px;
        	text-align: center;list-style: none;
        	border-bottom:1px solid rgba(225,225,225,0.2);
        	
        	box-sizing: border-box;}
        .list-menu-parent ul li:last-child{
          	border: none;
          }

        .list-menu-parent ul li a{text-decoration: none;font-weight: bold;font-size: 0.8em;font-family: sans-serif;color: #fff;padding:10px 0px;display: block;}

        .list-menu-parent ul li ul{width: 250px;background: rgba(0,0,0,0.5);display: none;}

        .list-menu-parent ul li ul li{width: 250px;
        	opacity: 0.8px;border-bottom:1px solid rgba(225,225,225,0.2);}
        .list-menu-parent ul li ul li a{
        	padding:10px 0px;display: block;
        }

        .list-menu-parent ul li{cursor: pointer;}
        .list-menu-parent ul li ul li:last-child{
        	border: none;
        }

	</style>
	<script>
	$(document).ready(function(){
        $("ul.menu li").hover(function(){
                    var bien=$(this).attr('class');
                    $('ul.menu li.'+bien+" ul").slideDown(1000);

        },function(){
                    var bien=$(this).attr('class');
                    $('ul.menu li.'+bien+" ul").slideUp(1000);

        });       
    });
	</script>
</head>
<body>
	<div class="list-menu">
        <div class="list-menu-parent">    
            <ul class="menu">
                <li class="list-1"><a href="#">THỜI TRANG NAM</a>
                    <ul>
                        <li><a href="#">Áo Len-Áo Thung</a></li>
                        <li><a href="#">Giày Thể Thao</a></li>
                        <li><a href="#">Balo-Túi Xách</a></li>
                        <li><a href="#">Quần Tây-Quần Jean</a></li>
                    </ul>
                </li>
                <li class="list-2"><a href="#">THỜI TRANG NỮ</a>
                    <ul>
                        <li><a href="#">Áo Len-Áo Thung</a></li>
                        <li><a href="#">Giày Thể Thao</a></li>
                        <li><a href="#">Balo-Túi Xách</a></li>
                        <li><a href="#">Quần Tây-Quần Jean</a></li>
                    </ul>
                </li>
                <li class="list-3"><a href="#">THỜI TRANG TRẼ EM</a>
                    <ul>
                        <li><a href="#">Giày Dép</a></li>
                        <li><a href="#">Áo Thung</a></li>
                        <li><a href="#">Quần Dài</a></li>
                    </ul>
                </li>
                <li class="list-4"><a href="#">THỜI TRANG KHÁC</a>
                    <ul>
                        <li><a href="#">Thắt Lưng</a></li>
                        <li><a href="#">Mắt Kính</a></li>
                        <li><a href="#">Trang Sức</a></li>
                        <li><a href="#">Vali</a></li>
                    </ul>

                </li>

            </ul>

        </div>

    </div>
</body>
</html>

Các bạn nhớ là phải thêm thư viện Jquery vào nhé mới chạy đươc nhe! Chúc các bạn thành công

Bài Viết Liên Quan

x

Xin chào! Hãy ủng hộ chúng tôi bằng cách nhấp vào quảng cáo trên trang web. Việc này giúp chúng tôi có kinh phí để duy trì và phát triển website ngày một tốt hơn. (Hello! Please support us by clicking on the ads on this site. Your clicks provide us with the funds needed to maintain and improve the website continuously.)

Ngoài ra, hãy đăng ký kênh YouTube của chúng tôi để không bỏ lỡ những nội dung hữu ích! (Also, subscribe to our YouTube channel to stay updated with valuable content!)

Đăng Ký