[Tut] Làm thanh điều hướng nhanh :X

[chupy]

Demo online :

http://www.cntt-k3.org/

Cách làm :

Cho cái này vào Footer_End

Code:

<div id="CNTTlogin1" style="display: none;">
                                    <div id="CNTTlogin-border1">
                                  <img src="http://2img.net/i/fa/empty.gif" class="closebutton" width="20px" height="20px" onclick="CNTTlogin1();">
                                    <h1>Thanh điều hướng nhanh</h1>
                                 
                                   
                                    <div class="xenOverlay"><div class="section">
   <div id="jumpMenu">
      <div class="jumpMenuColumn">
         <h3 class="primaryContent">Liên kết thường dùng</h3>
                           
         <div class="secondaryContent">
            <div class="blockLinksList">
               <ul>
                  
                  <li><a href="/">Forums</a></li>
                  <li><a href="/Members">Thành viên</a></li>
                  <li><a href="/search?search_id=newposts">Có gì mới</a></li>
               </ul>
               <ul>
               
                  <li><a href="/login/">Log in</a></li>
               
               </ul>
               <ul>
                  <li><a href="faq">Help</a></li>
               </ul>
            </div>
         </div>
      </div>
      <div class="jumpMenuColumn">
         <h3 class="primaryContent">Danh sách diễn đàn</h3>
         <div class="secondaryContent nodeList">
            <ol class="blockLinksList">
               
                  <li class="d0 ">
                     <a href="#main-category.1" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Khu vực điều hành</span>
                     </a>
                  </li>
               
                  
               
                  <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f5-forum" class=" ">
                        <span class="_depth2 depthPad">Thông báo</span>
                     </a>
                  </li>
               
                  <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f7-forum" class=" ">
                        <span class="_depth2 depthPad">Hướng dẫn sử dụng diễn đàn</span>
                     </a>
                  </li>
               
                  <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f1-forum" class=" ">
                        <span class="_depth2 depthPad">Nơi thảo luận thông tin</span>
                     </a>
                  </li>



      <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f56-forum" class=" ">
                        <span class="_depth2 depthPad">Nơi chém gió</span>
                     </a>
                  </li>
   <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f45-forum" class=" ">
                        <span class="_depth2 depthPad">Góp ý về diễn đàn</span>
                     </a>
                  </li>


               
                  
               
                  <li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Diễn Đàn Aoe</span>
                     </a>
                  </li>
               
                  <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f55-forum" class=" ">
                        <span class="_depth1 depthPad">Topic Dành cho đội Aoe Tin-K3</span>
                     </a>
                  </li>
               
                  <li class="d2 ">
                     <a href="http://www.cntt-k3.org/f54-forum" class=" ">
                        <span class="_depth1 depthPad">Diễn Dàn AOE</span>
                     </a>
                  </li>


<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Tin Học & Công Nghệ</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f11-forum" class=" ">
                        <span class="_depth1 depthPad">Thủ thuật phần mềm</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f12-forum" class=" ">
                        <span class="_depth1 depthPad">Mạng / Internet</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f13-forum" class=" ">
                        <span class="_depth1 depthPad">Hệ Điều Hành - Phần cứng</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f16-forum" class=" ">
                        <span class="_depth1 depthPad">Anti-Virus</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f52-forum" class=" ">
                        <span class="_depth1 depthPad">Những trang web hay</span>
                     </a>
                  </li>


<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Thế Giới Cntt
</span>
                     </a>
                  </li>



<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f3-forum" class=" ">
                        <span class="_depth1 depthPad">Đồ họa</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f6-forum" class=" ">
                        <span class="_depth1 depthPad">Lập trình</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f10-forum" class=" ">
                        <span class="_depth1 depthPad">Sách điện tử</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f17-forum" class=" ">
                        <span class="_depth1 depthPad">Máy tính sách tay</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f20-forum" class=" ">
                        <span class="_depth1 depthPad">Thế giới di động</span>
                     </a>
                  </li>


<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Ghost
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/forum-f59" class=" ">
                        <span class="_depth1 depthPad">Windows 7</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/forum-f103" class=" ">
                        <span class="_depth1 depthPad">Windows Xp</span>
                     </a>
                  </li>





<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Khu vực Ảnh
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f18-forum" class=" ">
                        <span class="_depth1 depthPad">Ảnh thành viên</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f19-forum" class=" ">
                        <span class="_depth1 depthPad">Ảnh tập thể lớp Tin-k3</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f21-forum" class=" ">
                        <span class="_depth1 depthPad">Tranh ảnh</span>
                     </a>
                  </li>




<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Tổng hợp về Forumotion
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f99-forum" class=" ">
                        <span class="_depth1 depthPad">Tài nguyên Forumotion</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f26-forum" class=" ">
                        <span class="_depth1 depthPad">Kho skin</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f33-forum" class=" ">
                        <span class="_depth1 depthPad">Box hình ảnh fourmotion</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f53-forum" class=" ">
                        <span class="_depth1 depthPad">Code Phpbb3</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f65-forum" class=" ">
                        <span class="_depth1 depthPad">Hosting-Domain</span>
                     </a>
                  </li>



<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Truyện Tổng Hợp
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/forum-f42/" class=" ">
                        <span class="_depth1 depthPad">Truyện cười</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/forum-f43/" class=" ">
                        <span class="_depth1 depthPad">Truyện ngắn</span>
                     </a>
                  </li>



<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Khu vực giải trí
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f8-forum" class=" ">
                        <span class="_depth1 depthPad">Game</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f46-forum" class=" ">
                        <span class="_depth1 depthPad">Vui cười</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f22-forum" class=" ">
                        <span class="_depth1 depthPad">Âm nhạc</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f62-forum" class=" ">
                        <span class="_depth1 depthPad">Tin tức hàng ngày</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f63-forum" class=" ">
                        <span class="_depth1 depthPad">Phim ảnh</span>
                     </a>
                  </li>




<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">:: -‘๑’ QUÀ TẶNG CUỘC SỐNG -‘๑’ :: &
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f9-forum" class=" ">
                        <span class="_depth1 depthPad">Quà tặng cuộc sống</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f14-forum" class=" ">
                        <span class="_depth1 depthPad">Thơ ca</span>
                     </a>
                  </li>
<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f15-forum" class=" ">
                        <span class="_depth1 depthPad">Thì thầm to nhỏ</span>
                     </a>
                  </li>




<li class="d0 ">
                     <a href="#second-category.4" class="OverlayCloser ">
                        <span class="_depth0 depthPad">Khác
</span>
                     </a>
                  </li>

<li class="d2 ">
                     <a href="http://www.cntt-k3.org/f4-forum" class=" ">
                        <span class="_depth1 depthPad">Thùng rác</span>
                     </a>
                  </li>






               
            </ol>
         
                                 
   </div></div></div>
</div></div>


<style>

a {text-decoration:none;}

a:link,a:active,a:visited {
    text-decoration: none;
    }

a:hover{
  text-decoration: none !important;
    }




._depth2 {
padding-left: 4em;
}
.xenOverlay > .section, .xenOverlay > .sectionMain {
background: none;
margin: 0;
}
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
._depth1 {
padding-left: 2em;
}

a:hover {
_text-decoration: underline;
}
li {
list-style: none;
}
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList li.kbSelect a, .blockLinksList label:hover, .blockLinksList label:focus, .blockLinksList li.kbSelect label {
text-decoration: none;
background-color: #EDEDED;
}
a[href]:hover {
text-decoration: underline;
}
.blockLinksList a, .blockLinksList label {
color: #555;
padding: 5px 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
display: block;
outline: 0 none;
}
.xenOverlay .section .heading, .xenOverlay .sectionMain .heading {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-khtml-border-radius: 0;
margin-bottom: 0;
}
.heading {
color: #434343;
}
.heading, .xenForm .formHeader {
font-weight: bold;
font-size: 11pt;
color: #434343;
background: #D7D7D7 url('http://xenfocus.com/development/styles/uniform/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin-bottom: 3px;
border-bottom: 1px solid #9B9B9B;
border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-khtml-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-top-right-radius: 5px;
}
#jumpMenu {
overflow: hidden;
zoom: 1;
}
.xenOverlay #jumpMenu .jumpMenuColumn {
float: left;
width: 337px;
}
.primaryContent {
background-color: #FDFDFD;
padding: 10px;
border-bottom: 1px solid #EDEDED;
}
.secondaryContent {
background: #F9F9F9 url('http://xenfocus.com/development/styles/uniform/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 10px;
border-bottom: 1px solid #D7D7D7;
}
.xenOverlay #jumpMenu .blockLinksList {
height: 250px;
overflow: auto;
}
.blockLinksList {
font-size: 11px;
padding: 2px;
}
#jumpMenu .blockLinksList ul:first-child, #jumpMenu .nodeList li.d0:first-child {
padding-top: 0;
border-top: none;
margin-top: 0;
}
#jumpMenu .blockLinksList ul, #jumpMenu .nodeList li.d0 {
padding-top: 5px;
border-top: 1px solid #EDEDED;
margin-top: 5px;
}
#jumpMenu .blockLinksList li {
vertical-align: bottom;
}

.blockLinksList a, .blockLinksList label {
color: #555;
padding: 5px 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
display: block;
outline: 0 none;
}

.xenOverlay #jumpMenu .jumpMenuColumn {
float: left;
width: 337px;
}

.primaryContent {
background-color: #FDFDFD;
padding: 10px;
border-bottom: 1px solid #EDEDED;
}
a:link, a:visited {
text-decoration: none;
}
a:link, a:visited {
text-decoration: none;
}

user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
</style>
                                   
                                   
                                   

</div>
       
                                         
                                          </div>
                                          <script type="text/javascript">
                                      function CNTTlogin1() {var x = document.getElementById('CNTTlogin1');  if (x.style.display == 'none') {jQuery(x).add('#CNTToverlay1').fadeIn('slow');var r = x.getElementsByTagName('form')[0].redirect;r.value = window.location.href;} else {jQuery(x).add('#CNTToverlay1').fadeOut('slow');}}jQuery(function(){ if(document.getElementById('logout')) document.getElementById('CNTTloginbtn1').style.display = 'none'; });
                                    </script>
                                         

                                         
                                         
                                         
                              <style>
#CNTToverlay1 {
background-color: #000;
filter: Alpha(opacity=70);
left: 0;
min-height: 101%;
opacity: .7;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
#CNTTlogin1 h2 {
display: inline-block;
float: right;
font-size: 11px;
position: relative;
top: -21px;
width: 120px;
}
#CNTTlogin1 .login-submit {
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
background: #333 url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/alert-overlay.png) repeat-x top;
border: 1px solid rgba(0,0,0,0.35);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
display: block;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 300;
height: 30px;
line-height: 30px;
margin: 15px auto 0;
min-width: 125px;
padding: 0 10px;
text-align: center;
text-shadow: 0 -1px 1px #000;
}

#CNTTlogin1 {
-moz-border-radius: 5px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 10px 20px;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 10px 20px;
background: #000 url(http://fcimage.net/public/style_images/imgfc/trans60.png) repeat;
border-radius: 5px;
box-shadow: rgba(0,0,0,0.5) 0 10px 20px;
color: #333;
font-family: sans-serif;
left: 23%;
padding: 8px;
position: fixed;
top: 30%;
width: 674px;
z-index: 999;
}
#CNTTlogin-border1 {
background: #fff;
padding-bottom: 2px;
}#CNTTlogin1 img.closebutton {
background: url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/close_popup.png) no-repeat;
cursor: pointer;
float: right;
height: 22px;
margin: 5px;
width: 22px;
}
#CNTTlogin1 h1 {
background: url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/maintitle.png) repeat-x top;
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 8px 10px 9px;
text-align: left;
text-shadow: 0 1px 2px #000;
}
#CNTTlogin1 form {
width: 100%;
}
#CNTTspace1 {
margin-left: 100px;
margin-top: 15px;
}
#CNTTlogin1 ul {
list-style-type: none;
}

#CNTTlogin1 ul li {
float: center;
font-size: 1.2em;
width: 50%;
}
#CNTTlogin1 li input {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #fff;
border: 1px solid #CCC;
border-radius: 3px;
padding: 4px;
}

  </style>         
                                         
                                         

                               
                              <style>
#CNTToverlay2 {
background-color: #000;
filter: Alpha(opacity=70);
left: 0;
min-height: 101%;
opacity: .7;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
#CNTTlogin1 h2 {
display: inline-block;
float: right;
font-size: 11px;
position: relative;
top: -21px;
width: 120px;
}
#CNTTlogin2 .login-submit {
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
background: #333 url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/alert-overlay.png) repeat-x top;
border: 1px solid rgba(0,0,0,0.35);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
display: block;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 300;
height: 30px;
line-height: 30px;
margin: 15px auto 0;
min-width: 125px;
padding: 0 10px;
text-align: center;
text-shadow: 0 -1px 1px #000;
}

#CNTTlogin2 {
-moz-border-radius: 5px;
-moz-box-shadow: rgba(0,0,0,0.5) 0 10px 20px;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0 10px 20px;
background: #000 url(http://fcimage.net/public/style_images/imgfc/trans60.png) repeat;
border-radius: 5px;
box-shadow: rgba(0,0,0,0.5) 0 10px 20px;
color: #333;
font-family: sans-serif;
left: 23%;
padding: 8px;
position: fixed;
top: 30%;
width: 674px;
z-index: 999;
}
#CNTTlogin-border2 {
background: #fff;
padding-bottom: 2px;
}#CNTTlogin1 img.closebutton {
background: url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/close_popup.png) no-repeat;
cursor: pointer;
float: right;
height: 22px;
margin: 5px;
width: 22px;
}
#CNTTlogin2 h1 {
background: url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/maintitle.png) repeat-x top;
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 8px 10px 9px;
text-align: left;
text-shadow: 0 1px 2px #000;
}
#CNTTlogin2 form {
width: 100%;
}
#CNTTspace2 {
margin-left: 100px;
margin-top: 15px;
}
#CNTTlogin2 ul {
list-style-type: none;
}

#CNTTlogin2 ul li {
float: center;
font-size: 1.2em;
width: 50%;
}
#CNTTlogin2 li input {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #fff;
border: 1px solid #CCC;
border-radius: 3px;
padding: 4px;
}
  .dieuhuong {
cursor: pointer;
height: 16px;
margin: 10px -4px 0;
position: relative;
vertical-align: top;
width: 16px;
float: right;
}
  </style>         
             

                                     

Tiếp theo bạn muốn đặt thanh điều hướng ở chỗ nào thì thêm code này vào chỗ bạn muốn đặt

Code:

 <div id="CNTToverlay1" onclick="CNTTlogin1()" style="display: none;"></div>
  <a onclick="CNTTlogin1();" class="dieuhuong" id="sign_in" title="Open Quick Navigation"><img src="http://www.ipbforumskins.com/skindemo/public/style_images/overlayr34x/icon_quicknav.png" alt=""></a>
   

Thế là xong ^^

nguồn : http://www.cntt-k3.org

[Rin]

so với cái last huynh up em thấy cái này nó thừa thực sự dùng nó thì ít để lại load 4r chậm thì nhiều

[chupy]

so với cái last huynh up em thấy cái này nó thừa thực sự dùng nó thì ít để lại load 4r chậm thì nhiều

có cái này cho FM nó chuyên nghiệp như mấy mã nguồn kia ấy mà ^^
ai thích thì dùng thôi
cho đẹp mắt
và dùng nó cũng ít thật

[hunghsmn]

Mình nói thật chứ không phải "mèo khen mèo dài đuôi" có nhiều bài cho chủ đề này, nhưng chưa có cái nào mình thích bằng cách của mình: Tất cả ở trên thanh menu đa cấp. Một menu dành cho gửi bài mới, một menu dành cho mở chuyên mục. Muốn gửi bài vào chuyên mục nào, chỉ cần rà chuột lên menu, click một cái là mở khung soạn thảo bài mới đúng của chuyên mục đó. Tương tự như vậy nếu muốn mở một chuyên mục cũng chỉ cần rê chuột trên menu "mở chuyên mục"
( Mình đã chia sẻ từ lâu rồi)

[chupy]

cái của bác hùng thì là tất tần tật rồi
nhưng em thì e sẽ ko dùng cái của bác vì nó hơi cổ ^^
thời buổi bây h người ta thích đẹp và lạ mắt cơ

[handsomevip007]

Cái phần code ngồi thay thủ công á?

[chupy]

Cái phần code ngồi thay thủ công á?

chuẩn bác
thay thủ công mỏi tay T_T
bác có cách nào hay hơn thì chỉ e đỡ phải thay thủ công các box

[hunghsmn]

đẹp và lạ mắt? Lạ mắt thì đúng rồi nhưng đẹp thì không! Còn tiện dụng thì càng không phải. Mình thì tiện dụng và trông phổ thông hơn

[Zero]

dùng $.get('/forum') khi click vào button đó
dòng này

Code:

document.getElementById('logout')) document.getElementById('CNTTloginbtn1').style.display = 'none';

dùng switch_user_logged_in sẽ chạy nhanh hơn.

[Sponsored content]