Menu nằm dọc blog với jQuery và css

Đây là một thủ thuật về cách tạo 1 danh mục với jQuery và css.

Danh mục này được cố định trên blog và nó có thể ẩn hiện một cách nhẹ nhàng với css.

Demo

Có thể nói đây là 1 menu trong suốt đẹp nhất từ trước tới giờ mà Yolks từ thấy và từng được xem.

1.Dăng nhập vào tài khoản --> bảng điều khiển --> Thiết kế --> Chỉnh sửa html

2.Thêm css:

/*----------------------------------------------------
{--------} Menu navigation {--------}
----------------------------------------------------*/
ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 10px;
  left: 0px;
  list-style: none;
  z-index:9999;
}
ul#navigation li {
  width: 100px;
}
ul#navigation li a {
  display: block;
  margin-left: -2px;
  width: 100px;
  height: 70px;  
  background-color:#CFCFCF;
  background-repeat:no-repeat;
  background-position:center center;
  border:1px solid #AFAFAF;
  -moz-border-radius:0px 10px 10px 0px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-top-right-radius: 10px;
  /*-moz-box-shadow: 0px 4px 3px #000;
  -webkit-box-shadow: 0px 4px 3px #000;
  */
  opacity: 0.8;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjAZRJShxl_m7gxparvBJzczeCbiMk49yNn6ydBRFsfJl2P6nNj_Sz2AKNT3_JTx-ix_pXqsvxSKMDrdUPCh6T3Vymv9NjyeOrFRWonfOvchvs1zJkbLuag0k_N4pYPeTaBMKpPtkMWg/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik08m1FeUI3NoyD936KTS5SWaaIyWoGQEXcG_TTH5V7f1zI5fJlxnCRpr9vLKL0-FyBvUqp-TyNd_LMju9b-OGa0GXPf2yRylJG_1FxYRjv-7slOPxxq8SXL-xo1w0bvswlwGFIeriDfw/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp6Iye-9N4t3zjrKKzHTtNZoVQRR7-ewRU81jjNFDBF7-wAUmz9hC60XRMfcbOBW92gIg7yGeiXIomEeaINOkZ3V7gKDkmkuZ1V0CNPHtt9V8uChvRP-fE8qIay0pp5R-En5GWvV-kMpE/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7m5U8RBgQMuskPtGd6VdrE3OJvEQd_seI-yB1sxll-R6qCAHWdlJ2vz_fs_zHUGEOGlKFLvchjk8afixlqJ0i7M7tlpryYPVpoOHSFfyyW97KWtiT-sze3JicMQVUTwczLPC7my8Jjfk/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEwz4VWjNk75jTmyINLN8EnV6IdMfUf6kJuM3EJqYMiMhbioQsrCI7pXw9c02K4rVyNiXnVJJGqf87QO1kpuXeEfqshRPW2m7klY73RXlpAlp1VXl2iWO5I_4R04BWE0PBU7ae0uOirk/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEkHxbAFIxopQUW0iIod0fI7KVhbgzkx_lx8oIGtZraYZI0K4nVHcOseEIQJDyGo_0DZAcVcXIVl32zJWl8v5ALJQJ2Lri5egRqZKGFgHlFbJY9XGBLk8IeH6Sgdg1ZyGqe3037lkObLo/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFbl8k7d1O37tW6AM3_3MffQHwLzudWHqejoIWMslL7L2C0_9O0YycM0G3lWUp2XEpDDdUOP0jlbVEz9GIq54UvTYy1NW-5z3Ka6RPT61kf6VZsBbmyIKuwzyXDeELaQSkgVDGvASesz8/s1600/mail.png);
}

Những cái mà mình chú thích là màu xanh thì mấy bạn thấy nó sẽ liên quan đến các hình ảnh hiển thị trên menu. VD: bạn muốn làm 1 cái hình thông báo chẳng hạn thì đoạn mã css như sau:

ul#navigation .thongbao a  {
  background-image: url(link ảnh);
}

3.Thêm js:
Tìm thẻ </head> và thêm đoạn js này trước nó:

<script type="text/javascript">
      $(function() {
        $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

        $('#navigation > li').hover(
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
          },
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
          }
        );
      });
    </script>

4.Chèn html:
tìm </body> và chèn trước nó đoạn code:

<ul id='navigation'>
      <li class='home'><a href=''><span>Home</span></a></li>
      <li class='about'><a href='http://www.vngreenzone.com'><span>About</span></a></li>
      <li class='search'><a href='vngreenzone.com'><span>Search</span></a></li>
      <li class='photos'><a href='http://www.vngreenzone.com'><span>Photos</span></a></li>
      <li class='rssfeed'><a href='http://www.vngreenzone.com'><span>Rss Feed</span></a></li>
      <li class='podcasts'><a href='http://www.vngreenzone.com'><span>Podcasts</span></a></li>
      <li class='contact'><a href='http://www.vngreenzone.com'><span>Contact</span></a></li>
</ul>

Nếu bạn muốn thêm 1 thẻ thông báo với đoạn code css mà Yolks nói thì như thế này

<li class='thongbao'><a href=''><span>Thông báo</span></a></li>

Nguồn : Tympanus