Lập trình web

Hướng dẫn tạo Menu đơn giản với CSS & Jquery

Chia sẻ nhanh

Menu là một trong những yếu tố quyết định vẻ đẹp cũng như tính thân thiện trong cách sử dụng của một website. Ngày nay, với công nghệ mới cho phép lập trình viên có thể tạo ra những menu với nhiều hiệu ứng đẹp mắt. Tuy nhiên trong bài viết này, tôi xin hướng dẫn cách tạo một Menu đơn giản sử dụng css và jquery trong đó css là chủ yếu.



Bước 1: Tạo HTML

Đầu tiên chúng ta tạo một file html cơ bản có nội dung như sau

<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Horizontal Dropdown Navigation Bar Demo</title>
  <meta name="author" content="hiflyer">
  <link rel="stylesheet" type="text/css" media="all" href="/styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

Bạn có thể thấy trong HTML cơ bản này có file styles.css và jquery được load từ googleapis về. Mọi thứ đều hoàn toàn clear.
Chúng ta thêm nội dung của đoạn menu với tab <nav> của HTML5 (rất thuận tiện cho SEO)

<nav>
  <ul id="ddmenu">
    <li><a href="#">HIFLYER.VN</a></li>
    <li><a href="#">About</a>
	  <ul>
	    <li><a href="#">Our Mission</a></li>
	    <li><a href="#">The Team</a></li>
	    <li><a href="#">History</a></li>
	  </ul>
	</li>
	<li><a href="#">Products</a>
	  <ul>
	    <li><a href="#">Pre-Built Logos</a></li>
	    <li><a href="#">Web Templates</a></li>
	    <li><a href="#">Icon Sets</a></li>
	    <li><a href="#">jQuery Plugins</a></li>
	    <li><a href="#">Internet Marketing</a></li>
	  </ul>
	</li>
	<li><a href="#">International</a>
	  <ul>
	    <li><a href="#">China</a></li>
	    <li><a href="#">Japan</a></li>
	    <li><a href="#">Canada</a></li>
	    <li><a href="#">Australia</a></li>
	    <li><a href="#">South America</a></li>
	  </ul>
	</li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Bước 2: Tạo file styles.css

Phần cơ bản.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { background: #eaeaea url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; padding-bottom: 60px; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }


Phần cho menu

#ddmenu {
  display: block;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  padding: 0 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
  cursor: pointer;
  outline: none;
  font-weight: bold;
  color: #8aa8bd;
}

#ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; }

#ddmenu li a {
  display: block;
  float: left;
  padding: 0 12px;
  line-height: 78px;
  font-weight: bold;
  text-decoration: none;
  color: #6c87c0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#ddmenu li:hover > a { color: #7180a0; background: #d9e2ee; }

#ddmenu ul {
  position: absolute;
  top: 88px;
  width: 130px;
  background: #fff;
  display: none;
  margin: 0;
  padding: 7px 0;
  list-style: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

Thêm mỗi tên khi Menu item được active

#ddmenu {
  display: block;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  padding: 0 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
  cursor: pointer;
  outline: none;
  font-weight: bold;
  color: #8aa8bd;
}

#ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; }

#ddmenu li a {
  display: block;
  float: left;
  padding: 0 12px;
  line-height: 78px;
  font-weight: bold;
  text-decoration: none;
  color: #6c87c0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#ddmenu li:hover > a { color: #7180a0; background: #d9e2ee; }

#ddmenu ul {
  position: absolute;
  top: 88px;
  width: 130px;
  background: #fff;
  display: none;
  margin: 0;
  padding: 7px 0;
  list-style: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

Bước 3: Thêm nội dung tương tác với Javascript

<script type="text/javascript">
$(document).ready(function(){
  $('a').on('click', function(e){
    e.preventDefault();
  });
    
  $('#ddmenu li').hover(function () {
     clearTimeout($.data(this,'timer'));
     $('ul',this).stop(true,true).slideDown(200);
  }, function () {
    $.data(this,'timer', setTimeout($.proxy(function() {
      $('ul',this).stop(true,true).slideUp(200);
    }, this), 100));
  });

});
</script>


Vậy là các bạn đã hoàn tất quá trình tạo một menu đơn giản từ css với jquery. Các bạn có thể xem demo hoặc tải source code tại đây

DEMOSOURCE CODE



Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?