Chat
Danh mục
Thủ thuật tạo Mega Menu Dropdown

Thủ thuật tạo Mega Menu Dropdown

Số lượng:
Thêm vào giỏ
Thủ thuật tạo Mega Menu Dropdown đã được thêm vào giỏ hàng


Hôm nay chip gii thiu cho các bn 1 sub menu rt hay và đp mt,mi khi bn rê chut lên các menu chính s có hiu ng menu con kiu bng màu da cam.
►Bắt đầu thủ thuật:
1>Đầu tiên bạn truy cập vào Bảng điều khiển -> Chọn chỉnh sửa Html ->Nhấn Mở rộng mẫu tiện ích.

2>Bạn nhấn ctr + F điền mã code sau vào ô tìm kiếm ]]></b:skin>
sau đó bạn copy hết đoạn code bên dưới và paste trên đoạn code ]]></b:skin>tiếp đến bạn nhấn lưu mẫu lại.Như vậy là xong 1 nửa rùi.


/*Mega Menu Dropdown*/
.none {display:none!important;}
.subpage .colsub a {display:block;float:none!important;}
.subpage ul li a:hover{text-decoration:none!important;cursor: pointer;}
.subpage .colsub a, .colsub1 a {float:left!important;}
.subpage ul a.ico_home, .subpage ul a.ico_home:hover {background:url(http://data.fandung.com/img/fd-home-icon18x22.png) no-repeat 5px 2px;}
.subpage .colsub a, .alert, .subpage .colsub1 a {font-size:12px!important;}
.subpage ul li a {font-size:13px!important;}
.subpage{height:30px;background:#ebebeb url(http://data.fandung.com/img/megamenu-bg.png) repeat-x;border-top:1px solid #bbb;z-index: 12!important;}
.subpage ul{width:700px;height:29px;padding:4px 0px 0px 0px;display:block;z-index: 14;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;position: relative;}
.subpage ul li{display:inline;margin:0px;height: 29px;text-align: center;}
.subpage ul li a{font-weight:bold;color:#474747;height: 26px;text-align: center;display: block;padding:4px 14px 0 14px;z-index:10; float:left}
.subpage ul li a:hover, .subpage ul li .active{color:#fff;height: 25px;padding-top: 4px;text-align: center;display: block;z-index:10;}
.subpage ul a.ico_home, .subpage ul a.ico_home:hover{color:#efefef;border-right:1px solid #474747;width:32px;height:18px;display:block;padding: 5px 0 0 0!important;margin: 1px 3px 0 0;}
.subpage span{position:absolute;top:4px;right:0px;display:block;height: 23px!important;width: 95px;}
.subpage span{right:0px;}
.subpage span a, .subpage span a:hover{padding:0px!important;height: 23px!important}
.subpage .smenu, .subpage .smenu1{background:#ff7d00;padding:0 10px;border-left:4px solid #eee;border-bottom:4px solid #ddd;border-right:4px solid #eee;}
.subpage .bgmenu{height:1%;margin:10px 0;}
.subpage .bgmenu5{height:1%;margin:7px;}
.subpage .hsmenu{height:1%;margin:7px 0;}
.subpage .rssmenu{height:1%;margin:7px 7px 0 7px;background:url(http://data.fandung.com/img/subcrible-bg.png) no-repeat bottom right;}
.subpage .smenu{width:470px;top:29px;}
.subpage .smenu1{width:320px;top:29px;}
.subpage .smenu4{width:420px;top:29px;}
.subpage .ws2{width:230px!important;}
.subpage .ws4{width:350px!important;}
.subpage .ws5{width:300px!important;}
.subpage .colsub, .subpage .colsub1{padding-bottom:0px;}
.subpage .ws0, .subpage .ws1{display:block;padding-right:0px!important;}
.subpage .ws0{width:110px!important;}
.subpage .ws0 a{width:100px!important;display:block;}
.subpage .wsub {width:110px;}
.subpage .wsub2{width:112px;}
.subpage .wsub3{width:98px;}
.subpage .wsub4{width:108px;}
.subpage .wsub42{width:218px;}
.subpage .wsub5{width:140px;}
.subpage .wsub a, .subpage .wsub2 a, .subpage .wsub5 a{color:#f4f4f4;text-align:left;height:auto!important;padding:2px 0;margin:0!important;}
.subpage .wsub a{width:104px;}
.subpage .wsub2 a{width:112px!important;}
.subpage .wsub3 a, .subpage .wsub3 a:hover{text-align:left;height:auto!important;padding:2px 0;margin:0!important;width:112px!important;}
.subpage .wsub3 a{color:#f4f4f4;} .subpage .wsub3 a:hover{color:#6b636e;}
.subpage .wsub4 a, .subpage .wsub4 a:hover, .subpage .wsub42 a, .subpage .wsub42 a:hover{text-align:left;height:auto!important;padding:2px 0;margin:0!important;width:164px!important;}
.subpage .wsub4 a, .subpage .wsub42 a{color:#f4f4f4;} .subpage .wsub4 a:hover, .subpage .wsub42 a:hover{color:#6b636e;}
.subpage .wsub a:hover, .subpage .wsub2 a:hover, .subpage .wsub5 a:hover{background-color:transparent!important;padding:2px 0!important;margin:0!important;color:#6b636e;text-align:left;}
.subpage .titleTop{color:#fff;text-align:left;font-size:14px;font-weight:bold;}
.subpage p.titleTop {margin:0;padding-bottom:5px!important;}
.subpage .colsub a, .subpage .colsub1 a{font-weight:normal!important;}
.last {background:none!important;margin-right:0px!important;padding-right:0px!important;}
#fdmenu1:hover a#fdmenu1link, #fdmenu2:hover a#fdmenu2link, #fdmenu3:hover a#fdmenu3link, #fdmenu4:hover a#fdmenu4link, #fdmenu5:hover a#fdmenu5link{background: none repeat scroll 0 0 #ff7d00;color: #FFFFFF;display: block;height: 25px;padding-top: 4px;text-align: center;z-index: 10;}
#fdmenu1:hover #fdmenu1items, #fdmenu2:hover #fdmenu2items, #fdmenu3:hover #fdmenu3items, #fdmenu4:hover #fdmenu4items, #fdmenu5:hover #fdmenu5items {display: block !important;}
.abs {position:absolute!important;}
.fleft {float:left!important;}
.clr{clear:both;}
.noborder {border:0px!important;z-index:4;}
/*END Code menu ngang*/



3>Bạn vào Thiết kế ->Phần tử trang -> Sau đó tạo 1 Widget - html/Javarscript
sau đó copy hết đoạn code sau và paste vào nhé;


<!-- Mega Menu Dropdown -->
<div class="subpage">
<ul>
<li class="last"><a href="http://www.chipkool.tk/" class="ico_home" title="Trang chủ"></a></li>



<!--MENU VI TINH-->

<li id="fdmenu3">
<a name="_mainMenu" id="fdmenu3link" class="w3" href="#">Vi tính</a>
<div style="left: 5px; z-index: 5645 ! important;" id="fdmenu3items" class="abs smenu1 w3 none"><div class="hsmenu">
       
<div class="colsub1 wsub3 fleft">
<p class="titleTop">Hệ Điều Hành</p>
<a href="/search/label/windows%207?max-results=10">Windows 7</a>
<a href="/search/label/windows%20XP?max-results=10">Windows XP</a>
<a href="/search/label/windows%208?max-results=10">Windows 8</a>
<a href="#">Windows Vista</a>
<a href="/search/label/h%C3%ACnh%20n%E1%BB%81n?max-results=10">Hình nền</a>
</div>
       
<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Thủ Thuật</p>
<a href="/search/label/Thủ%20Thuật%20Vi%20tính">Computer</a>
<a href="/search/label/thủ%20thuật%20internet?max-results=5">Internet</a>
<a href="/search/label/MS%20Office?max-results=10">MS Office</a>
<a href="/search/label/Phần%20mềm%20vi%20tính?max-results=10">Software</a>
<a href="/search/label/USB?max-results=10">USB</a>
</div>

<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Công Nghệ</p>
<a href="/search/label/Sức%20mạnh%20số?max-results=10">Sức Mạnh số</a>
<a href="/search/label/Diệt%20virut?max-results=10">Diệt Virut</a>
<a href="#">Khám phá</a>
<a href="#">GAMES</a>
<a href="/search/label/clip%20thủ%20thuật?max-results=10">Clip thủ thuật</a>
                </div>

<br class="clr" />
</div></div>
</li>




<!--MENU BLOG DIEN TU-->

<li id="fdmenu1">
<a name="_mainMenu" id="fdmenu1link" class="w1" href="#">Blog điện tử</a>
<div style="left: 0px; z-index: 5645 ! important;" id="fdmenu1items" class="abs smenu none"><div class="bgmenu">
        <div class="colsub wsub fleft">
         
<p class="titleTop">Ebook</p>
<a href="/search/label/ebook%20điện%20tử?max-results=10">Ebook điện tử</a>
<a href="/search/label/Ebook%20Đại%20Học?max-results=10">Ebook Đại Học</a>
<a href="/search/label/Ebook%20đồ%20án?max-results=10">Ebook Đồ án</a>
<a href="/search/label/Ebook%20Tin%20Học?max-results=10">Ebook tin học</a>
<a href="/search/label/Ebook%20Web?max-results=10">Ebook Web</a>
</div>

     
<div class="colsub wsub ws0 fleft">
<p class="titleTop">Kiến thức điện tử</p>
<a href="/search/label/Điện%20tử%20cơ%20bản?max-results=10">Điện tử cơ bản</a>
<a href="/search/label/Mạch%20điện%20cơ%20bản?max-results=10">Mạch điện cơ bản</a>
<a href="/search/label/Phần%20mềm%20điện%20tử?max-results=10">Phần mềm ĐT</a>
<a href="/search/label/IC%20Thông%20Dụng?max-results=10">IC Thông dụng</a>
</div>

     
<div class="colsub wsub ws0 fleft">
<p class="titleTop">Mạch IC số</p>
<a href="/search/label/IC%2074HC595?max-results=10">IC 74HC595</a> <a href="/search/label/Loi%20Khuyen">IC 555</a>
<a href="/search/label/Mạch%20tổ%20hợp%20MSI?max-results=10">IC LM324</a>
<a href="#">IC 74HC245</a>
<a href="/search/label/Vi%20mạch%20số?max-results=10">IC 74LS38</a>
</div>



<div class="colsub wsub ws0 fleft">
<p class="titleTop">ROBOCON</p>
<a href="/search/label/Rule%20robocon?max-results=10">Luật thi 2012</a>
<a href="#">Tài liệu Robo</a>
<a href="/search/label/Mạch%20Autorobo?max-results=10">Mạch Tự động</a>
<a href="/search/label/cảm%20biến?max-results=10">Mạch Cảm biến</a>
<a href="/search/label/FAQ?max-results=10">FAQ</a>
</div>

<!--MENU TẦNG 2-->

<div class="colsub wsub fleft">
<p class="titleTop">Linh Kiện</p>
<a href="/search/label/Tranzitor?max-results=10">Tranzitor</a>
<a href="/search/label/Tụ%20điện?max-results=10">Tụ điện</a>
<a href="/search/label/Tổng%20hợp?max-results=10">Diode</a>
<a href="/search/label/Trao%20đổi%20học%20tập">Cuộn cảm</a>
<a href="/search/label/Trao%20đổi%20học%20tập">Mosfet/Thy</a>
<a href="/search/label/Trao%20đổi%20học%20tập?max-results=10">Điện trở</a>
<a href="/search/label/VOM?max-results=10">Sử dụng VOM</a>
</div>

       

<div class="colsub wsub ws0 fleft ">
<p class="titleTop">Điện tử ứng dụng</p>
<a href="/search/label/Mạch%20thu%20phát?max-results=10">Mạch thu-phát</a>
<a href="/search/label/Mạch%20bảo%20vệ?max-results=10">Mạch bảo vệ</a>
<a href="/search/label/Mạch%20Led?max-results=10">Mạch LED</a>
<a href="/search/label/Mạch%20nguồn?max-results=10">Mạch nguồn</a>
<a href="/search/label/Mạch%20in?max-results=10">Mạch In</a>
<a href="/search/label/All%20datasheet?max-results=10">All datasheet</a>
</div>


<div class="colsub wsub ws0 fleft noborder last">
<p class="titleTop">Mạch IC logic</p>
<a href="/search/label/IC%20logic?max-results=10">IC Logic</a> <a href="/search/label/Loi%20Khuyen">Mạch ADC-DAC</a>
<a href="/search/label/Mạch%20tổ%20hợp%20MSI?max-results=10">Mạch tổ hợp MSI</a>
<a href="#">Mạch Op-Amps</a>
<a href="/search/label/Vi%20mạch%20số?max-results=10">Vi mạch số</a>
</div>

<div class="colsub wsub ws0 fleft noborder last">
<p class="titleTop">Top mạch</p>
<a href="/search/label/Mạch%20đồng%20hồ?max-results=10">Mạch đồng hồ</a>
<a href="/search/label/Mạch%20giao%20thông?max-results=10">Mạch giao thông</a>
<a href="/search/label/Mạch%20trái%20tim?max-results=10">Mạch trái tim</a>
<a href="/search/label/Mạch%20cube?max-results=10">Mạch led qube</a>
<a href="/search/label/Mạch%20đếm%20sản%20phẩm?max-results=10">Mạch đếm sản phẩm</a>
<a href="/search/label/mạch%20properler%20clock?max-results=10">Mạch led quay</a>
</div>



<br class="clr" />
</div></div>
</li>






<!--MENU LẬP TRÌNH-->

<li id="fdmenu3">
<a name="_mainMenu" id="fdmenu3link" class="w3" href="#">Lập Trình</a>
<div style="left: 125px; z-index: 5645 ! important;" id="fdmenu3items" class="abs smenu1 w3 none"><div class="hsmenu">
        <div class="colsub1 wsub3 fleft">
       
<p class="titleTop">Tài Liệu Lập trình</p>
<a href="/search/label/lập%20trình%20asembly?max-results=10">Lập trình ASM</a>
<a href="#">Lập trình C-89</a>
<a href="/search/label/Lập%20trình%20c-avr?max-results=10">Lập trình C-AVR</a>
<a href="#">Lập trình PIC</a>
</div>
       
<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Code Lập trình</p>
<a href="/search/label/code%20ASM%2089xx?max-results=10">Code 89xx</a>
<a href="/search/label/Code%20C%208051?max-results=10">Code C-89</a>
<a href="#">Code C-AVR</a>
<a href="#">Code Robocon</a>
</div>
       
       
<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Mạch nạp</p>
<a href="http://www.chipkool.tk/2011/05/mach-nap-avr-910-usb.html">Mạch nạp AVR</a>
<a href="http://www.chipkool.tk/2011/05/mach-nap-89xx-cong-com.html">Mạch nạp 89</a>
<a href="/search/label/Trao%20đổi%20học%20tập">Trao đổi học tập</a>
</div>



       

<!--MENU GIAI TRI-->

<li id="fdmenu3">
<a name="_mainMenu" id="fdmenu3link" class="w3" href="#">Giải trí</a>
<div style="left: 125px; z-index: 5645 ! important;" id="fdmenu3items" class="abs smenu1 w3 none"><div class="hsmenu">


<div class="colsub1 wsub3 fleft">
<p class="titleTop">Truyện</p>
<a href="/search/label/truyện%20tình%20yêu?max-results=10">Love Story</a>
<a href="/search/label/Truyện%20tranh?max-results=10">Truyện tranh</a>
<a href="/search/label/Truyện%20cười?max-results=10">Truyện Cười</a>
<a href="/search/label/học%20đường?max-results=10">Học đường</a>
</div>

<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">BLOG</p>
<a href="/search/label/blog%20radio1">Blog Radio</a>
<a href="/search/label/entry%20blog?max-results=10">Entry Blog</a>
<a href="/search/label/Kỹ%20năng%20cuộc%20sống?max-results=10">Skill Life</a>
<a href="/search/label/đọc%20sách?max-results=10">Read Book</a>
<a href="/search/label/Handmadre?max-results=10">Handmade</a>
</div>


<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Giải Trí</p>
<a href="/search/label/Phim%20online?max-results=10">Xem Phim</a>
<a href="http://www.chipkool.tk/2011/01/contact-me.html">Tivi online</a>
<a href="/search/label/Music%20Online?max-results=10">Music online</a>
<a href="/search/label/Auto%20Game?max-results=10">Auto Game</a>
<a href="/search/label/anh%20nền%20đẹp?max-results=10">Ảnh nền</a>
<a href="/search/label/Dịch%20Vụ?max-results=10">Dịch Vụ</a>
</div>

<br class="clr" />
</div></div>
</li>





<!--MENU HOC TAP-->

<li id="fdmenu5">
<a name="_mainMenu" id="fdmenu5link" class="w2" href="#">Học tập</a>
<div style="left: 232px;" id="fdmenu5items" class="abs smenu ws5 none"><div class="bgmenu5">
<div class="colsub1 wsub5 fleft">
<p class="titleTop">Hỗ trợ</p>                                                

<a href="/search/label/Học%20Orcad?max-results=10">Học Orcad|</a>
<a href="/search/label/Học%20Protues?max-results=10" target="_blank">Học protues</a>                                                                                                              
<a href="/search/label/học%20matlab?max-results=10" target="_blank">Học Matlab</a>
<a href="#">Học Codevison</a>
<a href="/search/label/học%20tiếng%20anh?max-results=10">Học Tiếng anh</a>
<a href="/search/label/Học%20photoshop?max-results=10">Học Photoshop</a>
<a href="#">Học Keil C</a>
                                                       
         <br class="clr" />
    </div>

<div class="colsub1 wsub5 fleft">
<p class="titleTop">Thủ Thuật</p>                                                   <a href="/search/label/thủ%20thuật%20blogger?max-results=10">Thủ thuật Blogger</a>                                                                                                                 <a href="/search/label/thủ%20thuật%20blogplus?max-results=10">Thủ thuật blogplus</a>
<a href="/search/label/kiếm%20tiền%20online?max-results=10">Kiếm tiền Online</a>                                                                                                                
<a href="/search/label/Domain%20Blog?max-results=10">Domain Blog</a>
<a href="/search/label/Hosting?max-results=10">||Hosting</a>                                                                                                         <a href="/2010/11/bang-ma-mau-hexa.html">Bảng mã màu</a>
                                                       
         <br class="clr" />
    </div>
           <br class="clr" />  
</div></div>
</li>



<!--MENU TỔNG HỢP-->

<li id="fdmenu3">
<a name="_mainMenu" id="fdmenu3link" class="w3" href="#">Tổng hợp</a>
<div style="left: 250px; z-index: 5645 ! important;" id="fdmenu3items" class="abs smenu1 w3 none"><div class="hsmenu">


<div class="colsub1 wsub3 fleft">
<p class="titleTop">Duyệt Web</p>
<a href="/search/label/Google%20Chorme">Google Chorme</a>
<a href="/search/label/FireFox?max-results=10">FireFox</a>
<a href="#">I-Explorer</a>
<a href="http://www.chipkool.tk/2011/12/trang-web-hay.html">Web Điện Tử</a>
</div>

<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Kết nối</p>
<a href="/search/label/facebook">FaceBook</a>
<a href="https://plus.google.com">Google+</a>
<a href="/search/label/ghost?max-results=10">Ghost Win</a>
<a href="/search/label/Lost%20Win?max-results=10">Lỗi Win</a>
</div>


<div class="colsub1 wsub3 fleft noborder">
<p class="titleTop">Làm web</p>
<a href="/search/label/Simple%20CSS?max-results=10">Học CSS</a>
<a href="#">Forumotion</a>
<a href="/search/label/Forum%20VBB?max-results=10">Forum VBB</a>
<a href="http://www.chipkool.tk/2011/12/cong-cu-blogger.html">Tool Blog</a>
</div>

<br class="clr" />
</div></div>
</li>

<li id="fdmenu4">
<a class="w4" id="fdmenu4link" href="#" target="_blank">RSS Feed</a>
<div style="left: 272px; z-index: 5645 ! important;" id="fdmenu4items" class="abs smenu ws4 none"><div class="rssmenu">
<div class="colsub1 wsub4 fleft">
<a href="http://www.chipkool.tk/2011/04/lien-he-voi-chipkool.html">Ban quản trị</a>
<a href="http://www.chipkool.tk/2010/12/icon-blog.html">Contact Me</a>
<a href="http://www.chipkool.tk/2011/04/trao-oi-lien-ket-cong-ong-blogger-viet.html">Liên kết Blog</a>
<a href="http://blogger.com/">Enter Blog</a>
<a href="/search/label/Hướng%20dẫn%20member/">Help</a>
</div>
<div class="colsub1 wsub42 fleft noborder">
<p class="titleTop">Đăng ký nhận tin mới</p>

<p><a href="http://feeds.feedburner.com/BlogChipKool"><img src="http://feeds.feedburner.com/~fc/BlogChipKool?bg=99CCFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a></p>


<form border="0" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ThVinCode', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<a href="http://www.chipkool.tk/2011/11/huong-dan-ang-ky-nhan-bai-viet-tu-blog.html" target="_blank">Xem hướng dẫn ở đây.</a>
<input style="width:140px" name="email" type="text" onblur="if (this.value == "")
{this.value = "Nhập Email của bạn ...";}" onfocus="if (this.value == "Nhập Email của bạn ...")
 {this.value = ""}" value="Nhập Email của bạn ..."/><input value="ThVinCode" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="Đồng ý" type="submit"/>
</form>
<a alt="BlOg Chipkool" href="http://www.chipkool.tk/view/sidebar" target="_blank"><img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" height="13" /> RSS Posts </a>
<a alt="BlOg FD" href="http://www.chipkool.tk/feeds/comments/default" target="_blank"><img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" / height="13" /> RSS Comments </a>
<a alt="BlOg Tips" href="http://www.chipkool.tk/p/sitemap-weblog.html" target="_blank"><img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" height="13" /> Sitemap Blog </a>

<br class="clr" />
<br class="clr" />
                </div>
        <br class="clr" />
</div></div>

</li>


</div></div></li></ul>
</div>
<!-- Mega Menu Dropdown -->


Các bạn cứ làm theo như vậy nhé?có gì Comment tớ sẽ chỉ dẫn tận tình!!

Blog Điện Tử | Tin Học