Tạo thực đơn dọc với hiệu ứng click chuột cho blog

Đăng bởi Admin | 18/10/13 | 0 nhận xét

Trong thiết kế web, thanh định vị là rất quan trọng bởi nó giúp khách truy cập điều hướng trang web một cách dễ dàng để tìm các nội dung quan trọng. Vì vậy, lựa chọn một thanh điều hướng tốt và phù hợp là việc làm cần thiết. Thu thuat vi tinh sẽ giới thiệu với các bạn một mẫu thực đơn dọc với cách thiết kế cực kì đơn giản. Với tiện ích này, bạn chỉ việc sao chép và dán bất kỳ mã và sửa đổi điều hướng blogger thanh cho phù hợp với nhu cầu của bạn. Tiện ích này cho phép bạn thêm các liên kết nhiều hơn nữa đến các tab có thể click được chuyển    

           

Xem Demo

Làm thế nào để tạo thực đơn dọc với hiệu ứng click chuột cho blog?

1 Tới Blogger Bảng điều khiển> Mẫu 
2. Đến Sao lưu mẫu của bạn 
3. Nhấp chuột vào Chỉnh sửa HTML 
4.Tìm  ]]> </ b: skin> và thêm mã dưới đây ngay trên nó:

/* The CSS Code for the menu starts here bloggertrix.com
#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;
display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;
white-space:nowrap;}
#bt_tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; }
#bt_tabmenu li ul li:last-child a {border-radius: 0  0 0.5em 0.5em ;}
#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bt_tabmenu  > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}
#bt_tabmenu li a  {box-shadow: 0px 3px 10px  -5px black;float:right;}
#bt_tabmenu p {position:relative;height:1.6em;}
#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bt_tabmenu p:focus:after {content:'';}
#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;}
#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}
#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
 #bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
 #bt_tabmenu ul ul a {margin-left:-9999px;}
 #bt_tabmenu ul ul li a:focus  {margin-left:19998px;}
#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bt_tabmenu ul li a:focus.fermoir  + ul {
margin-left:10001px;}
#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;
padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}
.fermoir:before {display:none;}
#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}

* Lưu ý các thông số để điều chỉnh:
- background:#333: Là viền màu đen ngoài thanh menu
- border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999; : Tạo đường viền ngoài thanh menu. (nếu không muốn đường viền này thì có thể xóa 2 đoạn code trên đi)

- #bt_tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; } : Bo góc cho menu con

- background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee : Màu của menu con ẩn bên trong.
5. Tới blogger Giao diện 
6. Bấm vào Thêm tiện ích và chọn "HTML / Javascript" 
7. Dán mã dưới đây vào nó:

<div id="bt_tabmenu">
    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>
                    <ul>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                   </ul>
                </li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>
<li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>
                    <ul>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                      <li><a href="#" tabindex="0" >List</a></li>
                   </ul>
                </li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
                <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
          <ul>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
               <li><a href="#" tabindex="0" >List</a></li>
          </ul>
    </li>
</div>

Thay thế # với các liên kết của bạn. và hồ sơ xã hội của bạn. 
8. Lưu HTML / Javascript  bạn đang thực hiện. 
Chúc bạn thành công !...
                                                                                                Nguồn: bloggertrix.com