[TUT][SHARE] Code menu nhanh bên trái[✔]

[faver]

Đầu tiên xin nói trước là mình không phải là chuyên gia code, mình không có biết gì code đâu. Nhưng được cái hay mày mò tìm tòi những thứ mà mình chưa làm được. Trong quá trình đó, mình đã tìm được cách làm menu nhanh bên trái (không trượt), tốc độ load nhanh. Trên có bài hướng dẫn nhưng mình thấy hình như chưa khả thi.

Bài viết này cũng xem như là một sự đóng góp cho cộng đồng FM, cũng như thay lời cảm ơn những người bạn BTV2 và handsomevip đã hỗ trợ cho mình. Mong rằng ngọn lửa chia sẻ mãi bừng cháy trong .  ><

Demo cái coi:

Khi rê chuột vào nút "Menu nhanh" màu xanh thì menu sẽ sổ ra, muốn nó trở lại thì rê lại nút "Menu nhanh". Các bạn có thể chế biến khác chẳng hạn như nút mũi tên trái hoặc mũi tên phải để cho người đọc bấm vào để mở/tắt.



Bắt tay vào làm hen

---

Đầu tiên, copy đoạn mã sau vào overall_header

Code:


<div id="box" class="hide">
    <ul id="tab">
        <li>
            <img id="arrow" Onmouseover="toggle('box');" src="http://i59.servimg.com/u/f59/19/06/44/70/untitl14.jpg">          
          </li>      
         </ul>    
    <div id="links">
        <div id="deco">
             <div class="bt"><a href="index.php" >HOME</a></div>
            <div class="bt"><a href="tut.php" >TUTS</a></div>
            <div class="bt"><a href="about.php" >ABOUT</a></div>
            <div class="bt"><a href="contact.php" >CONTACT</a></div>
            <div class="bt"><a href="contact.php" >HELP</a></div>
        </div>
    </div>      
</div>

Tiếp theo, thêm vào CSS

Code:

/*Menu Nhanh*/
#box{
    width: 190px;
    font-size: 12px;
    line-height: 15px;
    left: -175px;
    top: 45%; /* change this value to place the menu higher or lower */
    position: fixed;
    z-index: 100;
}

#tab{
    float: right;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 99;
}

#tab li span{
    display: block;
    padding: 0 5px;
    position: relative;
}

#links{
    width: 100px;
    padding: 1px;
    float: right;
    border-right: 1px solid #B4B8BB;
}

.show, .hide{
    /* we specify the transition length for hiding and showing */
            transition: margin-left .4s ease-in;
    -webkit-transition: margin-left .4s ease-in;
}

.hide{
    margin-left:0px;
    -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity=50);
}

.show{
    margin-left:155px;
  -moz-opacity: 1;opacity: 1;filter: alpha(opacity=100);
  
}

#arrow, .bt{
    cursor: pointer;
}

.bt{
    width: 150px;
    height: 15px;
    margin: -1px;
    text-align:center;
    border:1px solid #858fa6;
    font: 10px Helvetica,Arial,sans-serif;
    background:#FFFFFF;
}

.bt a{
    line-height: 20px;
    color: #000000;
    display: block;
}

.bt:hover{
    transition: background .3s linear;
    background: #e6f5c9;
         -o-transition: background .3s linear;
       -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
}

#deco{
    width: 150px;
    float: right;
            box-shadow:0px 0px 5px #000;
       -moz-box-shadow:0px 0px 5px #000;
    -webkit-box-shadow:0px 0px 5px #000;
}

Cuối cùng, vào Modules--> 

HTML & JAVASCRIPT

• Javascript codes management
  
  

--> Creat new JavaScript --> check vào ô "In all the pages" ở mục Placement --> dán vào

Code:

function selectCode(a)
{
   // Get ID of code block
   var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
 
   // Not IE
   if (window.getSelection)
   {
      var s = window.getSelection();
      // Safari
      if (s.setBaseAndExtent)
      {
         s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
      }
      // Firefox and Opera
      else
      {
         // workaround for bug # 42885
         if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
         {
            e.innerHTML = e.innerHTML + ' ';
         }
 
         var r = document.createRange();
         r.selectNodeContents(e);
         s.removeAllRanges();
         s.addRange(r);
      }
   }
   // Some older browsers
   else if (document.getSelection)
   {
      var s = document.getSelection();
      var r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
   }
   // IE
   else if (document.selection)
   {
      var r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
   }
}
if(text){}else{ var text = 'Selecionar todos';}
jQuery(document).ready(function(){
   jQuery("dl.codebox dt").not("dl.spoiler > dt").html('Code: <a href="#" onclick="selectCode(this); return false;"><font face="verdana" color="white">----------</font>Chọn hết/Select all</a>');
});

--> Submit

Bước cuối, quan trọng nhất, hưởng thụ thành quả và Vote cho mình 

[BTV2]

Ảnh quá nhỏ, ko xem dc,có thể do tinypic resize ảnh =.=
Up ảnh sever serving tại đây nhé: http://diendan.chinhphuc.info/h54-

[faver]

mình đã chỉnh lại rồi đó

[markai30]

Cái này dùng css làm cho đơn giản. Cần chi dùng js cho nặng lại chẳng tác dụng mấy. Nhưng dù sao cũng like vì công sức của bạn.

[faver]

Cái này dùng css làm cho đơn giản. Cần chi dùng js cho nặng lại chẳng tác dụng mấy. Nhưng dù sao cũng like vì công sức của bạn. ><img src=<" alt="" title="">

Nếu chỉ làm bằng CSS thôi thì đơn giản và nhẹ quá, bạn có thể chia sẻ được không

[Sponsored content]