Elastic SVG Elements

We’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation.

Continue reading Elastic SVG Elements

Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

Here, You are found out the sticky header for your website. here I have used only css and jquery so its realy good and easy to use it.

Continue reading Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

Easy way for responsive menu

Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation.

Continue reading Easy way for responsive menu

Navicon Animations Using CSS3

A navicon menu is a popular element on almost all modern websites. It is sometimes referred to as a hamburger menu or a three-line menu. I would say the “three-line” is now an inoperable term because some websites have adopted more than three horizontal lines and others have come up with a totally different style. Another example of hamburger menu usage is when the icon is revealed on narrower screens. Nevertheless, navicons reveal menu lists when you click on them and thus help in your responsive design layout.

Continue reading Navicon Animations Using CSS3

Responsive Sidebar Navigation

Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project 😉

Continue reading Responsive Sidebar Navigation

Drop-Down Navigation: Responsive and Touch-Friendly

What if you need a multi-level navigation? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and / or cursorless screens? By usable I mean being able to use hyperlinks on parental anchors and open them with a double-tap (which is a native act on touch devices), also being able to close the drop-downs by tapping anywhere outside them to avoid flashing and other huge usability faults but having a usual bulletproof drop-down menu on desktop screens at the same time. A while ago I came up with quite a simple technique. I have been successfully implementing it into my projects as there is no room for one-sided techniques anymore.

Continue reading Drop-Down Navigation: Responsive and Touch-Friendly

Stretchy Navigation

A rounded navigation trigger that stretches on click/tap to reveal the navigation items.
While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add content button and 3) edit content button.

Continue reading Stretchy Navigation