jQuery Gooey Menu là 1 dạng menu sử dụng "lava lamp" phổ biến có hiệu lực để tạo ra các menu CSS với một hiệu ứng nền chuyển động dính. Bất cứ khi nào di chuyển chuột trên một mục trình đơn, phong cách mong muốn cho biết các mục menu được chọn sau chuột đến hạng mục đó, suốt làm nổi bật các mục hiện đang hoạt động. Mỗi menu đơn giản chỉ là một danh sách UL tiêu chuẩn và rất dễ dàng để tùy chỉnh, bao gồm cả bản thân hiệu quả dính.
- Đối với dạng Menu này, itviet360 giới thiệu cho các bạn thực hiện trên Blogger. Web thì các bạn làm tương tự không khác gì ^^
DEMO: DEMO Gooey Menu
CODE (các bạn chú ý đây là phần Code chung và cách làm trên cả Blogger và Web. Ở phần dưới bài viết mình sẽ hướng dẫn các bạn thực hiện chi tiết trên blogger)
CODE 1: - Đặt code này ngay trước thẻ đóng </head>
CODE 2: - Code CSS này có thể đặt trước thẻ </head> hoặc ngay sau thẻ <body>
CODE 3: Code HTML này đặt vào vị trí mà các bạn muốn hiển thị dạng menu này. Ở DEMO mình có 4 menu, nên các bạn sẽ chọn 1 trong 4 code HTML dưới đây (theo thứ tự lần lượt như trên hình hoặc DEMO trực tiếp nhé)
CODE 3.1
CODE 3.2
CODE 3.3
CODE 3.4
- Hướng dẫn trên blogger. Thêm trực tiếp vào template
Sao chép Code 1 và 2 đặt trước thẻ </head>
Ví dụ thêm menu này ở dưới vị trí header (giống như menu của mình đặt ở dưới vị trí header), tìm tới đoạn code:
Chọn CODE 3.1 hoặc 3.2 . 3.3 3.4 dán dưới code ở trên
- Lưu temPlate lại và xem kết quả
- Đối với dạng Menu này, itviet360 giới thiệu cho các bạn thực hiện trên Blogger. Web thì các bạn làm tương tự không khác gì ^^
DEMO: DEMO Gooey Menu
CODE 1: - Đặt code này ngay trước thẻ đóng </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://itviet360.googlecode.com/files/gooeymenu.js">
/* Huong dan: http://itviet360.com */
</script>
CODE 2: - Code CSS này có thể đặt trước thẻ </head> hoặc ngay sau thẻ <body>
<style>
hr{
margin:50px 0;
color:#eee;
}
ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}
ul.gelbuttonmenu{
position:relative;
padding: 0;
margin: 0;
margin-bottom:1em;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.gelbuttonmenu li{
display: inline;
}
ul.gelbuttonmenu li a{
color: black;
font-weight:bold;
padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}
ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
background:lightblue;
background:url(http://4.bp.blogspot.com/-pSN8MQyFlbM/UP0RwG2y4II/AAAAAAAAHSk/3Cyjzuh6AGA/s1600/gelbuttonleft.gif) top left no-repeat, url(http://3.bp.blogspot.com/-TPFxW8GdxQI/UP0RwBe0IKI/AAAAAAAAHSo/lTYEC2ZEVQs/s1600/gelbuttonright.gif) top right no-repeat, url(http://4.bp.blogspot.com/-B1TeQohfIkk/UP0RwN3jX9I/AAAAAAAAHSg/s4PhhoU5bRg/s1600/gelbuttoncenter.gif) top center repeat-x;
}
ul.solidblockmenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.solidblockmenu li{
display: inline;
}
ul.solidblockmenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}
ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius:4px;
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
background:#d7ed93;
background: -moz-linear-gradient(top, #d7ed93, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
background: linear-gradient(top, #d7ed93, #fff);
}
/* ######### Thick Underline Menu CSS ######### */
ul.underlinemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.underlinemenu li{
display: inline;
}
ul.underlinemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 8px;
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}
ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border-bottom:5px solid navy;
}
/* ######### Frame Menu CSS ######### */
ul.framemenu{
margin: 0;
margin-bottom:1em;
padding: 0;
list-style: none;
position:relative;
text-align: center; //set value to "left", "center", or "right"*/
}
ul.framemenu li{
display: inline;
}
ul.framemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 12px 10px 5px 18px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
}
ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid orange;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}
</style>
CODE 3: Code HTML này đặt vào vị trí mà các bạn muốn hiển thị dạng menu này. Ở DEMO mình có 4 menu, nên các bạn sẽ chọn 1 trong 4 code HTML dưới đây (theo thứ tự lần lượt như trên hình hoặc DEMO trực tiếp nhé)
CODE 3.1
<ul id="gooeymenu1" class="gelbuttonmenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/" class="selected">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>
CODE 3.2
<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>
CODE 3.3
<ul id="gooeymenu3" class="underlinemenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu3', fxtime:250})
</script>
CODE 3.4
<ul id="gooeymenu4" class="framemenu">
<li><a href="http://www.itviet360.com/">Trang chủ</a></li>
<li><a href="http://www.itviet360.com/">Thủ thuật Blogger</a></li>
<li><a href="http://www.itviet360.com/">Download</a></li>
<li><a href="http://www.itviet360.com/">Tự học SEO</a></li>
<li><a href="http://www.itviet360.com/" class="selected">Cuộc sống</a></li>
<li><a href="http://www.itviet360.com/">Thư giãn</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu4', snapdelay:500})
</script>
- Hướng dẫn trên blogger. Thêm trực tiếp vào template
Sao chép Code 1 và 2 đặt trước thẻ </head>
Ví dụ thêm menu này ở dưới vị trí header (giống như menu của mình đặt ở dưới vị trí header), tìm tới đoạn code:
<div id='header'>
...
</div> Chọn CODE 3.1 hoặc 3.2 . 3.3 3.4 dán dưới code ở trên
- Lưu temPlate lại và xem kết quả
0 nhận xét:
Post a Comment