Hướng dẫn style cho menu sử dụng các hiệu ứng của css3 rất đẹp
Dạng menu màu nâu xám cổ điển, chỉ sử dụng Css đế style nên nhìn rất đẹp mà mượt.
Các bạn có thể xem qua các bài viết đã được đăng trước đây về menu để chọn cho mình cách sử dụng ưng ý nhất nhé
- Tạo menu linh hoạt dựa vào kích cỡ trình duyệt
- Hướng dẫn tạo Arrowed sidebar menu bằng css
- Thiết kế menu dạng thương mại điện tử với Json Data
hoặc có thể áp dụng menu của bài viết này vào asp.net rất hay, nếu bạn chưa biết cách tạo menu trong asp.net từ database thì theo dõi loạt bài sau
OK. Giới thiệu đủ rồi, giờ ta bắt tay vào làm nhé.
Đầu tiên vẫn là khung HTML cho menu, thiết kế đơn giản thôi 😀
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<nav> <ul> <li> <a href="#" class="current"> <span data-text="Home">Home</span> </a> </li> <li> <a href="#"> <span data-text="About">About</span> </a> </li> <li> <a href="#"> <span data-text="Grants">Grants</span> </a> </li> <li> <a href="#"> <span data-text="Donations">Donations</span> </a> </li> <li> <a href="#"> <span data-text="Photo Gallery">Photo Gallery</span> </a> </li> <li> <a href="#"> <span data-text="My Life">My Life</span> </a> </li> <li> <a href="#"> <span data-text="Contact">Contact</span> </a> </li> </ul> </nav> |
OK, phần còn lại là CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300); nav:before, nav ul li a:hover:before, nav ul li a.current:before { display: block; content: ""; } nav { *zoom: 1; } nav:after { content: ""; display: table; clear: both; } nav, nav:before, nav ul li a:hover, nav ul li a.current, nav ul li a:hover:before, nav ul li a.current:before { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } @media screen and (-webkit-min-device-pixel-ratio: 0) { nav ul li a span { background-image: -webkit-linear-gradient(white 45%, #52592a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #fff; position: relative; } nav ul li a span:after { background: none; content: attr(data-text); left: 0; position: absolute; top: 0; z-index: -1; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); } } body { background: #222; } nav { margin: 50px auto; padding: 0 0 0 5px; width: 720px; height: 52px; border-width: 1px; border-style: solid; border-top-color: #e4e8ce; border-bottom-color: #32371a; border-left-color: #b3be78; border-right-color: #b3be78; background: #a0ae55; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(160, 174, 85, 0.95)), color-stop(100%, rgba(98, 106, 51, 0.95))), url(http://assets.nath.is/img/noise.jpg); background: -webkit-linear-gradient(top, rgba(160, 174, 85, 0.95), rgba(98, 106, 51, 0.95)), url(http://assets.nath.is/img/noise.jpg); background: -moz-linear-gradient(top, rgba(160, 174, 85, 0.95), rgba(98, 106, 51, 0.95)), url(http://assets.nath.is/img/noise.jpg); background: -o-linear-gradient(top, rgba(160, 174, 85, 0.95), rgba(98, 106, 51, 0.95)), url(http://assets.nath.is/img/noise.jpg); background: linear-gradient(top, rgba(160, 174, 85, 0.95), rgba(98, 106, 51, 0.95)), url(http://assets.nath.is/img/noise.jpg); -webkit-box-shadow: #32371a 0 -10px 40px -10px inset; -moz-box-shadow: #32371a 0 -10px 40px -10px inset; box-shadow: #32371a 0 -10px 40px -10px inset; } nav:before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 40px 0; -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 40px 0; box-shadow: rgba(0, 0, 0, 0.6) 0 0 40px 0; } nav ul { margin: 0; padding: 0; position: relative; z-index: 10; } nav ul li { padding: 0 5px; float: left; } nav ul li a { font: bold 17px "Oswald", Arial Narrow, sans-serif; color: #fff; text-decoration: none; text-transform: uppercase; padding: 13px 11px; display: block; } nav ul li a span { position: relative; z-index: 1; } nav ul li a:hover, nav ul li a.current { border-width: 1px; border-style: solid; border-top-color: #d4c0ad; border-bottom-color: #120e09; border-left-color: #a87f59; border-right-color: #a87f59; padding: 19px 11px; margin: -7px -1px -11px; text-decoration: none; position: relative; background: #876647; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(135, 102, 71, 0.95)), color-stop(100%, rgba(85, 64, 45, 0.95))), url(http://assets.nath.is/img/noise.jpg); background: -webkit-linear-gradient(top, rgba(135, 102, 71, 0.95), rgba(85, 64, 45, 0.95)), url(http://assets.nath.is/img/noise.jpg); background: -moz-linear-gradient(top, rgba(135, 102, 71, 0.95), rgba(85, 64, 45, 0.95)), url(http://assets.nath.is/img/noise.jpg); background: -o-linear-gradient(top, rgba(135, 102, 71, 0.95), rgba(85, 64, 45, 0.95)), url(http://assets.nath.is/img/noise.jpg); background: linear-gradient(top, rgba(135, 102, 71, 0.95), rgba(85, 64, 45, 0.95)), url(http://assets.nath.is/img/noise.jpg); -webkit-box-shadow: #120e09 0 -10px 40px -10px inset; -moz-box-shadow: #120e09 0 -10px 40px -10px inset; box-shadow: #120e09 0 -10px 40px -10px inset; } nav ul li a:hover:before, nav ul li a.current:before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 35px 0; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 35px 0; box-shadow: rgba(0, 0, 0, 0.5) 0 0 35px 0; } |
Trong đoạn css trên, các bạn thay đổi thông số màu ở mấy cái thuộc tính background và box-shardow cho phù hợp với màu của các bạn nhé.
