Final Product What You’ll Be Creating
Download Source Files
Demo View It Online
Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
[Más…]
Step 1: Building the Navigation Bar
Let’s begin with a basic menu, built with an unordered list and some basic CSS styling.
view plaincopy to clipboardprint?
1.
Creating the Menu Container
We’ll now apply some basic CSS styling. For the menu container, we define a fixed width that we center by setting the left and right margins to “auto”.
view plaincopy to clipboardprint?
1. #menu {
2. list-style:none;
3. width:940px;
4. margin:30px auto 0px auto;
5. height:43px;
6. padding:0px 20px 0px 20px;
7. }
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}
Now, let’s see how we can improve it with some CSS3 features. We need to use different syntaxes for Webkit-based browsers (like Safari) and for Mozilla-based browsers (like Firefox).
For rounded corners, the syntax will be :
view plaincopy to clipboardprint?
1. -moz-border-radius: 10px
2. -webkit-border-radius: 10px;
3. border-radius: 10px;
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
For the background, we’ll use gradients and a fallback color for older browsers. To keep consistency when choosing colors, there is an awesome tool called Facade that helps you find lighter and darker tones of a basic color.
view plaincopy to clipboardprint?
1. background: #014464;
2. background: -moz-linear-gradient(top, #0272a7, #013953);
3. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953.
We can now add a darker border and polish the design with a “fake” inset border created with the “box-shadow” feature. The syntax is the same for all compatible browsers: the first value is the horizontal offset, the second one is the vertical offset, the third one is the blur radius (a small value makes it sharper; it will be 1 pixel in our example). We set all offsets to 0 so the blur value will create a uniform light border :
Final Product What You’ll Be Creating
Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
Continuar leyendo «How to Build a Kick-Butt CSS3 Mega Drop-Down Menu»
-34.500808
-58.644458
Me gusta esto:
Me gusta Cargando...
Do you 
Christian Vasile
Mozilla has released the newest version of the 
)
)
Gabriel Catalano® 
Debe estar conectado para enviar un comentario.