CSS và JavaScript là hai thành tố không thể thiếu với bất kì một website nào, cũng như đối với các nhà thiết kế và phát triển web. Đôi lúc, chúng tạo nên một số rắc rối về mặt kĩ thuật trong một vài vấn đề.

Nhưng điều tốt là với sự phát triển mạnh mẽ của Internet trong thời đại ngày nay, các nhà thiết kế và phát triển web luôn tìm ra được giải pháp và thủ thuật cho các rắc rối này, và chia sẻ với những người khác. Bài viết này tổng hợp 45 thủ thuật giúp bạn giải quyết nhanh chóng các rắc rối CSS, JavaScript thường gặp. Nếu biết nhiều hơn, bạn có thể chia sẻ với chúng tôi tại đây.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

CSS Navigation Menus

CSS 3D Meninas
"I've took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.

Sproing! - Make An Elastic Thumbnail Menu
"In an ongoing attempt to offer alternative methods to spruce up menus, I've pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.

How to Create Simple and Effective Sub Navs with Definition Lists
"When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we're going to share with you a fast, lightweight method for how we'll use CSS to do it."

Sticky SideNav Layout with CSS
Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

Unobtrusive Dropdown Page Changer
Using a <select> dropdown menu to create navigation isn't as common as it once was, but it's still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you'll find out there for creating a menu like this are this way. Bummer. Let's make one that works with or without JavaScript.

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the 'previous' and 'next' page's bullets that makes navigation easier.

How to Code an Overlapping Tabbed Main Menu
Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.

Solution For Very Long Dropdown Menus
"I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the "fold" of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it's not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close)."

Mega Drop Down Menu w/ CSS & jQuery
When used properly, mega drop down menus can be quite efficient for large scale websites. Let's experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine's regular author.

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới