CLOSE
CLOSE
Free ResourcesFree Resources
Free material and tools from all over professionally curated for you.
    • Demos and snippets navigations created with pure CSS and in some cases some JavaScript.

      • CSS & JavaScript Sticky Scroll Header

        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.

      • Responsive Sticky CSS & jQuery Slider

        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.

      • Pure CSS Horizontal Accordion

        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.

      • CSS & jQuery Hiding Navigation

        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.

      • CSS & JS Toggle Navigation Buttons

        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.

      • jQuery & CSS SVG Navigation Bar

        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.

      • Flattish Tabbed Box

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

      • CSS3 3D FlyOut NavBar

        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.

      • One-page CSS Navigation Menu

        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.

      • Vertical CSS and JavaScript Navigation Layout

        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.

      • Pure CSS Dropdown Menu

        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.

      • Minimalistic Flat CSS Navigation

        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.

      • CSS & SVG Material Design Gooey Menu

        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.

      • CSS3 Tabbed Content

        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.

      • Off Canvas Mobile Navigation Plugin

        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 …

      • CSS3 Responsive Navigation Menu

        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.

      • White and Pink Vintage Menu

        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.

      • Black Neon CSS Navigation Menu

        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.

      • CSS Swinging Panel Menu

        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.

      • Responsive Black & Red CSS Navigation Me...

        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.

      • CSS Sliding Border Navigation Menu

        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.

      • Angled Navigation Menu

        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.

      • Clean and Minimal Menu Navigation

        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.

      • Large Pressable CSS3 Navigation

        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.

      • Beautiful Navigation Knob

        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.

      • CSS3 Click to Like Animated Button

        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.

      • Diagonal Menu Buttons

        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.

      • CSS Orange Navigation Menu

        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.

      • Colorful Navigation Bars

        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.

      • CSS3 Fading Panel

        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.

      • Rolling Navigation Menu with CSS

        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.

      • Animated CSS Leading 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.

      • Animated Two-Level Menu

        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.

      • CSS Navigation Slider

        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.

      • Simple Slide Navigation

        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.

      • Menu with Current Entry Marker

        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.

      • Off-Canvas CSS Mobile Slide-Out Menu

        A CSS interaction that triggers an animation that will move the page to the side and introduce a set of options that will fade in one by one in a stylish manner. By using the :checked pseudo-element, we can design a mobile menu that slides out when clicking on the button placed on the top corner.

      • Slick Dropdown List

        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.

      • Lava Lamp Menu In Pure CSS

        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.

      • Simple Navigation with Hover Transitions

        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.

      • Social Networks Navigation

        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.

      • CSS Paper Navigation Menu

        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.

      • Multi-Leveled CSS3 Dropdown Menu

        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.

      • Simple CSS Navigation Dropdown

        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.

      • CSS Fading Dropdown Menu

        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.

      • CSS (LESS) Dropdown Navigation

        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.

      • MegaDrop: CSS Framework

        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.

      • HTML5 CSS3 Gray Navigation Menu

        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.

      • Dark Navigation with Green Top Border

        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.

      • Awesome iQuery Slide Down Box Menu

        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.

      • Slide Out Navigation Tutorial

        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.

      • Responsive CSS Retina-Ready Menu

        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.

      • Pure CSS3 Breadcrumb Navigation

        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.

      • Smooth Two Level CSS3 Navigation Menu

        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.

      • Soothing CSS3 Dropdown Animation

        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.

      • Apple Navigation Menu in Pure CSS

        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.

      • Another Simple CSS3 Dropdown Menu

        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.

      • CSS Dark Navigation Menu Bar

        A neat navigation bar features a dark skin with colorful details on the bottom of each option. When clicking on the elements, they animate towards the background with a nice shadow that helps accentuate the effect. Designed with pure CSS by Thibaut.

      • Tabbed Navigation with Dropdowns

        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.

      • Light Horizontal CSS Navigation 

        A light, yet strong CSS navigation menu with cool hover and active effects, as well as clean, white style that includes smooth shadows. Once we click on a button, it animates and stays pressed, just like the buttons in an old stereo player (do you young kids know what those were, anyway?).

      • Simple Menu CSS Code Snippet

        A CSS code snippet example that features a simple menu. When you hover over or click one of the buttons, it shows different submenus. It is meant to be used as a drop-down bar for a mobile or regular website. You can edit the HTML to add more elements, the CSS to modify its appearance and the JS for improving the functionality.

      • Collapse Expand List View all items Download Collection Submit
This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator