One page section slider made out of pure CSS, it has on click action with smooth transitions to change between sections. Not a single line of JavaS...

One page section slider made out of pure CSS, it has on click action with smooth transitions to change between sections. Not a single line of JavaScript, it's just HTML and CSS. Made by Codepen user Quentin Véron.

This is a set of multiple animation examples for navbars. In total the author made 15 navbars, differentiated by color, each one with a differ...

This is a set of multiple animation examples for navbars. In total the author made 15 navbars, differentiated by color, each one with a different set of animations triggered by hovering over them. The motions are generated with CSS.

Full page navigation panels with Prezi-like CSS animation options, it features a main Panel plus 9 different directions with 4 choices of animated ...

Full page navigation panels with Prezi-like CSS animation options, it features a main Panel plus 9 different directions with 4 choices of animated transitions when navigating from one panel to the next one.

This is a design by Codepen user Just another Chris. Its a snippet of an animated, pure CSS nav menu. Upon clicking te menu icon, the front panel i...

This is a design by Codepen user Just another Chris. Its a snippet of an animated, pure CSS nav menu. Upon clicking te menu icon, the front panel is pushed back in a motion similar to closing/opening doors and reveals the menu behind it. Neat hu?

A cool yet simple sticky header created in CSS and JavaScript. It remains on top of the page while the rest scrolls. The header includes the title ...

A cool yet simple sticky header created in CSS and JavaScript. It remains on top of the page while the rest scrolls. The header includes the title of the resource, and it keeps the other elements in place, like the hamburger menus, the search bar and more.

A responsive sticky slider made in CSS and jQuery. It sticks to the bottom of the screen in initial states, and when you scroll the menu sticks at ...

A responsive sticky slider made in CSS and jQuery. It sticks to the bottom of the screen in initial states, and when you scroll the menu sticks at the top. It has a minimal style, and its code does not affect page load.

A beautiful and useful code experiment created by Codepen user Ren Aysha in which we can see a CSS horizontal accordion, perfect to be put as the h...

A beautiful and useful code experiment created by Codepen user Ren Aysha in which we can see a CSS horizontal accordion, perfect to be put as the header of a website. This one is specially crafted for social purposes, initially showing the icons and when hovered over it shows a title and an excerpt.

A simple CSS & jQuery navigation that auto-hides when the user scrolls down. On the other side, it becomes visible when the user scrolls up. This c...

A simple CSS & jQuery navigation that auto-hides when the user scrolls down. On the other side, it becomes visible when the user scrolls up. This code has a simple structure and broad browser support, including the latest versions of Chrome, Firefox and Opera.

A code experiment with SVG icons for website navigation. It consists of buttons made with CSS and JavaScript that change color when selected. Also,...

A code experiment with SVG icons for website navigation. It consists of buttons made with CSS and JavaScript that change color when selected. Also, it has Material transitions to make it look dynamic.

An SVG navigation bar powered by jQuery and a bit of CSS. With a Material style, it looks gorgeous on any site and app, and the best of all is that...

An SVG navigation bar powered by jQuery and a bit of CSS. With a Material style, it looks gorgeous on any site and app, and the best of all is that it is fully functional and easy to implement. The code is free to use, developed by Chris Gannon.

A nice looking box featuring several tabs that count on long flat style shadows that interact with JS as you switch them around.

A nice looking box featuring several tabs that count on long flat style shadows that interact with JS as you switch them around.

A navigation made with pure CSS3 that creates a flyout navbar with 3D transforms. It is a simple creation that can be included easily into any webs...

A navigation made with pure CSS3 that creates a flyout navbar with 3D transforms. It is a simple creation that can be included easily into any website, and can be styled easily as well. The navigation was created by Tiffany Rayside.

A simple code snippet in CSS for creating a one-page menu. The snippet uses very little CSS and no JavaScript, and It can be used commercially or p...

A simple code snippet in CSS for creating a one-page menu. The snippet uses very little CSS and no JavaScript, and It can be used commercially or personally, as long as you provide proper attribution. It was created by Alberto Hartzet.

A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for...

A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for screen transition. It was made with CSS and JavaScript by Codepen user Ettrics.

A simple flat menu with smooth effects made in CSS format. It follows the mouse when you hover over one item, and it displays a submenu. The animat...

A simple flat menu with smooth effects made in CSS format. It follows the mouse when you hover over one item, and it displays a submenu. The animations were carefully crafted with CSS and it can be implemented on any website. This was created by Codepen's user Robert.

A flat navigation made in CSS and JavaScript showing some tabs and a drop-down menu. It can be used in any website, matching its style. It was crea...

A flat navigation made in CSS and JavaScript showing some tabs and a drop-down menu. It can be used in any website, matching its style. It was created by Andy Tran.

A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations...

A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations. However, this circular effect makes this a bit more relevant since it can be used not only on websites but in mobile apps as well.

TrueTabs is an HTML and CSS code snippet that creates a tabbed content box with animations. Its design is not that beautiful, mainly because of the...

TrueTabs is an HTML and CSS code snippet that creates a tabbed content box with animations. Its design is not that beautiful, mainly because of the dark tones its author used to make it. However, with a bit of time, this development can become a gorgeous and useful creation, perfect for any type of website. Jason Shi created this experiment and uploaded to Codepen for anyone to improve.

This jQuery plugin called Off Canvas Infinity Push allows you to make any desktop navigation accessible from a mobile device. It can locate a menu ...

This jQuery plugin called Off Canvas Infinity Push allows you to make any desktop navigation accessible from a mobile device. It can locate a menu in several positions, without affecting the rest of the design. The navigation can be: - Positioned left - Positioned right - Responsive (top bar) - No auto scroll - No off canvas - Reset To use it, you just need to add jQuery (v1.7+); then add the stylesheet (jquery.ma.infinitypush.css) and include the plugin; finally, call the initializer function of the plugin. If you want to integrate it better on your website, you can modify the stylesheet. Also, it has several options you can set values to. Among them you can find: - Off Canvas - Off canvas Speed - Opening Speed - Closing Speed - Spacing - Auto Scroll - Scroll Speed - Destroy This plugin is licenced under the MIT license and was created by Marc Andrew.

A responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the per...

A responsive menu that includes dropdowns on the design, created with pure CSS3. The elements on the menu are intended to resemble those on the periodic table. This menu was made and also uploaded to CodePen by the user Jeremy Cloutier.

A very simple concept for a navigation menu brought to us by CodePen's Marco Biedermann. It consists of a group of options that turn pink whenever ...

A very simple concept for a navigation menu brought to us by CodePen's Marco Biedermann. It consists of a group of options that turn pink whenever you hover over them, all neatly packaged within a white box, A "welcome" sign serves as a title, which text you can modify with ease.

A very appealing CSS menu uploaded to CodePen by the talented Sara Soueidan. Showcasing a sober, elegant look, this menu highlights hovered options...

A very appealing CSS menu uploaded to CodePen by the talented Sara Soueidan. Showcasing a sober, elegant look, this menu highlights hovered options with a fancy neon-like effect that lights up the icons. When pressing on the buttons, they display a delightful shadow effect, too.

An attractive menu developed with pure CSS. It features an impressive effect that makes panels "swing" in order to show the submenus when hovering,...

An attractive menu developed with pure CSS. It features an impressive effect that makes panels "swing" in order to show the submenus when hovering, this is achieved by taking advantage of CSS keyframe animations. Uploaded to CodePen by Seth Abbott.

A responsive menu adapts to different screen sizes by displaying its content in two ways: On big screens, it shows the icons along with the descrip...

A responsive menu adapts to different screen sizes by displaying its content in two ways: On big screens, it shows the icons along with the description of every element. On smaller displays, it only shows the main icons and reveals the descriptions on hover. Created by Sara Soueidan and uploaded to CodePen.

A navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of th...

A navigation menu created by CodePen's Marcello Africano. Styled with bright colors, it highlights elements on hover with a bar at the bottom of the selection, making use of a super smooth animation. Everything you see in the demo is coded with CSS.

A simple set of buttons forming a sort of navigation bar. The buttons have an interesting diagonal shape and include strong shadows plus a white ap...

A simple set of buttons forming a sort of navigation bar. The buttons have an interesting diagonal shape and include strong shadows plus a white appearance when the cursor is placed over them. All of the styling in this project is handled with pure CSS.

Here we have a basic and clean dark navigation menu designed with pure CSS3 and functional with any major browser currently available. An animation...

Here we have a basic and clean dark navigation menu designed with pure CSS3 and functional with any major browser currently available. An animation slowly provides a shadow to the buttons when clicked, giving them a smooth appearance. Uploaded to CSSDeck by Abhimanyu Rana.

A smooth navigation menu courtesy of David Hellman. It features some really interesting animations with box shadows on both active and hover states...

A smooth navigation menu courtesy of David Hellman. It features some really interesting animations with box shadows on both active and hover states, providing a cool pressed effect. The menu's background comes as a linear gradient. Created with pure CSS and hosted at CSSDeck.

This beautiful navigation knob is based on a Dribbble shot from Piotr Kwiatkowski. It features a cool light bleed highlight on the selected op...

This beautiful navigation knob is based on a Dribbble shot from Piotr Kwiatkowski. It features a cool light bleed highlight on the selected option, along with a sharp animation when transitioning between selections. Created with pure CSS by CodePen user Adem Ilter.

This neat animated "like" button includes a hidden checkbox that displays the current like count when clicked. This is achieved with CSS3's transit...

This neat animated "like" button includes a hidden checkbox that displays the current like count when clicked. This is achieved with CSS3's transition property, which is unsupported in older browsers, but the menu degrades gracefully to tackle that problem.

This project presents a set of buttons within a nice navigation bar and then, making good use of CSS transforms, twists them a bit in order to give...

This project presents a set of buttons within a nice navigation bar and then, making good use of CSS transforms, twists them a bit in order to give them a fancy diagonal look. In case the browser is not compatible with this menu, it will degrade gracefully into an unskewed version.

A slick navigation bar created with CSS, carrying a neat orange appearance and a checkered pattern in the background. Some options contain a second...

A slick navigation bar created with CSS, carrying a neat orange appearance and a checkered pattern in the background. Some options contain a second level within them, just hover on them to see a dropdown appear. An animation is activated when placing the cursor over the sub-menu selections. Uploaded to CSS Deck by Philipp von Wedel.

A nice set of five different navigation bars in pure CSS. They are actually all the same, just with multiple color selections to fit with your webs...

A nice set of five different navigation bars in pure CSS. They are actually all the same, just with multiple color selections to fit with your website's style properly. The bars include highlight effects on hover, plus a very subtle shadow on the lower part. Uploaded to CodePen by user mafai44.

This project makes use of invisible checkboxes in order to allow the selection of multiple options. Once a choice has been made, a smooth animation...

This project makes use of invisible checkboxes in order to allow the selection of multiple options. Once a choice has been made, a smooth animation displays an image with a little bounce effect. More pictures keep on appearing this way as the user clicks on other options. Uploaded to CSS Deck by LukyVj.

This navigation menu is a remake of the one created by Sohtanaka, but with the difference that the original was made with jQuery, whereas this one ...

This navigation menu is a remake of the one created by Sohtanaka, but with the difference that the original was made with jQuery, whereas this one is created with pure CSS, although the concept remains exactly the same. It features a nice animation when hovering over its options. Designed by CSS Deck user Taufik Nurrohman.

A project that takes advantage of a few CSS3 properties to make animated “slats” that roll down to appear, creating a really nice effect. The slats...

A project that takes advantage of a few CSS3 properties to make animated “slats” that roll down to appear, creating a really nice effect. The slats receive a 3D transform effect in order to look the way they do while animation and keyframe properties are also applied. Remember this tool only works in Chrome, Firefox and Safari.

A smooth navigation menu featuring dropdown lists that come down on hover. Regarding its styling, it presents a solid dark skin, making use of line...

A smooth navigation menu featuring dropdown lists that come down on hover. Regarding its styling, it presents a solid dark skin, making use of linear gradients and subtle animations to display the level two options. It mostly uses CSS, with a little bit of JavaScript to ensure compatibility with older browsers.

A fancy navigation interface created with pure CSS by CodePen's Elneco. The menu starts fade out, waiting to be activated on hover. Once you do tha...

A fancy navigation interface created with pure CSS by CodePen's Elneco. The menu starts fade out, waiting to be activated on hover. Once you do that, the menu is fully visible, while a bar animates in order to place itself below the highlighted option. Move the cursor away to go back to the starting position.

A very simple but useful set of navigation menus, styled in a "shiny" black fashion with subtle box shadows that bring the elements out of the back...

A very simple but useful set of navigation menus, styled in a "shiny" black fashion with subtle box shadows that bring the elements out of the background. When the cursor goes over any option, a slide animates to show the same selection in light blue. They come in three versions: Small text, big text and icons only.

A quite simplistic idea for a horizontal menu including a smooth animated line that accompanies any selection you highlight with the mouse. Additio...

A quite simplistic idea for a horizontal menu including a smooth animated line that accompanies any selection you highlight with the mouse. Additionally, options also have the ability to change color when selected. Pure CSS was applied in the creation of this snippet.

This slick dropdown was created by Burak Kaya in Codepen, and it allows you to select different options showing them in an organized and beautiful ...

This slick dropdown was created by Burak Kaya in Codepen, and it allows you to select different options showing them in an organized and beautiful way. When hovering on the selections, they are highlighted with a smooth animation and color change.

This code snippet provides a beautiful lava lamp style navigation menu, decorated and animated with nothing but...

This code snippet provides a beautiful lava lamp style navigation menu, decorated and animated with nothing but CSS. The idea is to have a set of options arranged horizontally and have them change color when hovering. Plus, a nice bar animates below the highlighted selection. Created by Vincent De Oliveira.

The Code Player brings this walkthrough that will help you to create a simple horizontal navigation with a stripped-down black and white skin. It f...

The Code Player brings this walkthrough that will help you to create a simple horizontal navigation with a stripped-down black and white skin. It features a neat hover fade animation that will switch the colors on the option. Styled completely with the help of CSS.

A nice trio of social buttons created with pure CSS, offering links for sharing on Twitter, Dribbble and Rdio. Each one comes in their respective c...

A nice trio of social buttons created with pure CSS, offering links for sharing on Twitter, Dribbble and Rdio. Each one comes in their respective color, which takes over the entire space on hover. It makes use of linear gradients and box shadows to decorate the interface. Uploaded by Stephen Grace.

An attractive way to display a set of selections with this cool dropdown menu. The dropdowns are displayed over an element that looks like folded p...

An attractive way to display a set of selections with this cool dropdown menu. The dropdowns are displayed over an element that looks like folded paper, not before appearing with a subtle (and fast!) fade animation. This item is fully responsive and styled entirely with CSS.

A clever design that allows you to show multiple options within a multi-leveled dropdown menu, offering potentially unlimited sub-menus. It feature...

A clever design that allows you to show multiple options within a multi-leveled dropdown menu, offering potentially unlimited sub-menus. It features smooth transitions, all handled with only CSS. A bit of JavaScript is included, but it is only in case fixing is needed with older browsers. Uploaded by CodePen's John Gardner.

A flat-styled navigation dropdown menu created with pure CSS by CodePen user Allen O'Leary. The selections that include dropdowns are activated on ...

A flat-styled navigation dropdown menu created with pure CSS by CodePen user Allen O'Leary. The selections that include dropdowns are activated on hover, with a smooth and subtle animation bringing them up. A bright red color will highlight selected options, although you can modify the code and, therefore, the project's appearance.

A very cool code snippet that allows you to show options in a simple dropdown menu. The main talking point is its ability to fade out inactive sele...

A very cool code snippet that allows you to show options in a simple dropdown menu. The main talking point is its ability to fade out inactive selections when hovering over any main choice available. This project has been completely styled with CSS by CodePen user William Clark.

A nice shot at creating a CSS dropdown with pure CSS (LESS). The options are shown in simple text at the start, being covered with a proper box whe...

A nice shot at creating a CSS dropdown with pure CSS (LESS). The options are shown in simple text at the start, being covered with a proper box when moving the cursor over them. You can add non-clickable titles to explain the selections. Uploaded by CodePen's Robert DeLuca.

Here we have a fantastic tool that intends to aid you in the creation of large dropdown menus, making the process easier and faster. MegaDrop is a ...

Here we have a fantastic tool that intends to aid you in the creation of large dropdown menus, making the process easier and faster. MegaDrop is a CSS framework that makes use of divs and percentages to achieve columns, instead of nested lists. Shane Jeffers is the author of this resource.

By making use of HTML5 and CSS3, this freebie provides a simple and elegant navigation menu. It does not make use of images, but pure CSS to handle...

By making use of HTML5 and CSS3, this freebie provides a simple and elegant navigation menu. It does not make use of images, but pure CSS to handle its styling, which comes in a sober black and white color palette. It is cross-browser compatible, working with IE7 and above.

A fancy navigation menu created with pure CSS, featuring a solid black appearance and a little green and white stripe on top. In order to see the d...

A fancy navigation menu created with pure CSS, featuring a solid black appearance and a little green and white stripe on top. In order to see the dropdowns, simply hover over the menu options. The selections will highlight slightly when moving the cursor over them.

A jQuery menu that consists of unique up-popping navigation items. This menu features sliding boxes as you hover over the navigation bar, these out...

A jQuery menu that consists of unique up-popping navigation items. This menu features sliding boxes as you hover over the navigation bar, these out-sliding boxes contain the menu options, while a thumbnail pops up. A submenu box will also be included with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item you hover over.

This tutorial will teach you how to create a beautiful slide out menu navigation. The options will be almost hidden, since they slide out from the ...

This tutorial will teach you how to create a beautiful slide out menu navigation. The options will be almost hidden, since they slide out from the side when the users hover on the edge of the screen. Moreover, the items will be semi-transparent to avoid blocking the content below them. This technique can be a great space saver for your website.

An amazing menu that comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three diffe...

An amazing menu that comes boosted with a number of very useful options that make it versatile and attractive. Is responsive design has three different layouts depending on the screen size, including a tablet-optimized version. Also, it is Retina-ready, this is achieved by using an icon font instead of images to avoid pixelation when zooming in.

This is the coded example result of a tutorial that uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of grad...

This is the coded example result of a tutorial that uses CSS Counters to number the breadcrumb links. The first breadcrumb displays the use of gradients for the links whereas the second demo uses flat colors along with transitioned hover effects for the navigation. This experiment is hosted at The Code Player.

A super fancy two-level navigation menu featuring an amazingly polished interface, with a great deal of attention to detail. As you hover on the mu...

A super fancy two-level navigation menu featuring an amazingly polished interface, with a great deal of attention to detail. As you hover on the multi-leveled sections, the dropdown menus appear with stunning smoothness thanks to a left to right animation. Created by Jack Rugile.

A neat animated dropdown menu created by Alex Penny featuring animated sub-menus that show up with a very neat fade animation. The styling is rathe...

A neat animated dropdown menu created by Alex Penny featuring animated sub-menus that show up with a very neat fade animation. The styling is rather basic, using just black and white to achieve a sober and elegant look that will not distract the user too much.

A nice couple of navigation menus that recreate the ones seen at Apple's website in both their new and older versions. When it comes to the styling...

A nice couple of navigation menus that recreate the ones seen at Apple's website in both their new and older versions. When it comes to the styling, there's nothing out of the ordinary, with box shadows, linear gradients and text shadows. Created with pure CSS by Vincent Klaiber.

A simple but effective dropdown menu, created with nothing but pure CSS3. It makes good use of a few CSS properties such as box shadows, transition...

A simple but effective dropdown menu, created with nothing but pure CSS3. It makes good use of a few CSS properties such as box shadows, transitions and text shadows in order to achieve a good-looking interface and smooth navigation. Created by Josh Riser and uploaded to CSSDeck by user Rishabh.

A pretty tabbed navigation we found at Thibaut's CSS Flow. Hover over the main menu sections to see a dropdown with more options appear. It also fe...

A pretty tabbed navigation we found at Thibaut's CSS Flow. Hover over the main menu sections to see a dropdown with more options appear. It also features a small "home" button with a nice icon on it. Based on a PSD found at Premium Pixels and built with pure CSS.