deals

premiumdeals & css drop-down menus (36 items)

Examples and snippets of drop-down menus made out of pure or combined CSS with JavaScript.

freebies

This snippet is a pure CSS drop-down menu designed by landing a classy approach. It's a nice addition to any user interface without the implementat...

This snippet is a pure CSS drop-down menu designed by landing a classy approach. It's a nice addition to any user interface without the implementation of JavaScript. Created by Codepen user Robert Borghesi.

A snippet for a responsive rotating menu built on bootstrap for the layout/grid system. It only uses the default navbar to apply a "transparent" lo...

A snippet for a responsive rotating menu built on bootstrap for the layout/grid system. It only uses the default navbar to apply a "transparent" look. Once you click the top icon it deploys an animated menu that rotates 45 degrees and displays the menu options.

A button made in CSS that activates a simple menu on click. It can be used as a menu in a mobile app or a website, it's lightweight and easy to imp...

A button made in CSS that activates a simple menu on click. It can be used as a menu in a mobile app or a website, it's lightweight and easy to implement.

80k HD Stock Photos Collection, Only $29.99! 750+ Niches & Categories, Lifetime Commercial License & New Content 100% Royalty Free.

80k HD Stock Photos Collection, Only $29.99! 750+ Niches & Categories, Lifetime Commercial License & New Content 100% Royalty Free.

Showcase of menu deploys animations within devices mockups, mainly build using CSS, HTML and a little of JS. The mockups are modeled after iOS devi...

Showcase of menu deploys animations within devices mockups, mainly build using CSS, HTML and a little of JS. The mockups are modeled after iOS devices and the animations of the menu button change from an example to another.

A fantastic resource containing several tutorials to build dropdown menus along with code example and demos, using mostly CSS and HTML and some of ...

A fantastic resource containing several tutorials to build dropdown menus along with code example and demos, using mostly CSS and HTML and some of them JavaScript or jQuery.

A compelling pen by developer Brenden Palmer consisting of three simple-to-use modals including a menu with some options. It is easy to style and a...

A compelling pen by developer Brenden Palmer consisting of three simple-to-use modals including a menu with some options. It is easy to style and add into any web project.It comes centered, bottom and top aligned so you choose the one you need.

Excel Master Certification Bundle, Only $39! 280+ Lessons, 8 In-Depth Courses. Earn Internationally Recognized CPD-Certified Diplomas!

Excel Master Certification Bundle, Only $39! 280+ Lessons, 8 In-Depth Courses. Earn Internationally Recognized CPD-Certified Diplomas!

Dropy is a simple jQuery drop-down that is beautifully styled thanks to SCSS. Is is composed of three select options that you can easily grab for a...

Dropy is a simple jQuery drop-down that is beautifully styled thanks to SCSS. Is is composed of three select options that you can easily grab for any project you have next. This code snippet is free and it was created by Thomas Bekaert.

This cool project makes clever use of a checkbox and CSS3's transition property to provide this neatly animated interface, Just like you would do w...

This cool project makes clever use of a checkbox and CSS3's transition property to provide this neatly animated interface, Just like you would do with a real clipboard, simply click the opener to slide down the board and click it again to make it go up. Uploaded by CodePen's Bartos Lazarski.

A very simple dropdown menu styled in a bright green color. Hover on the small arrow to see a group of options displayed, once you choose one and c...

A very simple dropdown menu styled in a bright green color. Hover on the small arrow to see a group of options displayed, once you choose one and click it is not the end of the story since you need to click on the "action" button to activate your selection. Code snippet hosted at JS Fiddle.

A complete toolkit to create photorealistic vintage typographic & lettering scenes, including high-resolution assets, like rendered lightbulbs, bac...

A complete toolkit to create photorealistic vintage typographic & lettering scenes, including high-resolution assets, like rendered lightbulbs, backgrounds, textures and over 60 display grunge & script color fonts.

Inspired on a Dribbble shot, this neat project provides a group of social buttons for Facebook, Twitter, Google+ and LinkedIn respectively, plus an...

Inspired on a Dribbble shot, this neat project provides a group of social buttons for Facebook, Twitter, Google+ and LinkedIn respectively, plus an option on top with a pretty "profile" icon. Everything is styled with CSS. Uploaded to CSSDeck by Marco Biedermann.

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 cool design for an animated shopping card including the total price in the bottom. When hovering on the main element, the list comes down with a ...

A cool design for an animated shopping card including the total price in the bottom. When hovering on the main element, the list comes down with a graceful transition. According to the devs, it does not work with browsers such as IE and Opera, but we also found issues when trying it with Chrome, so you might want to fix that before implementing this tool.

1500+ Print Templates, Only $14! 1300 Vector Icons, Commercial Use, Fully Editable Ai, PSD, & INDD Files, Branding, Postcards, Flyers, Banners & Mu...

1500+ Print Templates, Only $14! 1300 Vector Icons, Commercial Use, Fully Editable Ai, PSD, & INDD Files, Branding, Postcards, Flyers, Banners & Much More!

This tool will give your social projects a fancy look, allowing visitors to look into personal profiles with ease. A big header section opens a men...

This tool will give your social projects a fancy look, allowing visitors to look into personal profiles with ease. A big header section opens a menu when clicked, displaying options for additional info. Both PSD and CSS/HTML versions are provided so you can choose the best alternative.

Learn how to make a vintage-looking navigation menu with pure CSS3 thanks to this tutorial written by Designmodo's Tiberiu Butnaru. It applies...

Learn how to make a vintage-looking navigation menu with pure CSS3 thanks to this tutorial written by Designmodo's Tiberiu Butnaru. It applies a nice ribbon, pattern effects and subtle colors to achieve an attractive appearance all around. 

With this thorough article, TutorialZine's  Martin Angelov is going to teach you how to create a beautiful navigation menu using pure CSS3 and the ...

With this thorough article, TutorialZine's  Martin Angelov is going to teach you how to create a beautiful navigation menu using pure CSS3 and the Font Awesome icon font. The dropdown will also include neat animations that will show options when hovering on the large icons.

4500+ Overlays With HD Quality, Only $39! 5000x3500px ? 300dpi, 40 Styles!

4500+ Overlays With HD Quality, Only $39! 5000x3500px ? 300dpi, 40 Styles!

This cool Pepsized tutorial will show you a nice alternative to the common select from tag applying only pure CSS. It provides a simple and user-fr...

This cool Pepsized tutorial will show you a nice alternative to the common select from tag applying only pure CSS. It provides a simple and user-friendly result, including a subtle fade animation to show the options on hover. It is important, however, to add some fallback for mobile devices and/or IE8.

This CodePen project displays fancy styling and effects, behaving exactly like a select element when JavaScript is disabled. When the main boxes ar...

This CodePen project displays fancy styling and effects, behaving exactly like a select element when JavaScript is disabled. When the main boxes are clicked, a dropdown will show up with a variety of custom selections at the visitor's disposal. Created by Andy Fitzsimon. 

A design based on a tutorial seen at Tuts+ that displays an attractive group of dropdown menus that activate/deactivate on hover through a smooth a...

A design based on a tutorial seen at Tuts+ that displays an attractive group of dropdown menus that activate/deactivate on hover through a smooth animation. The interface reacts extremely quickly to your inputs, which improves the user experience. Styled with CSS only.

430+ Retro/Vintage Style Vector Illustrations & Textures, Only $14! 13 Amazing Collections In EPS, PSD, PNG & JPG.

430+ Retro/Vintage Style Vector Illustrations & Textures, Only $14! 13 Amazing Collections In EPS, PSD, PNG & JPG.

This creative design kills two birds with one stone by allowing you to turn your content's title into an interactive dropdown menu with the help of...

This creative design kills two birds with one stone by allowing you to turn your content's title into an interactive dropdown menu with the help of CSS3. The options within the dropdown are highlighted in green for a colorful look. Created by CodePen user Miguel Peixe.

This project is based on a tutorial posted at CSS Flow that shows how to create a couple of simple but stylish dropdown boxes in both light (white)...

This project is based on a tutorial posted at CSS Flow that shows how to create a couple of simple but stylish dropdown boxes in both light (white) and dark (black) styles, all with CSS (Sass). The tutorial also uses an external resource, a PSD by Hemn Chawroka.

This is an interesting code snippet that provides a fine combination between a dropdown box and a set of checkboxes. Just click on the main element...

This is an interesting code snippet that provides a fine combination between a dropdown box and a set of checkboxes. Just click on the main element to get started with a subtle animation and click on any of the options to check them. Created by CodePen user Jesse.

Lifetime Access: 160+ Courses & Future Releases, only $29! Coding, Web, Graphic & Game Design, App Development, Advanced Programming For Beginners ...

Lifetime Access: 160+ Courses & Future Releases, only $29! Coding, Web, Graphic & Game Design, App Development, Advanced Programming For Beginners & Professionals (99% Off)

This solid design for a dark-styled select box that displays options by clicking on the (very) small arrows placed on the right. Going with the flo...

This solid design for a dark-styled select box that displays options by clicking on the (very) small arrows placed on the right. Going with the flow of the creation, a beautiful dark background with a radial gradient decorates the box's surroundings. Uploaded by CodePen user design8383.

A dropdown button that displays a number of selections for the user to choose from, once they have clicked where they prefer, a "go" button on the ...

A dropdown button that displays a number of selections for the user to choose from, once they have clicked where they prefer, a "go" button on the bottom will allow the visitor to activate the changes immediately. Additionally, it features a very smooth animation when expanding and collapsing the menu.

A satisfying attempt at improving the looks of the good old default select from control. Without getting too complex, it adds shadow effects and a ...

A satisfying attempt at improving the looks of the good old default select from control. Without getting too complex, it adds shadow effects and a stronger body with the help of the mighty CSS3. On a lighter note, the arrows you see on the right are just a <> text rotated with transforms, pretty clever stuff.

856+ Massive Vector Wireframe Templates Bundle + Extended License, $775 Worth of Assets for Only $24USD (97% Off)

856+ Massive Vector Wireframe Templates Bundle + Extended License, $775 Worth of Assets for Only $24USD (97% Off)

A fine dropdown menu that smoothly displays a list of options when clicked, using HTML, CSS and JavaScript to function correctly. It also features ...

A fine dropdown menu that smoothly displays a list of options when clicked, using HTML, CSS and JavaScript to function correctly. It also features subtle highlight effects when hovering on the selections for easy navigation. By the way, did you notice the awesomeness of the topic used for the demo? Sure you geeky heads did.

Here we have a beautiful concept for a dropdown menu where the options unfold out of the main button like a piece of paper. Everything is styled wi...

Here we have a beautiful concept for a dropdown menu where the options unfold out of the main button like a piece of paper. Everything is styled with the power of CSS. The only downside we found was that the selections come down a bit too slowly, which may annoy some users.

This dropdown menu design is compact and fast, perfect to be placed in the middle of text or other elements. In this demo, it is used to display a ...

This dropdown menu design is compact and fast, perfect to be placed in the middle of text or other elements. In this demo, it is used to display a convenient listen/buy menu dropdown, but keep in mind it will not work with IE8 and below. It is created with only CSS and HTML by CSSDeck user Rishabh.

3000+ Watercolor Design Elements, Only $29. High-Resolution Objects With Transparent Backgrounds, Print Ready. Floral Elements, Frames, Animals, Tr...

3000+ Watercolor Design Elements, Only $29. High-Resolution Objects With Transparent Backgrounds, Print Ready. Floral Elements, Frames, Animals, Trees, Bouquets, Illustrations & Much More.

A nice dropdown design with solid shadow and hover effects, using HTML, JavaScript and CSS. The absence of animations might be a positive point for...

A nice dropdown design with solid shadow and hover effects, using HTML, JavaScript and CSS. The absence of animations might be a positive point for some, since it responds quickly and efficiently to user inputs. Created and uploaded to JSFiddle by Alexis.

This fantastic design provides a very stylish way to display pictures through a dropdown menu of circular thumbnails that activates when hovering o...

This fantastic design provides a very stylish way to display pictures through a dropdown menu of circular thumbnails that activates when hovering on the list icon on the bottom. It uses Sass with Compass to handle all the animation and overall operation of the snippet. Brought to life by CodePen user Alex Lime.

Here we have a group of clean dropdown menus created with HTML, CSS and JavaScript. When hovering on the collapsed buttons, the arrow on the right ...

Here we have a group of clean dropdown menus created with HTML, CSS and JavaScript. When hovering on the collapsed buttons, the arrow on the right changes colors; after clicking and opening the menu, a sharp transparency highlights the options we hover on and once we choose them, they gray out to avoid any confusion, providing a pleasant experience.

Illustrations Bundle, Trendy Material-Like Style (Characters, Objects, Scenes)

Illustrations Bundle, Trendy Material-Like Style (Characters, Objects, Scenes)

A simple dropdown menu styled entirely with CSS3 in an elegant dark style. To activate the menu, just hover over the main button (which also contai...

A simple dropdown menu styled entirely with CSS3 in an elegant dark style. To activate the menu, just hover over the main button (which also contains a circular profile photo) and you will see a set of options displayed on the screen, they will highlight when the cursor is over them for a simplified navigation.

A nice idea for an animated menu written in pure CSS. In order to make it work, simply hover over the "menu" button to see all the options come up ...

A nice idea for an animated menu written in pure CSS. In order to make it work, simply hover over the "menu" button to see all the options come up with a lighting-fast movement. As you move the cursor over them, the selections will animate further to confirm they are active. 

The guys at CSS Flow bring us a classy example for a search box based on an original PSD created by Blaze Pollard. Click inside the box to see a li...

The guys at CSS Flow bring us a classy example for a search box based on an original PSD created by Blaze Pollard. Click inside the box to see a list of suggestions appear below it, then hover on its elements to enjoy a delightful highlight effect that responds quickly to your commands.

Ultimate Data Analysis Courses Bundle: Lifetime Subscription, 200+ Courses on SQL, NoSQL, Big Data, SAS, Business Intelligence & Analytics, Data Sc...

Ultimate Data Analysis Courses Bundle: Lifetime Subscription, 200+ Courses on SQL, NoSQL, Big Data, SAS, Business Intelligence & Analytics, Data Science, and Much More, PLUS All Future Releases! Only $29! (96% Off)

CodePen user Stedesign has taken his own Dribbble shot (PSD included, if you are interested) and implemented it with a bit of CSS (Sass) and H...

CodePen user Stedesign has taken his own Dribbble shot (PSD included, if you are interested) and implemented it with a bit of CSS (Sass) and HTML in order to create a functional animated dropdown menu with animations. It works perfectly for profile managing, showing a small pictures and options with neat icons next to them.

A good-looking, flat drop-down menu created with HTML and CSS. It is responsive, meaning it will react and adjust its size on any type of screen an...

A good-looking, flat drop-down menu created with HTML and CSS. It is responsive, meaning it will react and adjust its size on any type of screen and device. Its main advantage is represented by some great performance given its lack of animations and simple design.

A straightforward selection of options displayed in a dropdown similar to the one found within Bootstrap. It contains box shadows and gradients to ...

A straightforward selection of options displayed in a dropdown similar to the one found within Bootstrap. It contains box shadows and gradients to achieve a simple but more than adequate appearance. All credit for the development of this design goes to Matt Bango.

129+ packaging mockups including book covers, boxes, paper bags, cosmetic jars, cans & bottles, milk cartons and a large selection of branding mock...

129+ packaging mockups including book covers, boxes, paper bags, cosmetic jars, cans & bottles, milk cartons and a large selection of branding mockups Only $19 for a limited-time promo!