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

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