netoops blog
Trang này chỉ copy lại để làm tài liệu cho mình thôi: Nếu có bài của bạn, thì xin bỏ qua. Cảm ơn.

Tuesday, 22 January 2013

Thêm Menu Ngang Hiệu Ứng JQuery Mega Cho Blogger





Hướng dẫn này sẽ chỉ cho bạn Làm thế nào để Thêm jQuery đơn Sidebar Mega đứng Blogger. 

Demo:

1.Bảng điều khiển Blogger -> Thiết kế -> Phần tử trang.

2.Thêm một tiện ích sau đó chọn HTML / JavaScript Widget

3.Sao chép đoạn mã dưới đây và dán nó bên trong widget.

<style>
/* Page Styles */
.menu-container {padding: 20px 0; width: 250px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}

/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif; 
line-height: 16px; 
background: #333;
border-left: 1px solid #1B1B1B; 
position: relative; /* Required */
}
.mega-menu li a {
display: block; 
color: #fff; 
padding: 12px 38px 12px 25px; 
text-shadow: 1px 1px 1px #000; 
text-decoration: none; 
border-top: 1px solid #555; 
border-bottom: 1px solid #222; 
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b; 
color: #fff; 
border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.mega-menu li a .dc-mega-icon {
display: block; 
position: absolute; 
top: 18px; 
right: 15px; 
width: 6px; 
height: 8px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgEGJ-YjtT89u5kkaKc_9SSEoXZXKqFg2k6f_64s0GWKtPxalnSolzbXmZ5_c_gXpA8tHd5w0V2Vqhrcs3zkWaFLtQHK0cOhDpvAsA7t1i3fboAk6AsbheCVMXwJWW1IEzbqKaNO4D8d4/s1600/ext-black.png) no-repeat 0 0;
}
/* Mega menu container */
.mega-menu li .sub-container {
position: absolute; /* Required */
background: #4B4B4B; 
padding: 10px 10px 0 10px; 
overflow: hidden; 
border: 1px solid #4b4b4b; 
border-left: none;
}
.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.mega-menu li .sub li {
float: none; 
width: 150px; 
font-size: 1em; 
font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
background: none; 
border: none; 
text-shadow: none;
float: none;
color: #fff; 
padding: 7px 10px; 
display: block;
text-decoration: none; 
font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 5px 5px 15px; 
margin-bottom: 5px; 
background: #E88221; 
text-transform: uppercase; 
font-weight: bold; 
color: #fff; 
text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000; 
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
padding: 4px 5px 4px 20px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TpFyvWFdos8QBsegwA9RVv5bx8qXdzciv8nSuIT0CjF61QL9-pYxjQnnsgUGyyVp4Sp9T0Il2toa2o-VOjcESbsynw8sNcQjcU9VEqgwvwhYcbTx2V6MYMi_rP04mlYjb_FrnkUTp_o/s1600/arrow_white.png) no-repeat 5px 8px; 
font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
color: #a32403; 
background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq__zcb-qsu6w9g6JgPfNneQ2F6I4_ZMQ_OuppNqZH-NCrbn2_jPZSwg8Npua5amIRyPrmCRLUISe6mSCn0mZw7AyNr1Dsdmj4a7Ur0obATbxAGtllDjnRzpIb8tswc4VTAfSZ3DLJ6rU/s1600/arrow_on.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
padding-right: 0;
}
/* Styling for Menu Items with only 2 levels */
.mega-menu li .sub-container.non-mega .sub {
padding: 10px;}
.mega-menu li .sub-container.non-mega li {
padding: 0; 
margin: 0;
width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TpFyvWFdos8QBsegwA9RVv5bx8qXdzciv8nSuIT0CjF61QL9-pYxjQnnsgUGyyVp4Sp9T0Il2toa2o-VOjcESbsynw8sNcQjcU9VEqgwvwhYcbTx2V6MYMi_rP04mlYjb_FrnkUTp_o/s1600/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
color: #a32403; 
background: #efefef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq__zcb-qsu6w9g6JgPfNneQ2F6I4_ZMQ_OuppNqZH-NCrbn2_jPZSwg8Npua5amIRyPrmCRLUISe6mSCn0mZw7AyNr1Dsdmj4a7Ur0obATbxAGtllDjnRzpIb8tswc4VTAfSZ3DLJ6rU/s1600/arrow_on.png) no-repeat 7px 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='http://latesthack.googlecode.com/svn/mywidgets/VerticalSidebarMenu/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='http://latesthack.googlecode.com/svn/mywidgets/VerticalSidebarMenu/jquery.dcverticalmegamenu.1.0.js'></script>
<script type="text/javascript">
$(document).ready(function($){

$('#mega-1').dcVerticalMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'show',
direction: 'right'
});
});
</script>
</head>
<body>
<div class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li><a href="#">Menu Item A</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
</ul></li>
<li><a href="#">Menu Item C</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item D</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item E</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li>
<li><a href="#">Menu Item F</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item G</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item H</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item I</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li></ul>
</div>

Thay thế tên menu của bạn nhé....
Và bây giờ thì save chúng lại và chúc bạn thành công.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Copyright 2010 Chú ý; trang này chỉ để chủ xem.

Home | Layout | Template | Allposts | Viết |