Menu chuẩn cho mobile và máy tính bảng với CSS3 & jQuery

Nếu các bạn đang gặp vấn đề về thiết kế menu dành cho các giao diện chạy trên mobile hay tablet thì không nên bỏ qua bài viết này. Hôm nay mình sẽ chia sẻ cho các bạn một mẫu menu đơn giản nhưng rất hiệu nghiệm và được sử dụng rộng rãi ở nhiều website hiện nay. Menu này được xây dựng từ CSS và một jQuery plugin có dung lượng rất nhẹ, plugin này hỗ trợ tốt cho các khi dùng tay chạm vào menu trên các thiết bị di động và máy tính bảng.
Các bạn có thể xem demo bên dưới đây, để hiểu rõ nhất thì các bạn nên thử nó bằng điện thoại hoặc máy tính bảng mà các bạn đang sử dụng.

Xem Demo | Download

HTML

Để tạo menu, trước hết chúng ta cần xây dựng theo khung chuẩn html như sau:

<nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">Show navigation</a>
    <a href="#" title="Hide navigation">Hide navigation</a>
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a href="/" aria-haspopup="true">Blog</a>
            <ul>
                <li><a href="/">Design</a></li>
                <li><a href="/">HTML</a></li>
                <li><a href="/">CSS</a></li>
                <li><a href="/">JavaScript</a></li>
            </ul>
        </li>
        <li>
            <a href="/" aria-haspopup="true">Work</a>
            <ul>
                <li><a href="/">Web Design</a></li>
                <li><a href="/">Typography</a></li>
                <li><a href="/">Front-End</a></li>
            </ul>
        </li>
        <li><a href="/">About</a></li>
    </ul>
</nav>

CSS

Sau đó các bạn định dạng menu với đoạn css sau :

#nav
{
	awidth: 60em; /* 1000 */
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	position: absolute;
	top: 25%;
	left: 50%;
	margin-left: -30em; /* 30 480 */
}

#nav > a
{
	display: none;
}

#nav li
{
	position: relative;
    list-style: none;
}

#nav li a
{
	color: #fff;
	display: block;
}

#nav li a:active
{
	background-color: #c00 !important;
}

#nav span:after
{
	awidth: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #efa585;
	content: ';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
}

/* first level */

#nav > ul
{
	height: 3.75em; /* 60 */
	background-color: #e15a1f;
                
}

#nav > ul > li
{
  awidth: 25%;
  height: 100%;
  float: left;
  list-style:none;
}

#nav > ul > li > a
{
  height: 100%;
  font-size: 1.5em; /* 24 */
  line-height: 2.5em; /* 60 (24) */
  text-align: center;
}
						
#nav > ul > li:not( :last-child ) > a
{
 border-right: 1px solid #cc470d;
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
	background-color: #cc470d;
}


/* second level */

#nav li ul
{
	background-color: #cc470d;
	display: none;
	position: absolute;
	top: 100%;
    padding:0;
    margin:0;
}

#nav li:hover ul
{
	display: block;
	left: 0;
	right: 0;
}
						
#nav li:not( :first-child ):hover ul
{
	left: -1px;
}
						
#nav li ul a
{
	font-size: 1.25em; /* 20 */
	border-top: 1px solid #e15a1f;
	padding: 0.75em; /* 15 (20) */
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
	background-color: #e15a1f;
}

Tiếp theo là định dạng riêng cho các thiết bị di động.

@media only screen and ( max-awidth: 62.5em ) /* 1000 */
{
	#nav
	{
	  awidth: 100%;
      position: static;
      margin: 0;
	}
}

@media only screen and ( max-awidth: 40em ) /* 640 */
{
	html
	{
		font-size: 75%; /* 12 */
	}

#nav
	{
		position: relative;
		top: auto;
		left: auto;
	}
    
#nav > a
{
		awidth: 3.125em; /* 50 */
		height: 3.125em; /* 50 */
		text-align: left;
		text-indent: -9999px;
		background-color: #e15a1f;
		position: relative;
}
					
#nav > a:before,
#nav > a:after
{
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: ';
}
    
#nav > a:after
{
	top: 60%;
}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
	display: block;
}


/* first level */
#nav > ul
{
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}
    
#nav:target > ul
{
	display: block;
}
    
#nav > ul > li
{
	awidth: 100%;
	float: none;
}
				
#nav > ul > li > a
{
	height: auto;
	text-align: left;
	padding: 0 0.833em; /* 20 (24) */
}
						
#nav > ul > li:not( :last-child ) > a
{
	border-right: none;
	border-bottom: 1px solid #cc470d;
}

/* second level */
#nav li ul
{
	position: static;
	padding: 1.25em; /* 20 */
	padding-top: 0;
                    
}
    
}

jQuery

Ở phần này , sau khi chèn thư viện jQuery và Plugin xong, các bạn chỉ việc khai báo đơn giản như sau :

<script src="js/jquery.min.js"></script>
<script src="js/doubletaptogo.js"></script>
<script>
	$( function()
	{
		$( '#nav li:has(ul)' ).doubleTapToGo();
	});
</script>

Thế là xong, bây giờ các bạn chỉ cần xem kỹ lại từng đoạn code để có thể hiểu rõ được cách hoạt động của menu này.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster