Sunday, July 22, 2012

Float Menu với jQuery và css

Bước 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 Bước 2. Tìm thẻ <head> và thêm vào bên dưới nó đoạn code sau

/*---------------------------------------------------- {--------} 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); } <b>ul#navigation .home a{   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRekMBxb28uw4v1OsNZAnPxQYzNu6vl6zxqCrV-Clk8myX9VjfT9rGJy4bGWj1Mshgj1Ihe2-wkSIHC6LjlzbYG-2JXEunITQ5HzHW-jx74vjkFkJIb7u0Xkjww2aFc0fSR68usf0uMQ/s1600/home.png); } ul#navigation .about a   {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWUzJvrpd-pE6DMdwy70hRInZ89Mac-_ix_xwy4ZxNamauy-sWA2ME65hAwpGRAyW13JqE0Vx2WS4VWkwNpDZWK6mIoG74Qqs1g23BpN_4p6HTXcpeBAY5mB2xERAvvQ2_koavuXX_N-I/s1600/id_card.png); } ul#navigation .search a   {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnM0K5bQ6rFUSXFvjVZPHhMdbX9ZEYV6V2jtIPLYE1-eYUuRD6nHxIoI5fmJkt-Z5t1I5kyZ_aaWdzeugYjSDs9IdsWQMsFuQvkTBC8pnawWmm7BTUCcOM071xryn2gWGGOf1jvcw8oyw/s1600/search.png); } ul#navigation .podcasts a   {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtj6sE4ICAKxKAOqYOjbntWOWe55TrDvWfcMY1wyAyxKZC0Kxt1mcgfKn27TVLTcvx3kR5OZo4PkTELGcWOu1iz2Snz8lj8Ko7089qm1tBzIDlfPz50s885vGNEvE3_e_zgM2_AL-Zx-Y/s1600/camera.png); } ul#navigation .rssfeed a  {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_xXInVS0my-mR1yyAvffuFoAxlTJxLyA2lkmaCAKI83Uyu02tN6Jgaiv5CHbUZbL898vH8i85ZqD29LjytDuxjdARXXPPLu01VuIkO9UBLNAzpqwuJi8KtOSHy0wPErJD2NStaGxSBo/s1600/rss.png); } ul#navigation .photos a   {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdGCwKfhK9c_k63ifZijNztTPlTNhTEHgxTw8lvhGI_Js3bLuQeDr71q-FdxWOBcS4_L-W3njvHBG5sWtIwx6LyMXm8xHjWrQftj3ELWCoSviqTNeyvWVU_CAtoVWe6SFxqukBESc_mTY/s1600/ipod.png); } ul#navigation .contact a  {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lJxKGXoJsJF8g2SNwm8Y5R4e_ZUnDxoNj4SVI5QLBhP8Xnqg4ctApGSgpAS-1ByyzbYpy4R4DbjtVEja0y63dy7gJ6v453QtlOplq4-Bnp-NdShnkFmc3hUyovzytwc5lqZKKnfpvzg/s1600/mail.png); }

Bạn chú ý:

ul#navigation .home a{
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRekMBxb28uw4v1OsNZAnPxQYzNu6vl6zxqCrV-Clk8myX9VjfT9rGJy4bGWj1Mshgj1Ihe2-wkSIHC6LjlzbYG-2JXEunITQ5HzHW-jx74vjkFkJIb7u0Xkjww2aFc0fSR68usf0uMQ/s1600/home.png);
}

Đó là phần hiển thị kèm theo menu. Bạn có thể tùy biến thêm hoặc bớt tùy ý. 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);
}

Bước 3: Tìm thẻ </head> và thêm đoạn js này trước nó:
Bước 4: Lưu mẫu Bước 5: Vào phần tử trang -> Thêm Widget/HTML -> Dán đoạn Code sau vào nội dung Widget

Share this post

Sunday, July 22, 2012

Float Menu với jQuery và css

1 nhận xét

Tổng lượt xem