Một blog có nhiều chủ đề, nhãn, trang, và các bài viết thì phải sắp xếp các chủ đề chương mục đó sao cho hợp lý logic, Hôm nay namkna sẽ giới thiệu cho các bạn một mẫu Menu chuyển động với hiệu ứng jquery rất đẹp. Thích hợp cho các blog. Tuy sử dụng file jquery nhưng bạn yên tâm nó không làmh cậm tóc độ blog của bạn đi.
Các bước thực hiện:
1. Vào Thiết Kế -> Phần Tử Trang
1. Vào Thiết Kế -> Phần Tử Trang
2. Chọn Thêm Tiện Ích
3. Tạo một HTML/Javarscrip và thêm đoạn code bên dưới vào.
<style> ul.ldd_menu{ margin:0px; padding:0; display:block; height:50px; background-color:#D04528; list-style:none; font-family:"Trebuchet MS", sans-serif; border-top:1px solid #EF593B; border-bottom:1px solid #EF593B; border-left:10px solid #D04528; -moz-box-shadow:0px 3px 4px #591E12; -webkit-box-shadow:0px 3px 4px #591E12; -box-shadow:0px 3px 4px #591E12; } ul.ldd_menu a{ text-decoration:none; } ul.ldd_menu > li{ float:left; position:relative; } ul.ldd_menu > li > span{ float:left; color:#fff; background-color:#D04528; height:50px; line-height:50px; cursor:default; padding:0px 20px; text-shadow:0px 0px 1px #fff; border-right:1px solid #DF7B61; border-left:1px solid #C44D37; } ul.ldd_menu .ldd_submenu{ position:absolute; top:50px; width:550px; display:none; opacity:0.95; left:0px; font-size:14px; background: #C34328; border-top:1px solid #EF593B; -moz-box-shadow:0px 3px 4px #591E12 inset; -webkit-box-shadow:0px 3px 4px #591E12 inset; -box-shadow:0px 3px 4px #591E12 inset; z-index:30; /* thuộc tính hiện menu con đối với các blog để nổi bracgrou */ } a.ldd_subfoot{ background-color:#f0f0f0; color:#444; display:block; clear:both; padding:15px 20px; text-transform:uppercase; font-family: Arial, serif; font-size:12px; text-shadow:0px 0px 1px #fff; -moz-box-shadow:0px 0px 2px #777 inset; -webkit-box-shadow:0px 0px 2px #777 inset; -box-shadow:0px 0px 2px #777 inset; } ul.ldd_menu ul{ list-style:none; float:left; border-left:1px solid #DF7B61; margin:20px 0px 10px 30px; padding:10px; } li.ldd_heading{ font-family: Georgia, serif; font-size: 13px; font-style: italic; color:#FFB39F; text-shadow:0px 0px 1px #B03E23; padding:0px 0px 10px 0px; } ul.ldd_menu ul li a{ font-family: Arial, serif; font-size:12px; line-height:20px; color:#fff; padding:1px 3px; } ul.ldd_menu ul li a:hover{ -moz-box-shadow:0px 0px 2px #333; -webkit-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 2px #333; background:#AF412B; } </style> <ul id="ldd_menu" class="ldd_menu"> <li> <span>Vacations</span><!-- Increases to 510px in width--> <div class="ldd_submenu"> <ul> <li class="ldd_heading">By Location</li> <li><a href="#">South America</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Asia and Australia</a></li> <li><a href="#">Europe</a></li> </ul> <ul> <li class="ldd_heading">By Category</li> <li><a href="#">Sun & Beach</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Science & Education</a></li> <li><a href="#">Extreme Sports</a></li> <li><a href="#">Relaxing</a></li> <li><a href="#">Spa and Wellness</a></li> </ul> <ul> <li class="ldd_heading">By Theme</li> <li><a href="#">Paradise Islands</a></li> <li><a href="#">Cruises & Boat Trips</a></li> <li><a href="#">Wild Animals & Safaris</a></li> <li><a href="#">Nature Pure</a></li> <li><a href="#">Helping others & For Hope</a></li> <li><a href="#">Diving</a></li> </ul> <a class="ldd_subfoot" href="#"> + New Deals</a> </div> </li> <li> <span>Equipment</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">By Location</li> <li><a href="#">South America</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Asia and Australia</a></li> <li><a href="#">Europe</a></li> </ul> <ul> <li class="ldd_heading">By Category</li> <li><a href="#">Sun & Beach</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Science & Education</a></li> <li><a href="#">Extreme Sports</a></li> <li><a href="#">Relaxing</a></li> <li><a href="#">Spa and Wellness</a></li> </ul> <ul> <li class="ldd_heading">By Theme</li> <li><a href="#">Paradise Islands</a></li> <li><a href="#">Cruises & Boat Trips</a></li> <li><a href="#">Wild Animals & Safaris</a></li> <li><a href="#">Nature Pure</a></li> <li><a href="#">Helping others & For Hope</a></li> <li><a href="#">Diving</a></li> </ul> <a class="ldd_subfoot" href="#"> + New Deals</a> </div> </li> <li> <span>Locations</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">By Location</li> <li><a href="#">South America</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Asia and Australia</a></li> <li><a href="#">Europe</a></li> </ul> <ul> <li class="ldd_heading">By Category</li> <li><a href="#">Sun & Beach</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Science & Education</a></li> <li><a href="#">Extreme Sports</a></li> <li><a href="#">Relaxing</a></li> <li><a href="#">Spa and Wellness</a></li> </ul> <ul> <li class="ldd_heading">By Theme</li> <li><a href="#">Paradise Islands</a></li> <li><a href="#">Cruises & Boat Trips</a></li> <li><a href="#">Wild Animals & Safaris</a></li> <li><a href="#">Nature Pure</a></li> <li><a href="#">Helping others & For Hope</a></li> <li><a href="#">Diving</a></li> </ul> <a class="ldd_subfoot" href="#"> + New Deals</a> </div> </li> </ul> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { /** * the menu */ var $menu = $('#ldd_menu'); /** * for each list element, * we show the submenu when hovering and * expand the span element (title) to 510px */ $menu.children('li').each(function(){ var $this = $(this); var $span = $this.children('span'); $span.data('width',$span.width()); $this.bind('mouseenter',function(){ $menu.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':'510px'},300,function(){ $this.find('.ldd_submenu').slideDown(300); }); }).bind('mouseleave',function(){ $this.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':$span.data('width')+'px'},300); }); }); }); </script>
Trong đó bạn thay:
- Thay các dấu thăng màu xanh (#)thành các liên kết tới các bài viết, trang hoặc các laber
- Thay các phần màu đỏ thành tên các bài viết, trang, laber tương ứng.
- Chú ý bạn nên thêm nó vào 1 Wiget ở trên phần header, nếu blog bạn chưa có phần thêm tiện ích ở trên header như blog demo của namkna thì bạn tham khảo bài viết hướng dẫn thêm tiện ích lên trên phần header Tại đây.
Theo: Mr.Nguyễn Hải ™
Nhận xét
chao ban mình muốn bạn giúp mình làm thế nào để lấy thanh headder trên đầu bài viết như của bạn ấy ?
Trả lờiXóa@Chuc Bạn xem bài này nha: Thanh trạng thái "breadcrumb" cho Blogspot:3) :3)
Trả lờiXóaKhi rê chuột vào menu con thì menu đóng :( không lẽ chỉ rê chuột để xem thôi chứ không được chọn các menu con sao?
Trả lờiXóaDemo: http://10a8-nvt.blogspot.com/
@Win Mình đã chỉnh lại code rùi bạn áp dụng thử xem :3) :3) :3) :3)
Trả lờiXóa@Fairstar
Trả lờiXóaNó có thể tốt hơn nữa không? :( có vẻ như chưa hoàn thiện lắm bạn có thể quay lại để xem demo, và chỉ rõ chỗ bạn fix nhé (để đỡ phải replace :D)
tks !
@Win Hiện tại đây là bản tốt nhất rùi mình xẽ tiếp tục hoàn thiện hơn. Bạn có thể đổi xúng với đoạn code ban đầu sẽ thấy sự khác nhau. Bạn tự tìm ra như thế sẽ nhớ rất lâu :3) :3) :3) :3)
Trả lờiXóa@Fairstar
Trả lờiXóacó vẻ như bạn không hoạt động Yahoo! Messenger :| add nick mà không thấy hồi âm !
@Win Mình rất ít vào vì giờ mà vào là mất luôn cả ngày để trả lời mọi người :B) :B) :B)
Trả lờiXóaHơn 500 bạn trên blog :B) :B) :B) trả lời mất nhiều thời gian lắm :F) :F) do vậy mình ít vào lắm :F) :F)
@Fairstar
Trả lờiXóaỞ blog mình có vấn đề nhỏ nhưng chưa biết cách khắc phục :( đó là cái clock bên cột trái nó bị lấn vào phần bài đăng :( blog bạn nên mở thêm cái chatbox để chia sẻ =.=" như vậy tốt hơn :D
@Win Ý bạn là Blog nguyễn hải hay Blog 10A8 tại vì mình vào cả 2 Blog đều không thấy cái Clock nào. bạn chụp ảnh cái đó thì sẽ dễ biết hơn:3) :3)
Trả lờiXóa@Fairstar Ok cảm ơn đóng góp của bạn mình sẽ lắp thêm 1 chat bõ trong thời gian xớm nhất :3) :3)
Trả lờiXóa@FairstarCbox sẽ đông vui lắm đây
Trả lờiXóa@Nguyễn Hải ™ Ok kiểu này phải lắp càng sớm cang tốt rồi :3) :3) :3)
Trả lờiXóaNguyễn Hải ™ blOg Hướng dẫn mình làm bài đăng ngoài trang chủ như bên Trai đất mũi .
Trả lờiXóa@Nguyễn Hải ™ Tiện ích này hiện nay đã có Fandung viết rùi, nên mình không viết lại nữa bạn có thể xem cách làm khá đơn giản tại đây: Click here:3) :3) :3)
Trả lờiXóa@FairstarMình rắc rối khi áp dụng cái này, bạn có thể Team Vierwer máy mình đc k
Trả lờiXóaCái clock này nè :x
Trả lờiXóahttp://ni8.upanh.com/b4.s15.d1/cda448d0c80296366d9cae284ca77d5b_41244108.aaaaaaaaa.png
@Win Bạn chỉnh lại code của cái đồng hồ bạn nhúng là Ok mà:
Trả lờiXóaMình không nhầm là đoạn code này:
<!---local time clock widget - html code - localtimes.info ----><div align="center" style="margin:15px 0px 0px 0px"><noscript>&amp;amp;amp;amp;lt;div align="center" style="width:150px;border:1px solid #ccc;background:#010 ;color: #010 ;font-weight:bold"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#11ff11 ;" href="http://10a8-nvt.blogspot.com/"&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;img src="http://localtimes.info/images/countries/vn.png" border="0" style="border:0;margin:0;padding:0" /&amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;Nha Trang Time&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;</noscript><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Asia&country=Vietnam&city=Nha+Trang&widget_number=1012&hfg=1&cp3_Hex=000000&cp2_Hex=ffffff&cp1_Hex=ff0000&hbg=1&lab=1"></script></div><!---end of code----><!--!-end--><!--!-local-->
Chỉnh lại thuộc tính width:150px đi :3) :3) :3) :3)
@Fairstar
Trả lờiXóaCode mình đang dùng chính là code bạn post :) 150px
@Win uk bạn chỉnh nó nhỏ đi là được :3) :3) :3)
Trả lờiXóa@Fairstar
Trả lờiXóamình đã thử chỉnh Width đủ kích rồi mà vẫn một vị trí không dời :( bạn có thể dùng TeamViewer chứ?
à mà mình thích cái khung Nhận Xét này đấy :D
@Win Cái này do code đồng hồ của bạn sử dụng file Php mặc định nó lớn như thế bạn đổi thuộc tính div align="center" thành div align="left" xem sao:3) :3)
Trả lờiXóaComment phân cấp:3)
@Fairstar
Trả lờiXóaĐã chỉnh left nhưng vị trí cũng không thay đổi :(
Nhưng tks vì cái comment :)
@Win Không có gì đâu :3) :3) :3)
Trả lờiXóaCòn cái đồng hồ là do file PHP của bạn áp dụng nó có độ lớn thế rùi! :3) :3) :3)
bạn ơi của mình có sẵn cái drop menu dạng sổ dọc trong cái chỉnh sửa html rồi, thì làm thế nào để chuyển nó thành cái dạng của bạn như ở đây nhỉ?
Trả lờiXóaBạn chỉ cần thay code xml và css của nó thành code bài này thôi bạn ak.
XóaCái này phải để anh test trước đã :)
Trả lờiXóaAnh ơi làm sao để cho cái menu này nằm trền cùng của page và khi kéo trang xuống dưới thì vẩn thấy nó, giống như menu Home của blog Anh vậy
Trả lờiXóaEm thay đoạn:
Xóaul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:50px;
background-color:#D04528;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #EF593B;
border-bottom:1px solid #EF593B;
border-left:10px solid #D04528;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
thành:
ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:50px;
background-color:#D04528;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #EF593B;
border-bottom:1px solid #EF593B;
border-left:10px solid #D04528;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
top:0; position:fixed;z-index:30;background:#347C17;
}
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaem làm rồi nhưng menu con nó không hiển thị, giúp em với thanks Anh
Trả lờiXóaAnh không biêt địa chỉ blog em nên không thể nói chi tiết cho em xem mắc lỗi phần nào, Em có thể để lại địa chỉ blog ở đây.'
XóaNgoài ra em có thể tự kiểm tra bằng cách kiểm tra các đoạn CSS có chứa thuộc tính overflow:hidden nha, Đây chính là nguyên nhân chính gây ra hiện tượng trên đó em ak.