CSS 3-ийг дэмждэг интернэт хөтөчүүд: Safari, Google Chrome, Firefox 4
Эхний арга
HTML код
Эхлээд сайтийнхаа эх HTML дотор доорх кодийг хийнэ.<ul id="menu"> <li><a href="#">Нүүр хуудас</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Чаат</a></li> <li><a href="#">Бидний тухай</a></li> <li><a href="#">Холбоо барих</a></li> </ul>
Арийн Зураг
Мэнюгийнхаа эффектийг оруулхийн тулд энэ зураг хэрэгтэй.CSS код
Доорх кодийг сайтийнхаа CSS дотор хуулж хийгээрэй. CSS-ийг мэддэг чаддаг хүмүүс нь кодийг өөрийнхөө хүслээр засна биз.#menu li { display: inline; list-style: none; padding: 0; } #menu li a { border: 1px solid white; padding: 15px 20px 15px 20px; text-decoration: none; color:black; margin-left: -5px; /* Энэ бол арийн зураг */ background-image: url('image.jpg'); background-position: left; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; }#menu li a:hover { color: white; background-position:right; }
Хоёрдох арга
Код
Доорх кодийг сайтийнхаа HTML дотор, <header> tag дотор хуулж хийнэ.Доорх кодийг өөрийнхөө хүссэнээр засаад мэнюгаа хийх газраа хуулж хийнэ.
<style type="text/css"> body { padding: 0; margin: 0; background: #D3D4C0; font-size: 14px; font-family: Arial, sans-serif; text-align: center; } #wrap { width: 970px; margin-left: auto; margin-right: auto; } /* Menu Start Here */ #menu li { display: inline; list-style: none; padding: 0; } #menu li a { border: 1px solid white; padding: 15px 20px 15px 20px; text-decoration: none; color:black; margin-left: -5px; /* This is the background used for the animation */ background-image: url('http://www.admixweb.com/wp-content/uploads/2010/03/image.jpg'); /* Align the image position to the left of the a */ background-position: left; -webkit-transition: all 0.8s ease-in-out; /* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.8s ease-in-out; /* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.8s ease-in-out; } #menu li a:hover { color: white; /* Align the image position of the background to the right*/ background-position:right; } </style>
За ингээд боллоо. Ямар нэгэн асуудал гарах юм бол сэтгэгдэл бичээд орхиоорой.<ul id="menu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> </li> <li> <a href="#">Services</a> </li><li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul>
No comments:
Post a Comment