Làm một bộ menu Metro UI thật là mất khá nhiều thời gian. Nhưng quan trọng vẫn là đam mê. Hôm nay mình xin chia sẻ chút kinh nghiệm để làm bộ menu này. Đầu tiên mọi người xem hình tham khảo trước:
- Thứ 2 là viền sáng quanh khung.
- Thứ 3 là font chữ.
Đây là CSS của menu (copy toàn bộ CSS vào trước ]]></skin>)
Nếu bạn muốn làm nhiều icon trên một hàng hơn thì hãy tính toán một cách cẩn thận hơn :D.
Đây là html cho menu (đặt menu vị trí trong body bạn muốn)
Ở thẻ html này bạn chỉ cần để ý đến đoạn Gallery (nếu bạn muốn icon là một slider như icon đầu tiên)
Còn nếu không muốn bạn xóa đi (phần mình bôi đen trong hình chính là Slider), thay toàn bộ icon như bình thường. Icon rỗng (chính là icon 2 nhưng nó không có vì Icon đầu tiên có Width = 2*icons) nên icon đầu tiên sẽ thay thế 2 icon nhỏ.
Javascript cho Slider
Nếu bạn không dùng icon slider thì không cần quan tâm tới phần này.
Đây là toàn bộ Script và CSS của Slider. Bạn nên để sau <head> . Lưu ý: nếu trên máy bạn đã có jquery.min thì bỏ đoạn này nhé <script src="http://myjectpro.googlecode.com/files/jquery-1.3.1.min.js"></script>.
Bạn xem demo Silder Metro ở đây : DEMO SLIDER METRO
Chúc bạn làm thành công. Nếu bạn có bất cứ thắc mắc nào hãy tham gia Erhay - Hỏi đáp mình sẽ giải đáp giúp bạn. Hoặc bạn có thể comment trực tiếp tại đây.
(Vui lòng để lại nguồn www.erhay.com khi bạn phát hành thông tin từ trang này. Xin cảm ơn)Nguồn : chúng tôi sưu tầm từ nhiều nguồn
View DEMO: ERHAY MENU METRO
Nếu bạn thấy nó đẹp vậy tại sao không bắt đầu đọc tiếp nhỉ :D.
Trước hết để làm được menu này, mọi người cần hiểu qua một số thuộc tính cơ bản của thẻ ul, li
- Chúng ta bắt đầu với phần thiết kế trước (sử dụng Pts)
- Thứ 2 là viền sáng quanh khung.
- Thứ 3 là font chữ.
Tạo ICON bằng Photoshop
Để biết chính xác được mã màu mà Metro UI phối cho phù hợp. Bạn nên tham khảo bộ mã màu từ màn hình Start trên Windows 8. Hình dưới là kinh nghiệm làm icon của mình. Mọi người tham khảo:
Chúng ta sẽ lấy 2 mã màu (Mã màu 1, Mã màu 2) trên Menu chuẩn của màn hình Start Windows 8.
1 icon sẽ có tên icon, biểu tượng icon, màu và viền(border).
Tạo biểu tượng Icon mọi người có thể lấy các icon đặc trưng trên mạng, hoặc bằng phần mềm AAAlogo (mình sẽ giới thiệu sau). Biểu tượng Icon màu trắng.
Khi đã lấy được 2 mã màu bạn sử dụng Gradient Tool để tạo màu Gradient cho Icon của mình
Tiếp theo là tạo border(ở hình bạn sẽ không nhìn rõ border - thực ra là có border). Bạn Ctrl + A để chọn toàn bộ vùng chọn. Nhấn D, sau đó nhấn X để lấy màu trắng.
Bạn tham khảo hình dưới để lấy border theo các bước:
Sau khi ICON đã tạo xong bạn lưu icon dưới định dạng gif cho nhẹ nhé. (khoảng hơn 1kb nên bạn yên tâm là web của bạn vẫn nhanh bình thường :D)
- Công việc tiếp theo của chúng ta là Tạo khung menu bằng thẻ ul,li
Đây là CSS của menu (copy toàn bộ CSS vào trước ]]></skin>)
<!-- Phần menu Grid -->Bạn để ý trong CSS, .menu_grid{width:320px;} để cho tối đa 3 icon trên một hàng (vì 1 icon chiếm 95px, => 4 icon * 95px + khoảng cách giữa các icon > Width của menu_grid > 3 icon * 95px + khoảng cách giữa các icon). 320px giúp giới hạn 3 icons.
<!-- Menu Metro slide -->
.clear {
clear:both
}
#gallery {
position:relative;
height:96px;
float:left;
z-index: 0;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
z-index: 0;
}
#gallery a.show {
z-index:500;
}
.menu_grid
{
margin:0 auto;
text-align: center;
color: White;
margin: 0 auto;
width: 320px;
height:250px;
background:url();
padding-top:15px;
padding-left:10px;
}
.menu_grid ul
{ text-align:center;
list-style: none;
}
.menu_grid ul li a:hover
{
background:#8ed3e7;
width:98px;
height:94px;
cursor:default;
padding:0px 0px 1px 0px;
}
#sortable
{
list-style-type: none;
margin: 0;
padding: 0;
width: 320px;
}
#sortable li
{
margin: 2px 4px 3px 2px;
float: left;
width: 95px;
height: 97px;
text-align: center;
line-height:96px;
}
#sortable li span { position: absolute; margin-left: -1.3em; }
Nếu bạn muốn làm nhiều icon trên một hàng hơn thì hãy tính toán một cách cẩn thận hơn :D.
Đây là html cho menu (đặt menu vị trí trong body bạn muốn)
<div class='menu_grid'>
<ul id='sortable'>
<li class='ui-state-default'>
<div id='gallery'>
<a class='show' href='#'>
<img alt='Flowing Rock' height='96' rel='' src='https://lh5.googleusercontent.com/-1TaqXNcFvgE/UJnweKs6cOI/AAAAAAAAAc4/CMc59rp727w/s197/windows8.gif' title='' width='197'/>
</a><a href='#'>
<img alt='Grass Blades' height='96' rel='' src='https://lh5.googleusercontent.com/-gU0FTWlcUBQ/UJnwbOPMXpI/AAAAAAAAAcM/y6Cx0UdPECw/s197/android.gif' title='' width='197'/>
</a><a href='#'>
<img alt='Ladybug' height='96' rel='' src='https://lh3.googleusercontent.com/-wQ4f4HfhbBw/UJnyBYSXhxI/AAAAAAAAAdo/a1NP7xthBmM/s197/NokiaS40.gif' title='' width='197'/>
</a>
</div>
</li>
<li class='ui-state-default'/>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh4.googleusercontent.com/-QHqJ2PuyHoQ/UJnwbGsR58I/AAAAAAAAAcE/5tu0JBwPT5w/s96/blogger.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh6.googleusercontent.com/-24OwE4ZwAFc/UJnwc0YywLI/AAAAAAAAAck/xqy_iZTgmNo/s96/hotienganh.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh4.googleusercontent.com/-cn0fm-iuhKw/UJnwdwsKVxI/AAAAAAAAAcw/7x9F5aMwR3M/s96/truyenhay.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh6.googleusercontent.com/-rqtwhmocTt4/UJnwdPDrOcI/AAAAAAAAAco/wRU_Pw7iAMg/s96/laptrinh.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh6.googleusercontent.com/-JdSlOCaNn8Q/UJnwcF8TqQI/AAAAAAAAAcU/-z9ESanHu20/s96/download.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh6.googleusercontent.com/-7oU8eNlfvyg/UJnwcSz4W1I/AAAAAAAAAcc/BZD9vVmVa9w/s96/giadinh.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh6.googleusercontent.com/-Mq32clQEwz8/UJnwb4k-yAI/AAAAAAAAAcQ/7o-ryKfsafo/s96/blogvaban.gif'/></a></li>
<li class='ui-state-default'><a href='http://www.Erhay.com/'><img src='https://lh6.googleusercontent.com/-zii1Qc5lY0k/UJnwd7u48WI/AAAAAAAAAc0/f2h3w8QPQ9k/s197/tinhyeu.gif'/></a></li>
<li class='ui-state-default'/>
</ul>
</div>
Ở thẻ html này bạn chỉ cần để ý đến đoạn Gallery (nếu bạn muốn icon là một slider như icon đầu tiên)
Còn nếu không muốn bạn xóa đi (phần mình bôi đen trong hình chính là Slider), thay toàn bộ icon như bình thường. Icon rỗng (chính là icon 2 nhưng nó không có vì Icon đầu tiên có Width = 2*icons) nên icon đầu tiên sẽ thay thế 2 icon nhỏ.
Javascript cho Slider
Nếu bạn không dùng icon slider thì không cần quan tâm tới phần này.
Đây là toàn bộ Script và CSS của Slider. Bạn nên để sau <head> . Lưu ý: nếu trên máy bạn đã có jquery.min thì bỏ đoạn này nhé <script src="http://myjectpro.googlecode.com/files/jquery-1.3.1.min.js"></script>.
<link href="http://myjectpro.googlecode.com/files/slide.css" rel="stylesheet" type="text/css" />
<script src="http://myjectpro.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script src="http://myjectpro.googlecode.com/files/slide1.js"></script>
Bạn xem demo Silder Metro ở đây : DEMO SLIDER METRO
Chúc bạn làm thành công. Nếu bạn có bất cứ thắc mắc nào hãy tham gia Erhay - Hỏi đáp mình sẽ giải đáp giúp bạn. Hoặc bạn có thể comment trực tiếp tại đây.
(Vui lòng để lại nguồn www.erhay.com khi bạn phát hành thông tin từ trang này. Xin cảm ơn)
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét