deals

premiumpacks & 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.

Lifetime Access To FastestVPN, Only $29: Adblocker, Anti-Malware, NAT Firewall, Zero Log Policy

Lifetime Access To FastestVPN, Only $29: Adblocker, Anti-Malware, NAT Firewall, Zero Log Policy

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.

TemplateMonster Bootstrap Themes Bundle: 35 Premium Products, Animated, HTML, CSS, JS, SCSS, Pug,

TemplateMonster Bootstrap Themes Bundle: 35 Premium Products, Animated, HTML, CSS, JS, SCSS, Pug,

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.

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.

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.

200 Vector T-Shirt & Merchandise Designs, Only $24: Commercial License, Ai, EPS & SVG Vectors Files, 14 Concept Categories Like Retro 8Bit Illustra...

200 Vector T-Shirt & Merchandise Designs, Only $24: Commercial License, Ai, EPS & SVG Vectors Files, 14 Concept Categories Like Retro 8Bit Illustrations, Characters, Cartoons & More

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.

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.

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. 

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social...

40 Premium WordPress Plugins to Revamp Your Website! SEO Optimizing, Campaign Management, Quality Leads Generation & Capture, Page Building, Social Conversion Boosting, Mobile Optimizing, Browser Graphical Editors, Opt-In Content Delivery, and so much more! Only 19$!

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.

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.

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.

370+ Magazine Pages, 70 Brochure Pages from 16 Professional Editorial Templates for Adobe InDesign. IDML & INDD Format, A4 210 x 297 mm, US Letter ...

370+ Magazine Pages, 70 Brochure Pages from 16 Professional Editorial Templates for Adobe InDesign. IDML & INDD Format, A4 210 x 297 mm, US Letter (8.5 x 11 inches). Only 19$! (93%Off).

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 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.

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.

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

450 Halloween Design Assets, Vector Character & Scene Generator. 4 Design Styles. Over 60% Discount! Get This Spooky Promo Now For Only 9$!

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.

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.

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.

Ugly Sweater Christmas Pack: Knitted Ornaments and Patterns, Sweater Templates, Plus a Photoshop Action to Transform Fonts, Images, Photos, and Mor...

Ugly Sweater Christmas Pack: Knitted Ornaments and Patterns, Sweater Templates, Plus a Photoshop Action to Transform Fonts, Images, Photos, and More, Into Knitting Patterns! Only 9$ (70% 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.

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.

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.

820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Objec...

820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Object, Pre-made Scenes & Background Textures Included. Get this bundle for just $19! (98% Off)

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.

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.

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. 

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, ...

13,000+ Unique PowerPoint & Keynote Slides, 86 Best Selling Templates, Print Ready (A4 + Letter), Smart Objects, Vector Shapes, 160 Color Schemes, Icon Fonts, 16:9 Aspect Ratio, Intros, Maps, Infographics, Tables, Calendars, Charts, and Much More! Get it for Only $19 (99% Off)

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.

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.

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. 

280 Instagram Masks in PSD Format, easy usage, including a tutorial of the process. Delivered in different categories. Normally priced $60, for a l...

280 Instagram Masks in PSD Format, easy usage, including a tutorial of the process. Delivered in different categories. Normally priced $60, for a limited-time only $9 USD!

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.

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.

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 brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

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 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.

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.

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)

220+ Professional Seamless Vector Patterns, Including AI, SVG & PDF Vector Files, High-Resolution PNGs, Only $9 USD! (70%OFF)