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

» | 7 nhận xét | Thứ Sáu, 30 tháng 9, 2011
Menu for blogspot
Đâ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.


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/AVvXsEhaLwnHnsxqAyk0Fm6WnvaK6VKDtpcUioDYSy8eDwbLMnfthkAXH-6ZwA3LKUMT4AFrzsBwuQbGDHxHXgt-0xZNW1rzbOnhSgNjprwUcqGB1nyFlq9SLTr_DFY1WMu0toMuSzil86veRAk/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQp6lfu7-dgtpGvhC2oQY-M6dBuBywYCTKuWw8A6qC7quv7ELZzMrgvW1l5LAGYvaBWXyMt6mG0EDaMWXG8Uzrquhyphenhyphenplr1tBly9A8ZZ27nHclmvqAtvnUmIU-0E1RcPwCTB1vRjPPmMg4/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoC7kyzaG5-CIbIE7fzkklQDincdkIrWg_WYJJctowE3coaISDDe_HxRGb0Bu2OcqipioeJDP3lOQ2gD5d7k7aj7nMGI2dqrb3CWjdJUss4wrQVsADT_KbWKjjpboQZdRWCACBxV0PEA/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamQFKUDFcFRq1yRqxHmYj246yyTZWMODk7E-I8Rhfdq7XPl_MAomElIwoWf0y1QVxPAmx8Oi9s40dTRsjt_1AiiIc9oftH5cXkwgLPtc7x63I-kknDu9iDlduJrKO6DOu96Ftiux0q_Q/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_m1Gn8xTUBRZVKTs5q6pVzxtc-zyEAX0kLEIIg1HCxaGhd_7EULXKItEab5-y98pO-AaxgwxxnU1dS4xuE0T_hyyXUuCYm_nbxFeMP9Oz7oXWZttPD1oOa7E62_8fJ6nYnvoE0t00_mI/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdelgxuepEU-FsO3-JlyeTw4hNvh-sBc4P-33IqEXHou8LxsKQ5UlsTyi2Q2dsRkr6Jhlx1lk9lgGVLaQ6W6pu2_ybXUA6KwfgCMAmwc3N_jxb5LwH-Eu0343xXFgw65WSv09_cfHXCuo/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfm9KVIWFXF70PpK2MGtdHGBsXDMh9Ck7yfOfzGfB52-E0BM1k7K_e-fNyyNN2eZ8mCm1nMCL-f1FPYZ3urUUnq41famCn-Da7SICv0I3BaknRXYGOMwRQSPiTKNi4DgpHxQVkLXs7dyE/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

Xem bài viết khác :

7 nhận xét

Peeka
lúc 01:09 1 tháng 10, 2011 Trả lời

This tip is very smooth

Anonymous
lúc 01:45 1 tháng 10, 2011 Trả lời

Bài này đỉnh thật đó , cái menu nhìn trong suốt đã mắt :O)

Yolks
lúc 03:12 1 tháng 10, 2011 Trả lời

ok thanks two friends

me
lúc 07:36 1 tháng 10, 2011 Trả lời

Ghi nguồn nhé bác :1)

[ND]o[SKT]
lúc 23:25 1 tháng 10, 2011 Trả lời

Copy xong cho bai hoc gi em

nội thất trẻ em
lúc 22:08 23 tháng 11, 2011 Trả lời

cái menu vừa đẹp lại vừa load nhanh,rất hay,thanks

Yolks
lúc 17:04 24 tháng 12, 2011 Trả lời

top: 10px;
left: 0px;
ĐÂy là 2 lệnh để điều chỉnh

Đăng nhận xét