Demo Online :

Code:

http://dashboard.forumvi.com/


Demo ảnh :

Trước mình có share code thanh điều hướng nhanh rồi
nay share thêm cái nữa cho rực rỡ

Cách làm :


Bước 1 : add cái này vào css

Code:

 .popupInner h3 {
border-bottom: 1px solid #d8d8d8;
text-shadow: rgba(255,255,255,0.8) 0px 1px 0px;
background: #eee url('http://i56.servimg.com/u/f56/18/74/59/53/highli10.png') repeat-x 0 0;
padding: 8px 10px 9px;
font-size: 16px;
font-weight: 300;
}


#pun-foot h3 {
margin-top: 0px;
  text-align: center;
}
    
    .popupWrapper {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);border-radius: 5px 5px 5px 5px;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);padding: 8px;}.ipbfs_login .ipsForm_submit {margin-top: 0;}.ipbfs_login .ipsBox_notice {margin: 0;}.ipbfs_login .input_submit {font-size: 13px;}#sign_in_popup_inner {width: 680px !important;}
    .popupInner {background: white;box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);overflow-x: hidden;overflow-y: auto;width: 500px;}.ipsBox_notice {line-height: 1.6;margin-bottom: 10px;padding: 10px;}.ipsBox_notice, .ipsBox_highlight {background: none repeat scroll 0 0 #F4FCFF;border-bottom: 1px solid #CAE9F5;}.ipbfs_login_row {overflow: hidden;}.ipbfs_login_row, .gallery_pane h2, .ipsBox_container .ipsType_pagetitle, .ipsType_sectiontitle, #index_stats .status_list:first-of-type li:first-child, .ipsList_data li:first-of-type, .ipsList_withminiphoto li:first-of-type, .ipsList_withmediumphoto li:first-of-type, .category_block table tr:nth-of-type(2) td {border-top: 0 none;}.ipbfs_login_col {float: left;padding: 15px 10px;width: 314px;}.desc.lighter, .desc.lighter.blend_links a {color: #646464;}.desc, .desc.blend_links a, p.posted_info {color: #898989;font-size: 11px;}.right {float: right;}.ipbfs_login_col a:hover {text-decoration: underline;}.ipbfs_login_row label {font-size: 1.15em;}input:-moz-placeholder {color: #939393;}.ipbfs_luser {background-image: url("http://i57.servimg.com/u/f57/17/68/86/50/user1010.png") !important;background-position: 7px 50% !important;background-repeat: no-repeat !important;}.ipbfs_login_input {font-size: 14px !important;margin-top: 10px;padding: 6px 0 6px 28px !important;width: 284px;}.ipbfs_lpassword {background-image: url("http://i57.servimg.com/u/f57/17/68/86/50/key1010.png");background-position: 7px 50%;background-repeat: no-repeat;}.clearfix:after {clear: both;content: ".";display: block;height: 0;overflow: hidden;visibility: hidden;}.left {float: left;}img, .input_check, .input_radio {vertical-align: middle;}.ipsForm_center {text-align: center !important;}.ipsForm_submit {margin-top: 25px;padding: 5px 10px;text-align: right;}.clear {clear: both;}#vnc_filter_popup_close, body#ipboard_body fieldset.submit, body#ipboard_body p.submit, .ipsForm_submit {background: #f4f4f4;border-top: 1px solid #ddd;}.popupClose {position: absolute;right: 20px;top: 20px;}.clickable {cursor: pointer;}.input_submit, .ipsButton_secondary {outline: medium none;}.input_submit {background: url("http://i57.servimg.com/u/f57/17/68/86/50/highli13.png") repeat-x scroll 0 0 #646464;border-color: #3F3F3F;border-radius: 2px 2px 2px 2px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);color: #FFFFFF;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);border: 0 none;cursor: pointer;padding: 5px 11px;text-decoration: none;}.pun h2, .pun h3, .pun input, .pun select, .pun th {font-family: helvetica,arial,sans-serif !important;font-size: 1em;font-style: normal;font-variant: normal;font-weight: 400;}
    
    

Bước 2 : Add code này vào cuối Footer_end

Code:

  <div id="quicknavbs" style="display: none;">
 <div id="navigation_popup_popup" style="z-index: 10001; top: 45.5px; left: 370.5px; position: fixed;" class="popupWrapper">
 <div id="navigation_popup_inner" class="popupInner" style="width: 600px;">
 <h3>
 Thanh điều hướng nhanh
 </h3>
 <div class="fixed_inner ipsBox" style="height: 460px; max-height: 460px; overflow: auto;"><script>
    jQuery(document).ready(function(){
    jQuery('#main_abas').prepend(
    '<ul id="navebar">   <li><a>General</a></li> <li><a class="active">Forums</a></li></ul>')

    jQuery('.aba').css({
    display: 'none',
    marginTop: 0,
    borderTopWidth: 0
    })

    jQuery('#aba2').css('display', 'block');

    jQuery('a', jQuery('#navebar')).click(function() {
    var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
    jQuery(this).parents('#main_abas').children('.aba:visible').Bài viết không bị Ẩn();
    jQuery('#aba' + i).show();
    jQuery(this).parents('#navebar').find('a').removeClass('active');
    jQuery(this).addClass('active');
    })
    })
    </script>
 <div id="main_abas"><ul id="navebar">   <li><a>General</a></li> <li><a class="active">Forums</a></li></ul>
 <div id="aba1" class="aba" style="display: none; margin-top: 0px; border-top-width: 0px;">
 <div class="block_list">
 <li>
 <a href="h/search?search_id=newposts" original-title="">View New Posts </a>
 </li>
 <li>
 <a href="/viewonline" original-title="">Users Online Online</a>
 </li>
 <li>
 <a href="/memberlist" original-title="">Registered Members</a>
 </li>
 </div>
 </div>
 <div id="aba2" class="aba" style="display: block; margin-top: 0px; border-top-width: 0px;">
 <div id="category"><h2>Recent Topics System v1.0</h2><h2><span class="filterb">General Category</span></h2><h3 class="hierarchy"><a href="/f2-forum-announcements" class="forumtitle"><b><font face="" size="2px">Forum Announcements</font></b></a></h3><h3 class="hierarchy"><a href="/f10-forum-feedbacks" class="forumtitle"><b><font face="" size="2px">Forum Feedbacks</font></b></a></h3><h2><span class="filterb">Art &amp; Forumotion</span></h2><h3 class="hierarchy"><a href="/f3-tutorials-tricks" class="forumtitle"><b><font face="" size="2px">Tutorials &amp; Tricks</font></b></a></h3><h3 class="hierarchy"><a href="/f1-forumotion-skins" class="forumtitle"><b><font face="" size="2px">Forumotion Skins</font></b></a></h3><h3 class="hierarchy"><a href="/f12-graphics-design" class="forumtitle"><b><font face="" size="2px">Graphics Design</font></b></a></h3><h3 class="hierarchy"><a href="/f7-questions-problems" class="forumtitle"><b><font face="" size="2px">Questions &amp; Problems</font></b></a></h3><h2><span class="filterb">Off Topic</span></h2><h3 class="hierarchy"><a href="/f6-spam-headquarters" class="forumtitle"><b><font face="" size="2px">Spam Headquarters</font></b></a></h3><h3 class="hierarchy"><a href="/f8-members-introduction" class="forumtitle"><b><font face="" size="2px">Members Introduction</font></b></a></h3></div><script>jQuery("#category").load("/forum .main-head .page-title h2, .hierarchy");</script>
 </div>
 </div>
 </div>
 <div id="navigation_popup_close" onclick="jQuery('#quicknavbs').fadeOut();" class="popupClose clickable">
 <img src="http://i81.servimg.com/u/f81/18/07/42/17/close_11.png" alt="x">
 </div>
 </div>
 </div><style>
    div#category h2 {
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #fff;
    font-weight: bold;
    display: block;
    padding: 5px 10px;
    }
    div#category .hierarchy {
    font-weight: normal!important;
    font-size: 11px;
    text-shadow: 0px 0px 0px;
    background: none;
    display: block;
    margin-left: 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #eaeaea;
    padding: 5px 10px;
    padding-left: 15px;
    }
    </style><style>
    
    .popupInner {
    background: white;
    width: 500px;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
    }

    .popupClose {
    position: absolute;
    right: 20px;
    top: 20px;
    }
    .ipsBox, .ipsPad {
    padding: 9px;
    }
    .ipsBox {
    background: #eee;
    }
    .block_list > li {
    padding: 5px 10px;
    list-style-type: none;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #eaeaea;
    }
    div.aba {  
     margin-left: 153px;
      background:#fcfcfc;
      text-align:justify;
      min-height: 400px;
      border: 1px solid #dcdcdc!important;
      }
    #navebar {
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      border-left: 1px solid #dcdcdc;
      font:bold 12px tahoma,helvetica,arial,sans-serif;
      margin:0;
      float: left;
      }
    #navebar li {
      display: block;
      background: #f5f5f5;
      color: #808080;
      border-bottom: 1px solid #dcdcdc;
      list-style:none;
      }
    #navebar li a:hover {
      background:#f2f2f2;
      color:#808080;
      }
    #navebar li a.active {
    width: 135px;
    position: relative;
    z-index: 8000;
    border-right: 2px solid #fcfcfc;
    background: #fcfcfc;
    color: #353535;
    font-weight: bold;
    }
    #navebar li a {
      border-right: 1px solid #dcdcdc;
      font-weight: normal;
      cursor: pointer;
      background: #f5f5f5;
      color: #8d8d8d;
      padding: 10px 8px;
      outline: 0;
      color: #8d8d8d;
      -webkit-transition: background-color 0.1s ease-in-out;
      -moz-transition: background-color 0.3s ease-in-out;
      text-decoration:none;
      width:135px;
      display:block;
      }
         .filterb {
background: none repeat scroll 0 0 #31485c;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0,0,0,0.2) inset;
color: #fff;
font-size: 12px;
font-weight: 700;
opacity: 1;
padding: 4px 10px;
}
         
          
</style>
</div>
            
            
          
          
          
            
                        
                      
<div id="document_modal" class="modal" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; background-color: rgb(62, 62, 62); display: none;"></div>
<div id="sign_in_popup_popup" style="z-index: 10001; top: 25%; left: 24%; position: fixed; display: none;" class="popupWrapper">
  <div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 641px;">
    <div style="" class="ipbfs_login" id="inline_login_form">
      <form id="login" method="post" action="/login.forum"><h3 style="
    font-size: 16px;
    font-weight: bold;
">Login</h3>
        <div class="ipbfs_login_row"><div class="ipbfs_login_col">
          <span class="right desc lighter blend_links"><a href="/register" original-title="Registre-se agora!">Đăng ký!</a>
          </span>  
          <div class="ipsField_content">
            <input type="text" tabindex="1" size="30" placeholder="Your Username" name="username" class="input_text ipbfs_login_input ipbfs_luser" id="ips_username"></div></div><div class="ipbfs_login_col"><span class="right desc lighter blend_links"><a href="/profile?mode=sendpassword" original-title="Retrieve password">Quên Mật khẩu ?</a></span><div class="ipsField_content"><input type="password" tabindex="2" size="30" placeholder="Your Password" name="password" class="input_text ipbfs_login_input ipbfs_lpassword" id="ips_password"><br></div></div></div><div class="clearfix"><div class="ipbfs_login_col"><input type="checkbox" class="input_check left" value="1" name="autologin" checked="checked" id="autologin">
          <div style="padding-left: 20px;">
<label for="autologin" style="
    float: left;
"><strong style="
    font-weight: bold;
">Tự động nhớ</strong>
  <span style="display: block; padding-top: 5px;" class="desc lighter">Nhớ tài khoản</span>
  
  </label></div></div><div class="ipbfs_login_col"><input type="checkbox" class="input_check left" value="1" name="anonymous" id="anonymous">
  <div style="padding-left: 20px;">
  <label for="anonymous" style="
    float: left;
"><strong style="
    font-weight: bold;
">Đăng nhập ẩn danh</strong>

    </label></div></div></div><div class="ipsForm_submit ipsForm_center clear" style="height: 29px;"><input type="submit" name="login" value="Sign In" class="input_submit"><input name="redirect" type="hidden" value="">                   </div></form></div></div><div id="sign_in_popup_close" class="popupClose clickable"><img alt="x" src="http://i78.servimg.com/u/f78/18/17/62/92/close_10.png" onclick="show_popup('sign_in_popup_popup');"></div></div>
  <script type="text/javascript">//<![CDATA[
$(document).ready(function() {$('#user_navigation #sign_in').attr('href', '#').attr('onclick', "show_popup('sign_in_popup_popup');");/*$('#user_navigation #sign_in').click(function() {sign_in_popup();});*/});function show_popup(id) {var $oObj = $('#'+id);if ($oObj.css('display') == 'none') {$oObj.add('#document_modal').fadeIn('slow');$("input:text:eq(0):visible").focus();} else {$oObj.add('#document_modal').fadeOut('slow');} }//]]></script>


Bước 3 : Đặt code hiển thị nút Kick đăng nhập và Thanh điều hướng
Đây là 2 code ( bạn đặt chỗ nào cho phù hợp với rum bạn

Code nút đăng nhập

Code:

<a href="#" id="sign_in" original-title="" onclick="show_popup('sign_in_popup_popup');"><img src="http://i56.servimg.com/u/f56/18/74/59/53/user_l11.png" alt=""> Sign In</a>

Code thanh điều hướng

Code:

<li class="attach"><a href="#" onclick="jQuery('#quicknavbs').fadeToggle();" rel="quickNavigation" accesskey="9" id="quickNavLaunch" original-title="Quick nav" style="            "><span style="background: url(http://i57.servimg.com/u/f57/18/74/01/46/quickn10.png) no-repeat top;  display: inline-block;  height: 15px;  width: 13px;margin-top: 15px;"></span></a></li>

Ví dụ như ở đây mình đặt 2 cái nút trên như skin :

[You must be registered and logged in to see this link.]

 như hình dưới

 

Ok thế là xong ^^

thank kiu admin

uopppppppppppppppppppp