Mẫu menu mà mình giới thiệu cho các bạn trong bài viết này với hiệu ứng được làm hoàn toàn bằng CSS3 transition. Qua đây, các bạn có thể áp dụng cho trang web hay blog của các bạn và cũng là một bài học quý giá cho những ai đang tìm hiểu về CSS3.

Xem Demo | Download

HTML

Khung chuẩn html cho mẫu menu này đơn giản như sau :

<nav class="ph-lift">
		<ul>
			<li class="active"><a href="#home" data-title="Home">Home</a></li>
			<li><a href="#portfolio" data-title="My works">My works</a></li>
			<li><a href="#about" data-title="Who am I?">Who am I?</a></li>
			<li><a href="#contact" data-title="Contact me">Contact me</a></li>
		<ul>
</nav>	

CSS

Ý tưởng hiệu ứng menu ở đây là cho các phần tử <li> ẩn với overflow:hidden. Khi người dùng trỏ chuột vào menu , thì hiệu ứng hover xuất hiện với việc chuyển màu background và hiệu ứng inner showdow được chuyển một cách mượt mà.

nav {
  min-width: 800px;
}

nav ul {
  position: relative; 
}

nav > ul:after {
  content: "";
  position: absolute;
  width: 50%;
  border-radius: 40%;
  height: 40px;
  bottom: 0;
  left: 20%;
  box-shadow: 0 0 10px rgba(28, 110, 126, 0.5);
  z-index: -1; 
}

nav > ul:hover:after {
  bottom: 5px; 
}

nav.ph-lift {
  text-align: center;
}
 
nav.ph-lift > ul {
    display: inline-block;
    position: relative;
}
    
nav.ph-lift > ul:after {
      box-shadow: 0 0 10px rgba(0, 128, 128, 0.5); 
}

nav.ph-lift ul li {
    float: left;
    height: 90px;
    line-height: 90px;
    background: white;
    overflow: hidden;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease; 
}
   
nav.ph-lift ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: teal; 
}
	
nav.ph-lift ul li a {
      display: block;
      text-decoration: none;
      color: #007e7e;
      padding: 0 45px;
      margin-top: 0;
      -webkit-transition: all.6s ease;
      -moz-transition: all.6s ease;
      -o-transition: all.6s ease;
      -ms-transition: all.6s ease;
      transition: all.6s ease; 
}
    
nav.ph-lift ul li:hover a {
      margin-top: -90px;
      color: white;
      text-shadow: 0 1px 2px  black; 
}
     
nav.ph-lift ul li a:after {
        content: attr(data-title);
        display: block; 
}

Mình hy vọng các bạn sẽ thích với mẫu menu mà mình giới thiệu trong bài viết này, mong là các bạn sẽ còn sáng tạo hơn nữa cho mẫu menu này, và đừng quên chia sẻ cho mọi người cùng tham khảo nhé.

Chuyên Mục: Css

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