| Menu Icon thường được sử dụng nhiều trong khi thiết kế thanh navigation cho website. Thiết kế một menu icon sẽ làm cho website của chúng ta đẹp hơn, khoa học và hiện đại hơn rất nhiều. Vậy làm sao để thiết kế được một menu icon? Hôm nay, mình cùng các bạn sẽ tìm hiểu nhé. Show
 Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Menu Icon là một biểu tượng nhỏ, thường dùng trong thiết kế responsive. Ví dụ khi bạn vào website freetuts.net thì sẽ thấy phần menu rất là nhiều, nên khi hiển thị trên điện thoại ta phải ẩn nó đi và gom gọn vào một biểu tượng nhỏ và ta gọi biển tượng đó là menu icon. Khi người dùng click vào icon này thì menu sẽ được xổ xuống hoặc trược ngang (tùy vào giao diện mỗi web khác nhau). Dưới đây là một ví dụ về một menu icon: Bài viết này được đăng tại [free tuts .net] Bây giờ mình cùng các bạn đi vào nghiên cứu chi tiết để thiết kế ra một menu icon nhé. Menu icon tĩnhMình gọi là menu icon tĩnh vì khi mình thực hiện click vào cái icon nó không thay đổi giao diện. HTML Đầu tiên bạn viết HTML vào file HTML nhé: HTML <p>Ví dụ về menu icon:</p> <div></div> <div></div> <div></div> Ở đây mình thiết kế 3 thẻ div thương ứng với 3 dấu gạch ngang của menu icon. CSS Sau đó, bạn thiết lập css cho các thẻ div này. Dưới đây là css của mình, bạn có thể tham khảo làm tương tự, bạn có thể thay đổi màu hay kích thước của menu icon tùy theo ý mình div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}Thuộc tính width và height là hiển thị chiều cao vào chiều rộng của từng thanh. Thiết lập Kết quả: Menu icon độngGọi là động bởi vì khi mình click vào icon menu đó nó sẽ chuyển sang một hình khác. HTML Cũng tương tự nhé phần trên. Đầu tiên bạn cũng nhập mã HTML vào file HTML nhé. HTML <p>Click vào Menu Icon để thấy sự thay đổi</p> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> CSS Tiếp theo là css gợi ý của mình. CSS .container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}Javascript Vì menu icon có một chút biến đổi nên phần này các bạn thêm cho mình một đoạn mã Javascript sau đây nhé. Javascript RUN function myFunction(x) {
x.classList.toggle("change");
}Mình tạo thêm một thẻ div có class là container, nó có chứ năng bao các div bên trong(các div này là các thanh ngang của menu icon). Thẻ này được sử dụng để khi người dùng di chuột và click vào menu icon thì nó sẽ thực hiện hàm myFunction() trong javascript để thêm tên lớp mới vào đó, điều này sẽ làm thay đổi các thanh ngang trong menu icon: thanh đầu và thanh cuối cùng được chuyển đổi và xoay thành chữ X, thanh ở giữa mờ dần và biến mất. Giờ thì "run" để kiểm tra thành quả của mình nhé! Kết quả: Lời kếtViệc tạo được một menu icon thật không quá khó phải không các bạn. Một hình menu icon nhỏ thôi nhưng cũng làm trang web của chúng ta trở nên khoa học và đẹp hơn. Chúc các bạn thành công nhé! Nguồn: https://www.w3schools.com/howto/howto_css_menu_icon.asp Để thu hút và tạo hình ảnh ghi nhớ về thương hiệu trong tâm trí người dùng khi truy cập vào một website thì hình ảnh Logo xuất hiện tại nhiều nơi là một lợi thế rất lớn. Favicon là một trong những yếu tố giúp bạn thực hiện được điều đó. Favicon cho website là gì?Định nghĩa về favicon websiteVị trí của Favicon trên Tab trình duyệt Favicon được ghép từ hai chữ là “favourite” và “icon”, có nghĩa là biểu tượng và sự yêu thích. Tuy nhiên, ý nghĩa của favicon trong thiết kế trang web là mang tính biểu tượng cho website doanh nghiệp. Nếu logo đại diện cho thương hiệu thì favicon cũng vậy. Đây là một dạng logo được rút gọn và đơn giản hoá. Vị trí hiển thị của favicon nằm ở góc trái của tab. Vì kích thước nhỏ như vậy nên favicon càng đơn giản, dễ nhận diện sẽ giúp người dùng ghi nhớ được website của doanh nghiệp. Tại sao website của bạn cần favicon?Trong quá trình xây dựng trang web, xây dựng thương hiệu, có thể nói favicon chiếm một công đoạn rất nhỏ trong quá trình ấy. Nhưng tại sao khi trang web của doanh nghiệp sở hữu favicon sẽ tốt hơn là để biểu tượng trên tab trống hay sử dụng biểu tượng mặc định?
Như vậy, chỉ với một biểu tượng nhỏ trên góc trái của thanh tab, favicon mang lại nhiều lợi ích cho website doanh nghiệp hơn là bạn nghĩ. Cần đáp ứng những gì để tạo ra favicon chuẩn?Bởi ngày nay người dùng lướt web bằng nhiều trình duyệt cũng như là trên nhiều thiết bị khác nhau. Vì thế khi thiết kế favicon bạn cần đảm bảo chúng hiển thị đúng trên tất cả những trường hợp này. Chỉ cần ghi nhớ những thông tin sau là có thể đảm bảo hầu hết các favicon sẽ được hiển thị chuẩn.
Đó là một số thông tin tổng quan về favicon, sau đây bài viết sẽ hướng dẫn cho các bạn cách xây dựng một favicon hiệu quả như thế nào. Cách tạo favicon cho website đơn giảnPhương pháp tạo favicon thủ công bằng phần mềmĐể làm favicon thủ công đòi hỏi bạn cần biết về photoshop một chút cũng như là kỹ năng design. Các bạn có thể sử dụng bất kỳ phần mềm nào mà mình quen thuộc như Adobe Photoshop, Adobe Illustrator, Lightroom hay thậm chí là Paint. Mặt khác, có thể tự sử dụng file logo vốn có của mình. Những gì bạn cần chuẩn bị là một hình ảnh hình vuông, kích thước 32px hoặc 256px. Sau đó mọi thiết kế của bạn nên được gói gọn vào trong hình vuông này. Hãy lưu file favicon mà bạn thiết kế ở đuôi .png hoặc .gif như đã hướng dẫn ở trên. Ngoài ra, tuỳ vào nhà cung cấp hosting cho trang web của bạn mà việc đưa file favicon lên sẽ bắt buộc đổi sang đuôi .ico. Trong trường hợp đó, bạn có thể vào trang web convertico.com hay favicon-generator.com để chuyển sang đuôi .ico. Các thao tác rất đơn giản. Các trang web trực tuyến hỗ trợ tạo favicon miễn phíMột cách nữa để tạo ra favicon ấn tượng mà không cần kỹ năng photoshop hay thiết kế là sử dụng những công cụ trực tuyến miễn phí. Đây là những công cụ hỗ trợ bạn tạo ra các favicon bằng những layout và biểu tượng có sẵn, việc bạn cần làm là ghép chúng lại với nhau. 1. Favicon.ioCông cụ tạo favicon website Bên cạnh đổi file thiết kế của bạn sang đuôi .ico thì trang web Favicon.io còn hỗ trợ người dùng tạo favicon trực tuyến. Đây là tính năng mà các bạn có thể tận dụng. Tuy nhiên có lẽ bạn sẽ cần nhiều thời gian để làm quen với công cụ này nếu chưa bao giờ sử dụng qua. 2. Favicon.ccFavicon.cc sở hữu nhiều tính năng hỗ trợ Favicon.cc có nhiều tính năng hỗ trợ bạn hơn. Điểm đặc biệt ở công cụ này là nó có thể giúp bạn tạo ra favicon hoạt ảnh, tính năng trong suốt. 3. GenfaviconGiao diện Genfavicon Đây là công cụ thân thiện với người dùng bởi giao diện dễ nắm bắt. Tuy vậy thì trang web này cũng còn một số hạn chế. Genfavicon không hỗ trợ người dùng tạo ra favicon ngay từ đầu mà chỉ chỉnh sửa lại từ hình ảnh có sẵn. 4. Favic-O-MaticGiao diện Favic-O-Matic Favic-O-Matic là công cụ vô cùng tiện lợi và có nhiều tính năng tích hợp để bạn sử dụng. Bên cạnh giúp bạn tạo một favicon, công cụ này có thể kiểm tra xem favicon của bạn có đạt chuẩn chưa và cấp mã HTML cho các favicon mà bạn tạo. 5. Real Favicon GeneratorGiao diện Real Favicon Generator Tương tự như Favic-O-Matic, Real Favicon Generator có nhiều tính năng tích hợp. Ngoài ra, nó còn giúp bạn xem được demo của favicon mà mình tạo ra để bạn có thể chỉnh sửa tùy vào từng trình duyệt hay hệ điều hành. Cách đưa favicon lên websiteSau khi đã tạo ra favicon, để đưa được lên website của mình bạn cần liên hệ với nhà cung cấp hosting để hiểu rõ hơn quy trình thực hiện. Mỗi nhà cung cấp trang web sẽ có sự khác nhau nên sẽ không thể đưa ra một quy trình chung cho việc này. Tuy nhiên, bạn có thể nắm bắt một vài điểm như sau trong quá trình tải file favicon lên trang web. Đó là favicon sẽ được đặt ngang tên miền của website. Nếu bạn muốn thay đổi vị trí cần sự tư vấn của developer trong vấn đề này. Việc này sẽ liên quan đến sự thay đổi của mã code trong header, vì vậy đòi hỏi bạn cần kiến thức về nó. Trong trường hợp bạn sử dụng nền tảng WordPress để làm website thì có thể tham khảo các bước sau đây trong việc thay đổi favicon. Những cách tạo Favicon trong WordPressWordPress hiện đang là nền tảng xây dựng website miễn phí được nhiều người Việt Nam sử dụng. Nền tảng này cho phép người dùng tự quản lý và xây dựng trang web riêng. Vì thế việc tạo một favicon trong WordPress cũng khá đơn giản và nếu bạn đang sử dụng nền tảng này, bạn cũng có thể thực hiện điều đó. 1. Tính năng thay đổi có sẵn của WordPressCách thứ nhất là bạn có thể thay đổi favicon bằng tính năng thay đổi của WordPress dành cho admin:
Sau 6 bước trên bạn có thể vào giao diện trang web chính để xem thử. 2. Sử dụng Plugin để thêm Favicon cho WordPressPlugin có thể hỗ trợ để thêm favicon vào Website WordPress cho bạn là Real Favicon Generator. Công cụ này đã được giới thiệu phía trên và nó có tính năng hỗ trợ kết nối với WordPress. Đây là những bước đơn giản để thực hiện bằng công cụ này:
Sau khi kết thúc bước 8, bạn sẽ được điều hướng trở lại giao diện Bảng điều khiển của admin. Lúc này sẽ nhận được thông báo cài đặt thành công. 3. Thêm Favicon thủ công bằng cách tạo codeMột cách nữa để bạn tham khảo để đưa favicon lên WordPress, đó là tạo code. Cách này đòi hỏi bạn cần hiểu biết về code một ít.
Đó là toàn bộ thông tin cần biết về favicon website cũng như kinh nghiệm về cách xây dựng chúng. Favicon là một khái niệm quen thuộc trong xây dựng web. Tuy chỉ chiếm một phần nhỏ nhưng đem lại nhiều giá trị khác cho website. Hiện nay khi các doanh nghiệp tiến hành xây dựng thương hiệu thì mọi yếu tố dù nhỏ nhất như favicon của website cũng cần được quan tâm. Tạo một favicon cho website rất nhanh và dễ dàng nhưng lại đem đến nhiều lợi ích về mặt thương hiệu, hình ảnh của doanh nghiệp. |
