Modern Menu với hiệu ứng hover đẹp mắt cho Blogger/Blogspot

Modern Menu with nice hover effects for Blogger/Blogspot

Một menu với metro style bắng jQuery. Thích hợp cho ai thích phong cách Modern UI của Windows 8.

• DEMO

Modern Menu với hiệu ứng hover đẹp mắt cho Blogger/Blogspot

Bước 1: Chèn đoạn CSS sau trước thẻ ]]></b:skin>

 .sti-menu{
width:1010px;
position:relative;
margin:60px auto 0 auto;
}
.sti-menu li{
float:left;
width:200px;
height:300px;
margin:1px;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
-moz-box-shadow:1px 1px 2px #ddd;
-webkit-box-shadow:1px 1px 2px #ddd;
box-shadow:1px 1px 2px #ddd;
}
.sti-menu li a h2{
color:#000;
font-family: 'Wire One', arial, serif; 
font-size:42px;
font-weight:bold;
text-transform:uppercase;
position:absolute;
padding:10px;
width:180px;
top:140px;
left:0px;
text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif; 
font-size:18px;
font-style:italic;
color: #111;
position:absolute;
top:248px;
left:0px;
width:180px;
padding:10px;
}
.sti-icon{
width:100px;
height:100px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
background-color:transparent;
left:50px;
top:30px;
}
.sti-icon-care{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/care.png);
}
.sti-icon-alternative{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/alternative.png);
}
.sti-icon-family{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/family.png);
}
.sti-icon-info{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/info.png);
}
.sti-icon-technology{
background-image:url(http://tympanus.net/Tutorials/AnimatedTextIconMenu/images/technology.png);
} 

Bước 2: Chèn các jQuery dưới đây trước thẻ </body>

 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> 
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/AnimatedTextIconMenu/js/jquery.iconmenu.js"></script>
<script type="text/javascript">
$(function() {
$('#sti-menu').iconmenu();
});
</script> 

Bước 3: Chèn HTML sau vào vị trí mà bạn muốn menu hiển thị

 <ul id="sti-menu" class="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="#">
<h2 data-type="mText" class="sti-item">Advanced Patient Care</h2>
<h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
</a>
</li>
<li data-hovercolor="#ff395e">
<a href="#">
<h2 data-type="mText" class="sti-item">Alternative Medicine</h2>
<h3 data-type="sText" class="sti-item">Holistic approaches</h3>
<span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
</a>
</li>
<li data-hovercolor="#57e676">
<a href="#">
<h2 data-type="mText" class="sti-item">Modern Info Center</h2>
<h3 data-type="sText" class="sti-item">Educating you</h3>
<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
</a>
</li>
<li data-hovercolor="#d869b2">
<a href="#">
<h2 data-type="mText" class="sti-item">Future Family Planning</h2>
<h3 data-type="sText" class="sti-item">For a healthier future</h3>
<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
</a>
</li>
<li data-hovercolor="#ffdd3f">
<a href="#">
<h2 data-type="mText" class="sti-item">Advanced Technology</h2>
<h3 data-type="sText" class="sti-item">From the latest research</h3>
<span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span>
</a>
</li>
</ul> 

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by tympanus/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm