It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.With this example, you will see how you can build an awesome CSS3 animated drop-down menu with some of these cool features.
Multi-level Click action CSS3 Dropdown Menu
This will multilevel dropdown menu, but today submenus will appear not onhover, but onclick action.
Whirling CSS3 dropdown menu
Whirling CSS3 dropdown menu – Various dropdown menus can be easily created with CSS3 with the help of selectors. Just connect your imagination – and you will create a truly new and unique design.
CSS3/Javascript Pure Dropdown Menu
3D Cube Rotate Menu
3D Cube Rotate Menu has a sleek 3D cube rotation effect on each link in the menu. Basically, on hover the link is supposed to look like a 3D cube that rotates 90 degrees. This is achieved with CSS3 Transform Matrix 3D
Fun Animated Navigation Menu With Pure CSS
Pure CSS3 LavaLamp Menu
Simple CSS3 Dropdown Menu
Another simple yet amazing dropdown menu in pure CSS3 by Josh Riser. This code does not uses child selector >, although that might be prefered when there are multiple levels.
Slide Down Box Menu With Jquery And CSS3
The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box 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 we are hovering.
Stunning Menu in CSS3
Long Drop Down Menu Items
Follow Widget with Folding CSS3 Animation
Accordion with CSS3
HTML5/CSS3 Gray Navigation Menu
CSS3 vertical multicolor 3D menu
Office Style CSS3 Multilevel Menu
Dark Menu: Pure CSS3 Two Level Menu
This easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects.
Cherry Responsive Menu
The latest addition to our menu family is the Cherry responsive menu. This menu will work on all major desktop browsers as well as iOS and Android devices. The simple, clean, minimalistic design will make your websites navigation easy for your users to navigate.
Creative CSS3 Animation Menus
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.
Hover pure css dropdown
Responsive horizontal drop-down menu
This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.
Responsive Multi-level Menu
Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle animations that are defined in separate animation classes. The menu is fluid so that it can be used easily in a responsive layout.
Create a CSS3 Wheel Menu
There’s no better way to learn CSS3 than to get your hands dirty on an actual project and that’s exactly what we’re going to do. I’m going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques.
Responsive Drop Down Menu jQuery CSS3 Using Icon Symbol
A beauty drop down responsive menu that shows its sub menus with icon symbol using open symbol fonts that allowing you to add more icons as you want. With my previous tutorial, i also show how to create Creating 3-Level Responsive Drop Down Navigation Menu with jQuery and CSS3 as well.
Skyrim inspired drop down menu
Drop down menu inspired by the menu styles in the videogame Skyrim
CSS3 Metal Menu With Icons
This is a very unique metal menu with icons, depending on the look and feel of your site you may find a use for this unique metal menu.
CSS Ribbon Menu
This is a tutorial of an elegant ribbon menu that uses CSS3 transitions to create neat hover over effect.
Vertical Slide Hover Effect for Menu Bars with CSS3
A hover effect is the transition that takes place when you move your pointer over a menu bar item. Such hover effects can be used anywhere but mostly they are used for navigation bars and other kinds of menus.
Just another dropdown menu concept
It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.With this example, you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.
Exploding Menu using Pure CSS3
This is a pretty cool menu effect. This effect is most suitable to portfolio websites, as well as businesses which promote fun and funky things, such as discos. The most amazing thing here is that this tutorial only uses CSS3, no JavaScript, flash or any other dynamic language.
Large Pressable CSS3 Navigation
Navigation with large pressable buttons that animate nicely by David Hellman. The CSS is pretty simple to understand, the background of the menu is just a linear-gradient and the pressed effect is created using the box-shadows on both :active and :hover states.
Clean and Minimal Menu Navigation in Pure CSS3
Clean and Minimal Menu Navigation in Pure CSS3. This is very beautiful and can be used in real world projects as it works great in every major browser. The indent states (active state) is done using the `box-shadow` property which sets the inset shadow.
MTV.com CSS Drop-Down Menu Theme
Free CSS Drop-Down Menu Framework was first released back in June, 2008. Since then it has struck the audiences with its perfect cross browser performance and wide variety of drop-down menu transformations and themes. As the internet changes this project remains a steady advocate of purely CSS driven solutions.
CSS 3D Dropdown Concept
An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
Pure .CSS DropDown Menu
Fuente:designsave
No hay comentarios:
Publicar un comentario