Dễ dàng tạo Context Menu với jQuery và CSS

12/06/2017

Context Menu là loại menu mà chúng ta thường thấy ở các ứng dụng mỗi khi chúng ta nhập chuột phải. Để tạo menu loại này thì không khó chút nào, có thể nói là dễ nữa là đằng khác. Trong bài viết này, mình sẽ bày cho các bạn cách tạo ra menu này.

Dễ dàng tạo Context Menu với jQuery và CSS

Xem Demo | Download

HTML

Trước hết là chúng ta xây dựng khung chuẩn html cho menu này như sau:

<ul class="contextMenu" hidden>
  <li><a href="#"><i class="fa fa-home"></i> Homepage</a></li>
  <li><a href="#"><i class="fa fa-sitemap"></i> Sitemap</a></li>
  <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
  <li>
      <a class="fa fa-facebook" href="#"></a>
      <a class="fa fa-twitter" href="#"></a>
      <a class="fa fa-google-plus" href="#"></a>
      <a class="fa fa-linkedin" href="#"></a>
  </li>
</ul>

CSS

Và chúng ta sẽ định dạng menu theo đoạn css bên dưới :

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext);
body {
  background-color: #ffc107;
}

h1{
    text-align:center;
}

ul.contextMenu{
  list-style:none; 
  margin:0;padding:0;
  font: 300 15px 'Roboto', sans-serif;
  position: absolute;
  color: #333;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
}

ul.contextMenu *{
    transition:color .4s, background .4s;
}

ul.contextMenu li{
  min-width:150px;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 15px;
  background-color: #fff;
  border-bottom:1px solid #ecf0f1;
}

ul.contextMenu li a{
  color:#333;
  text-decoration:none;
}

ul.contextMenu li:hover{
  background-color: #ecf0f1;
}

ul.contextMenu li:first-child{
  border-radius: 5px 5px 0 0;
}

ul.contextMenu li:last-child{
  background:#ecf0f1;
  border-bottom:0;
  border-radius: 0 0 5px 5px
}

ul.contextMenu li:last-child a{width:26%;}
ul.contextMenu li:last-child:hover a{color:#2c3e50}
ul.contextMenu li:last-child:hover a:hover{color:#2980b9}

jQuery

Để người dùng có thể nhấp chuột phải làm xuất hiện menu, thì cần đoạn script này.

<script src="jquery.min.js"></script>
<script type="text/javascript">
  $(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $("ul.contextMenu")
        .show()
        .css({top: event.pageY + 15, left: event.pageX + 10});
});
$(document).click(function() {
  isHovered = $("ul.contextMenu").is(":hover");
  if (isHovered == false){
    $("ul.contextMenu").fadeOut("fast");
  }
});
</script>   

Mình mong là loại menu này sẽ tăng thêm kinh nghiệm cũng như khả năng sử dụng thành thạo javascript của các bạn.

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

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !