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.

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: Css

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