Menu dọc ẩn hiện khi Click chuột cho Thiết kế Website/Blogspot

Tweet

Giới thiệu cho các Fan ThaiAiTi.com thêm 1 mẫu Menu dọc cực hay, tốc độ load khá nhanh, được ứng dụng khi bạn có 1 List danh sách các chuyên mục, điều đó làm tốn diện tích của Website. Khi bạn áp dụng thủ thuật này, bạn sẽ tiết kiệm được khá nhiều khoảng trống cho trang Web/Blogspot của bạn. Bằng việc ẩn hiện thêm List danh sách 1 cách tự động và rất mượt. Bạn có thể trải nghiệm và xem Demo tại đây





Cách thực hiện cũng khá đơn giản, bạn chỉ cần chèn đoạn code sau vào nơi cần hiển thị Menu:
<div class='slidertop-phai1a'>

<div class="span4 "><style>.span4 {  width: 229px;margin-left: 0px;}div.menu_l ul li a {color: #0088cc;font: 13px arial;}/* /Block related products */.menu_l{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBGDc72kSC9omP4QmMf1vyNhTAa9D72cSId3fjT_X65uMnVDDd9HZCrBKg0_dlHMYFzxTqpbr_AVa460M2DTnRkiAdK4b_sxsvKKTag8IVAoIZOsaINQlnXoWTkPrwGaOO54FzfAW_p4E/s0/top_dieuhoa.png) no-repeat; background-color:#4AC5F4;     height: 241px;    overflow: hidden;    padding-top: 57px;    width: 239px; }.menu_l .level-0{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9xywF19Gi8IrfV4DYh_QTU_yQ3HF4WEVd80yrCAf-K_SOjmPwGcRccVEjomV0ag4yLfpu-rNcijJFVEgApkwLbmTflwUsoQtYe8yujq8RFi93q1dvEPa65SKIL7HOXkzl22LJBz-L7F6/s0/menu_li.png) no-repeat;    height: 25px;    margin-left: 3px;    padding-left: 20px;    padding-top: 5px !important;}.menu_l .text-links { margin-bottom:2px;}</style>                    <div class=" menu_l">        
    <ul class="text-links ">                    <li class="level-0">                <a href="/may-lanh-lg/">Máy lạnh LG</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-daikin/">Máy lạnh Daikin</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-panasonic/">Máy lạnh Panasonic</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-toshiba/">Máy lạnh Toshiba</a>                             </li>                    <li class="level-0">                <a href="http://thanhtuan.com.vn/may-lanh-reetech/">Máy lạnh Reetech</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-general/">Máy lạnh General</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-mitsubishi-heavy/">Máy lạnh Mitsubishi Heavy</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-mitsubishi-electric/">Máy lạnh Mitsubishi Electric</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-carrier/">Máy lạnh Carrier</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-funiki/">Máy  lạnh Funiki</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-trane/">Máy lạnh Trane</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-midea/">Máy lạnh Midea</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-nagakawa/">Máy lạnh Nagakawa</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-fujitsu/">Máy lạnh Fujitsu</a>                             </li>            </ul>
    </div><div class="wysiwyg-content"><p style="margin: 0; padding: 0;"> <img style="cursor: pointer;" onclick="menuzoom()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQ7DcD48Gy7mCO-Llpezs3m1Y1sxU9VECxoG8s6ctMFJJ3pYvA7meanfNTrGS3jC-rgNnXrEz7ik6Bm7mv-hTdvhLwkZHdvdbOCr9h_X-58bUrWYm09i4nqEG9Y3DVWO1zOt5lXY-R38h/s0/menu_bottom.png" alt=""/></p><script type="text/javascript">// <![CDATA[function menuzoom(){if($('.menu_l').height()<410) $('.menu_l').height("420px");else  $('.menu_l').height("241px");}// ]]></script></div>            </div>
</div>
Chúc bạn thực hiên thành công, nếu có gì thắc mắc và không thực hiện được, bạn vui lòng để lại Comment phía dưới. ThaiAiTi và mọi người sẽ cùng giúp bạn.