Fullscreen Layout with Page Transitions | Codrops

Fullscreen Layout with Page Transitions | Codrops A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items. VIEW DEMO DOWNLOAD SOURCE

UI Design: Simple Ways to Add Mobile Navigation Icons

UI Design: Simple Ways to Add Mobile Navigation Icons More people are surfing the Internet via mobile devices these days, thus a few things on websites need to be adjusted to fit in those smaller screen sizes. This also includes Web Navigation. The icon below, if you may, is the most popular icon to represent “mobile…

Responsive Multi-Level Menu | Codrops

Responsive Multi-Level Menu | Codrops A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. VIEW DEMO DOWNLOAD SOURCE Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels….

Slide and Push Menus | Codrops

Slide and Push Menus | Codrops Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. VIEW DEMO DOWNLOAD SOURCE A set of fixed menus that will slide out from any of the edges of the page. The two menus that…

Responsive Full Width Grid | Codrops

Responsive Full Width Grid | Codrops A responsive grid layout for multiple items in a row that fill all the available width. VIEW DEMO DOWNLOAD SOURCE A layout for a full width flexible grid layout for images or other content. The items have a percentage width and some example media queries show how to adjust the…

The Responsive Web Design War Strategy

The Responsive Web Design War Strategy It seems like everyone is hailing Responsive Web Design (RWD) as the savior for the mobile site development in 2013. That’s reasonable too, since RWD is currently the only sounding approach that deals with any device resolution universally and effectively. It tries to unite this chaotic browser-based universe littered by the…

Horizontal Drop-Down Menu | Codrops

Horizontal Drop-Down Menu | Codrops A responsive horizontal drop-down menu inspired by the Microsoft.com menu. VIEW DEMO DOWNLOAD SOURCE This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.

How to Adapt Your Site to Different Window Sizes | Web Resources | WebAppers

How to Adapt Your Site to Different Window Sizes | Web Resources | WebAppers Modern browsers like Internet Explorer 10 support the width and height properties of the W3C Working Draft CSS Device Adaptation. This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular, it enables sites to easily adapt…

UI Design Guidelines for Responsive Design | Codrops

UI Design Guidelines for Responsive Design | Codrops Some UI guidelines and tips to consider when designing a website to make it cross-device friendly and responsive. The web development community has come up with endless solutions, best practices, and tools for coding a responsive design with ease. While the vast majority of websites can be…