Slide menu responsive CSS jQuery

· · · ·

 

Menu website

Menu website là trung tâm điều hướng quan trọng. Menu website giúp người dùng định hình được website của bạn gồm những danh mục chính nào góp phần giúp cho người dùng có quyết định lựa chọn tiếp tục ở lại web của bạn.

Slide menu css jquery

Code HTML template menu


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Menu</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
	<header>
		<h1>Header</h1>
		<span class="close">Open</span>
	</header>
	<nav>
		<span class="close">Close</span>
		<ul>
			<li>Menu1</li>
			<li>Menu1</li>
			<li>Menu1</li>
			<li>Menu1</li>
			<li>Menu1</li>
			<li>Menu1</li>
		</ul>
	</nav>
	<main>
		<h1>Home</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</main>
	<footer>Footer</footer>
	<script>
		$(document).ready(function(){
			$(".close").click(function(){
				$("nav").toggleClass('active');
			});
		});
	</script>
</body>
</html>

Code SCSS menu responsive


@media all and (min-width: 0)
{
	*{
		margin: 0;
		padding: 0;
	}
	header{
		background-color: gray;
		height: 100px;
		position: sticky;
		top: 0;
	}
	nav{
		width: 300px;
		height: 100%;
		background-color: #FFF;
		position: fixed;
		top: 0;
		left: -100%;
		transition: all 0.5s;
		&.active{
			left: 0;
			transition: all 0.5s;
		}
		ul{
			list-style: none;
			li{
				border-bottom: 1px solid red;
				padding: 10px;
			}
		}
	}
	footer{
		height: 100px;
		background-color: gray;
	}
}
@media all and (min-width: 521px)
{
	body{
		width: 520px;
		margin: auto;
	}
	nav{
		&.active{
			left: 50%;
			margin-left: -260px;
		}
	}
}
@media all and (min-width: 1200px)
{
	body{
		width: 100%;
	}
	header{
		position: relative;
		span{
			display: none;
		}
	}
	nav{
		position: relative;
		top: inherit;
		left: inherit;
		width: 100%;
		display: flex;
		justify-content: center;
		span{
			display: none;
		}
		ul{
			display: flex;
		}
	}
}
By at

No comments:

Post a Comment