Menu dọc xổ ngang chuyên nghiệp cho web shop

Tweet

Thủ thuật tạo Menu dọc xổ ngang chuyên nghiệp cho web shop, được thiết kế lại khá ấn tượng với các Icon, và hình nền cho từng Menu Sub, Dành cho các bạn dùng blogspot nhé


Cách làm: 


- Chèn đoạn CSS sau trên ]]></b:skin>
#cottraihome {
float: left;
width: 165px;
margin-left: -8px;
}
#fdmega-menu-thaiaiti2 ul {list-style: none;}
.tatcadanhmuc-thaiaiti2 {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCBXuM4VBDQQsq-ucSkH_e3z4LzXh7l8ifrzpra32Sk969ETOtOgG3IQ6PzYgmXxgiYTL5Ttav7Tnj7UKu16cMluPOOeMVYqrrcl-1DO29qZPDy-b-FxY3d9INdwKEFEpFzIxAY2-16eXq/h120/iconmuiten.png) no-repeat;background-position: 150px;float: left;width: 135px;}
ul#topnav-thaiaiti2 {width: 165px;position: relative;height: 36px;margin: 0 auto;}
ul#topnav-thaiaiti2 li {float: left;height: 29px;padding: 0px;border-bottom: 1px solid #eee;background: url(#) no-repeat top right;}
ul#topnav-thaiaiti2 li a {padding: 5px 15px;display: block;color: #333;font:13px arial;text-decoration: none;}
ul#topnav-thaiaiti2 li img {margin-right: 6px;margin-top: -3px;float: left;padding-top: 3px;}
ul#topnav-thaiaiti2 li a:hover {color: #fff;background: #1CC7F2;}
ul#topnav-thaiaiti2 li:hover {background:url(#) repeat-x top left;}
ul#topnav-thaiaiti2 li.mg-home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4JiWBP1MgoZMDj9MkRRQzlPlFp_BgyjpkZogixifz6u7z3mKSei5MBWJJ8X0fmbano0TSofeiRhEj2C43sW5vJdC8I_N5368pwyqrOiAD8KOtJdCdfylQsdbbRryjqcB5dLrSYVzfXgo/s0/home-icon.png) no-repeat !important;float: left;margin-top: 8px;overflow: hidden;width: 20px;height: 25px;background-size: 100% !important;margin-left: 15px;margin-right: 10px;}
ul#topnav-thaiaiti2 li.mg-home a {height:19px;}
ul#topnav-thaiaiti2 li div.sub {width: 465px;height: 245px;border-top: none !important;border: 2px solid #1CC7F2;position: absolute;z-index: 9999;margin-left:165px !important;overflow: hidden;top: 0px;background: #fff;padding:5px;display: none;color:#333;}
ul#topnav-thaiaiti2 li:hover div.sub {display: block;}
ul#topnav-thaiaiti2 li div.sub p {margin-bottom:5px;text-align:justify;}
ul#topnav-thaiaiti2 li div.sub div.cont {float: left;padding:5px;}
ul#topnav-thaiaiti2 li div.sub div.cont h3 {padding-bottom: 5px;}
ul#topnav-thaiaiti2 li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#666;font: 12px arial;}
ul#topnav-thaiaiti2 li div.sub div.cont a:hover{color:#039;text-decoration: underline;background: transparent;}
ul#topnav-thaiaiti2 li div.ms1 {}
ul#topnav-thaiaiti2 li div.ms2 {width:942px;left: 7px;}
ul#topnav-thaiaiti2 li div.ms3 {width:260px;left: 195px;}
ul#topnav-thaiaiti2 li div.ms4 {}
ul#topnav-thaiaiti2 li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
ul#topnav-thaiaiti2 li div.sub div.cs21 {width:178px;}
ul#topnav-thaiaiti2 li div.sub div.cs31 {width:120px;}
.anhnenmenu-thaiaiti1 {float: left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSe0XuHn_9hjW2JvtV8RNkZEkgT_iH5ZzW3qznCdZIr5tpQ_qwqg-gJQr-DC2guG-d5qz9VRK217Ep2kI9mExgoODzso9MDi3r-TtCg9nr1pzzkfVIrveefpBSynHfsrP6VXwQ-0Pey_K_/s0/08-10-13-13-22-34vienthong+copy.JPG) no-repeat;width: 470px;height: 250px;}
.anhnenmenu-thaiaiti2 {float: left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXLLiCGWhasHSU5q3IMeie74hlu1vylRCeAk2lyGkLgSUau8_82tDPG3vE43d5SuUg0P5uRdnGY5FTnwTn_m3jFluzi0DIsPMN3L1xzh_E0IgPMgK87Li-S-SWUFYkb7xQF9aRyHOe69O/s0/08-10-13-13-22-46vitinh+copy.JPG) no-repeat;width: 470px;height: 250px;}
.anhnenmenu-thaiaiti3 {float: left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1BVGLCokEizLmm3fdJrgZU8dRhgEfNlxLpv4VXBJFUkwUfiGkqFqgADyy2vpetU7W1Rwg_BSKh1_Y7aC2Op9rL3HYVRQB9iI7fg3yjzH-MBw3gPyXyAhdnobOIZGddmE3jbqT6lBy2Lew/s0/08-10-13-13-23-23didong+copy.JPG) no-repeat;width: 470px;height: 250px;}
- Chèn đoạn code sau vào nơi bạn cần hiển thị Menu nhé:
 <div id='cottraihome'>
 <div id='fdmega-menu-thaiaiti2'>
<ul id='topnav-thaiaiti2'>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZRXJIx8UVJs-s4WZnske7EVOGc-jmYzbl_qD1Rfg6YrvnPdgcQjzsGTLOsC5BgWwCVixHRiKI5HRmIjKeSWWtbayP8SOh7GPJrFHDktKi4uTe2GnfNoKqKqCBRwLUdB6hmO97pQ-_iZy/s19/may%2520tinh.PNG'/>Đồ họa</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti1'>
<div class='cont cs21-thaiaiti2'>
<h3>Photoshop</h3>
<a href='#'>File Photoshop</a>
<a href='#'>Template blogspot free</a>
<a href='#'>Thủ thuật blogspot</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Dựng Phim</h3>
<a href='#'>Avid Liquid</a>
<a href='#'>After Effect</a>
<a href='#'>Premiere Pro</a>
<a href='#'>Proshow Gold</a>
</div>
</div>
</div>
</li>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohequ9mSO0SD7T-CyP9EBCVr2hakJUaf-bvYWOuzz6lUGbDYNNGs01gX_NdYOL_lgliOuLmVPry_BzeNW6vcsxs645j5aMyNC-MqsgTj7dt-LdFsn1RXwULbFViiHQrxD0QJYrq55LgZW/s18/may%2520anh.PNG'/>
Blogspot</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti2'>
<div class='cont cs21-thaiaiti2'>
<h3>Thủ thuật</h3>
<a href='#'>Template blogspot Pro</a>
<a href='#'>Template blogspot free</a>
<a href='#'>Thủ thuật blogspot</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Kho template</h3>
<a href='#'>File Photoshop</a>
<a href='#'>Mẫu thiệp cưới PSD</a>
<a href='#'>Thủ thuật</a>
</div>
</div>
</div>
</li>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLLKWN-SZgfOS_2SKGzb76zrF8kx38UCCmxwvjTLlesf3VTKaw-qi-3hV2WmMiT3dCm2sL_5MBP5m93d0pKJ5A_mhZIdYO8BmRrvsnyCFAt2SIpWG4UpxZhYfHHTiL3pLgpQTi4yHE1WTz/s19/may%2520anh3.PNG'/>
Phần mềm</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti3'>
<div class='cont cs21-thaiaiti2'>
<h3>Văn phòng</h3>
<a href='#'>Template blogspot Pro</a>
<a href='#'>Template blogspot free</a>
<a href='#'>Thủ thuật blogspot</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Mạng máy tính</h3>
<a href='#'>File Photoshop</a>
<a href='#'>Mẫu thiệp cưới PSD</a>
<a href='#'>Thủ thuật</a>
</div>
</div>
</div>
</li>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIo_AOfads2LWJOch2Dfw7bo2ERUtqIzr8ZQgdbyidQyqKBBT3gv6_I227LVg2_XgRZi1fHlxPOnXAMlfsWGRouaIlaxMTUNogAWGX62FcDnq2HNXrw1Ra67O-P6pvh7ZT56NL3CgU0zmk/s18/thiet%2520ke.PNG'/>
Photoshop</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti1'>
<div class='cont cs21-thaiaiti2'>
<h3>Blogspot</h3>
<a href='#'>Template blogspot Pro</a>
<a href='#'>Template blogspot free</a>
<a href='#'>Thủ thuật blogspot</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Photoshop</h3>
<a href='#'>File Photoshop</a>
<a href='#'>Mẫu thiệp cưới PSD</a>
<a href='#'>Thủ thuật</a>
</div>
</div>
</div>
</li>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsp3yIqBCVPLb6OQzb70L95eytA30ZpHCd4yC4lnMHfd5qUSRn2w9hcPudeYB01gSC0pu9O7INhb3A1K0-QL3XAYqGR-ZqCKsr27DTuni05SIn5t2K5LFKZbSlocHe3eallxeWMgw988E/s17/banghe.PNG'/>
File Photoshop</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti1'>
<div class='cont cs21-thaiaiti2'>
<h3>Blogspot</h3>
<a href='#'>Template blogspot Pro</a>
<a href='#'>Template blogspot free</a>
<a href='#'>Thủ thuật blogspot</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Photoshop</h3>
<a href='#'>File Photoshop</a>
<a href='#'>Mẫu thiệp cưới PSD</a>
<a href='#'>Thủ thuật</a>
</div>
</div>
</div>
</li>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZRXJIx8UVJs-s4WZnske7EVOGc-jmYzbl_qD1Rfg6YrvnPdgcQjzsGTLOsC5BgWwCVixHRiKI5HRmIjKeSWWtbayP8SOh7GPJrFHDktKi4uTe2GnfNoKqKqCBRwLUdB6hmO97pQ-_iZy/s19/may%2520tinh.PNG'/>
Project AE</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti1'>
<div class='cont cs21-thaiaiti2'>
<h3>Blogspot</h3>
<a href='#'>Template blogspot Pro</a>
<a href='#'>Template blogspot free</a>
<a href='#'>Thủ thuật blogspot</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Photoshop</h3>
<a href='#'>File Photoshop</a>
<a href='#'>Mẫu thiệp cưới PSD</a>
<a href='#'>Thủ thuật</a>
</div>
</div>
</div>
</li>
<li><a class='tatcadanhmuc-thaiaiti2' href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZRXJIx8UVJs-s4WZnske7EVOGc-jmYzbl_qD1Rfg6YrvnPdgcQjzsGTLOsC5BgWwCVixHRiKI5HRmIjKeSWWtbayP8SOh7GPJrFHDktKi4uTe2GnfNoKqKqCBRwLUdB6hmO97pQ-_iZy/s19/may%2520tinh.PNG'/>
Công cụ</a>
<div class='sub ms2thaiaiti2'>
<div class='anhnenmenu-thaiaiti1'>
<div class='cont cs21-thaiaiti2'>
<h3>Công cụ 1</h3>
<a onclick='window.open(&apos;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/color-codes.swf&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=400,scrollbars=no&apos;);return false' src='#'>Bảng mã màu</a>
<a onclick='window.open(&apos;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/lay%20code%20flash.swf&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=400,scrollbars=no&apos;);return false' src='#'>Lấy code Flash</a>
<a onclick='window.open(&apos;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/photoshop%20online.swf&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&apos;);return false' src='#'>Photoshop Online</a>
<a onclick='window.open(&apos;http://www.ma-config.com/en/installplugin/0.html&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&apos;);return false' src='#'>Cập nhật Drivers</a>
<a href='/2013/01/phan-mem-vao-facebook-tot-nhat-tuyet-voi.html'>Cách vào Facebook</a>
<a href='https://sites.google.com/site/thaiaiti1992/Teamview_ThaiAiTi.rar' target='_blank'>Tải teamview</a>
<a onclick='window.open(&apos;http://www.dudamobile.com&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&apos;);return false' src='#'>Temp Mobile Blogger</a>
<a href='http://www.thaiaiti.com/p/form-rut-ngan-css.html'>Tối ưu CSS</a>
<a href='http://www.thaiaiti.com/2013/09/upload-va-lay-link-flash-on-gian-va.html'>Lấy Link Flash</a>
<a href='http://www.thaiaiti.com/2013/07/thu-thuat-lay-data-blogspot-cua-nguoi.html'>Lấy data blogger</a>
</div>
<div class='cont cs21-thaiaiti2'>
<h3>Công cụ 2</h3>
<a href='https://sites.google.com/site/thaiaiti1992/Teamview_ThaiAiTi.rar' target='_blank'>Tải teamview</a>
<a href='http://www.thaiaiti.com/2013/11/huong-dan-tao-blogspot-cai-at-template_4.html' target='_blank'>Cách Up template</a>
<a onclick='window.open(&apos;http://whichloadsfaster.com/&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&apos;);return false' src='#'>Ai load nhanh?</a>
<a onclick='window.open(&apos;http://iphone4simulator.com/&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&apos;);return false' src='#'>Test giao diện</a>
<a onclick='window.open(&apos;http://ictgroup.vn/HTML_Encoder.htm&apos;,&apos;new&apos;,&apos;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&apos;);return false' src='#'>Mã hóa code</a>
</div>
</div>
</div>
</li>
<a href='http://www.thaiaiti.com/2013/07/nhan-rip-template-blogspotblogger-gia-re.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAdgES-H7jvPPhsI_gMFYfYhAcxj7ww9C_6fOw-fNfRhOjuH0s9vERQJZX4yCr5uc73Mi_gT2nxhdrrnnvKwR_OefowBOZUPMB45h-OdF2g-Tyk57cd7TIMcvGIFN7fu1lSfx-d4By9EY/s199/Rip%2520template.jpg' style='width: 165px;'/>
</a>
<a href='http://www.thaiaiti.com/2013/08/thiet-ke-web-theo-yeu-cau-tren-blogger.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-3pZZAcrnm6DlzhR6dSPVeh_z8LaeZoUc7VpfCovgUc3UyJrkxGN9nKp6f0azGAHoDiNmIgnlSTNe_g1gPU-5nSh0lZ1ZL71mTV7zPeWsgMCEENyZwBnuNdb7usJfev-AaTGI1HR2cmo/s199/thiet%2520ke%2520theo%2520yeu%2520cau.jpg' style='width: 165px;'/>
</a>
</ul>
</div>
 </div>
- ThaiAiTi - chúc bạn thành công !
- Tiếp theo, rất nhiều thủ thuật mới cập nhật, bạn vui lòng xem tại đây
- Kho template blogspot Pro, xem tại đây