Right after I saw Overlay effect menu with jQuery, I thought of giving a try to achieve almost the same effect using CSS3.
Demo Page : Overlay Effect Menu with CSS3
The demo is just a css3 experiment and i won’t recommend this for your projects unless you least care about old browsers.
The overlay part is quite simple, and I have used the CSS selector “+” for achieving the desired effect. The main ul is placed as a sibling of overlay div.
<ul id="main-list"> <!-- The navigation code goes here --></ul>
<div class="overlay"><!-- This is the overlay div, initially hidden and displayed on hovering the main ul --></div>
CSS applied goes like this.
ul#main-list:hover + .overlay{
background:rgba(0,0,0,0.5);
}
What the code does is, while hovering the main ul, the overlay div which is a sibling of the ul element, get the property – which is opacity 0.5 with background #000. As simple as that.
For the navigation transition parts, its all done using pure css3.
Here is the navigation HTML part.
<ul id="main-list"> <!-- Main Link Starts-->
<li> <a href="#">Logo Design</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">Logo Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Logo Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Logo Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
<!-- .sub-div --></ul>
<!-- .sub-list --></li>
<!-- Main Link Ends -->
<!-- Main Link Starts-->
<li> <a href="#">Web Design</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">Web Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Web Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Web Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
<!-- .sub-div --></ul>
<!-- .sub-list --></li>
<!-- Main Link Ends -->
<!-- Main Link Starts-->
<li> <a href="#">PSD2XHTML</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">PSD Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">PSD Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">PSD Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
<!-- .sub-div --></ul>
<!-- .sub-list --></li>
<!-- Main Link Ends -->
<!-- Main Link Starts-->
<li> <a href="#">Wordpress</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">WP Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">WP Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">WP Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
<!-- .sub-div --></ul>
<!-- .sub-list --></li>
<!-- Main Link Ends -->
<!-- Main Link Starts-->
<li> <a href="#">Ruby on Rails</a>
<ul class="sub-list">
<div class="sub-div">
<ul>
<li class="sub-head">Rails Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Rails Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
<ul>
<li class="sub-head">Rails Heading</li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
<li><a href="#">Sub Links</a></li>
</ul>
</div>
<!-- .sub-div --></ul>
<!-- .sub-list --></li>
<!-- Main Link Ends --></ul>
<!-- #main-list -->
CSS goes like this, includes the CSS3 transition and border radius effects.
ul#main-list{
left:40px;top:30px;
position:absolute;
z-index:0;
}
ul.sublist,.overlay,ul#main-list li,ul#main-list li a{
/* CSS3 Transition Magic */
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0);
z-index:-1;
}
.sub-div{
/* CSS3 Transition Magic */
-webkit-transition: all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out ;
}
.overlay{
/* CSS3 Transition Magic */
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out ;
}
ul#main-list:hover + .overlay{
background:rgba(0,0,0,0.5);
}
ul#main-list li{
margin:0 3px 0 0;
}
ul#main-list li a{
display:block;
width:90px;
height:20px;
padding:10px;
background:rgba(0,0,0,0.6);
text-transform:uppercase;
text-shadow:0 0 1px #000000;
font-weight:bold;
color:#AAAAAA;
}
ul.sub-list{
overflow:hidden;
position:absolute;
top:38px;left:0;
visibility:hidden;
/* display:none; */
height:180px;
background:rgba(255,255,255,1);
margin:0 0 0 0;
opacity:0;
}
ul#main-list ul.sub-list li a{
padding:0;
background:none;
color:#000;
text-shadow:1px 1px 1px #fff;
height:auto;width:auto;
}
ul#main-list li:hover ul.sub-list{
visibility:visible;
opacity:1;
padding:14px 10px 10px 10px;
}
ul#main-list li:hover a{
background:rgba(255,255,255,1);
color:#000;
text-shadow:1px 1px 1px #fff;
}
.sub-div{
overflow:hidden;
margin:-20px 0 0 0;
padding:20px;
width:502px;
}
ul#main-list li:hover .sub-div{
margin:5px 0 0 0;
}
ul.sub-list ul{
float:left;
margin-right:10px;
overflow:hidden;
width:110px;
}
ul#main-list ul.sub-list ul li{
display:block;
width:110px;
}
ul#main-list ul.sub-list ul li a{
color: #222222;
display: block;
font-size: 12px;
margin: 2px;
padding: 2px 2px 2px 4px;
text-decoration: none;
height:auto;
clear:both;
}
ul#main-list ul.sub-list ul li a:hover{
color: #fff;
background:#000;
text-shadow:none;
}
li.sub-head{
border-bottom: 1px solid #DDDDDD;
color: #AAAAAA;
font-size: 16px;
margin-bottom: 10px;
padding-bottom: 6px;
}
Advantages of jQuery version
- Internet Explorer Support
- Many people are still using Firefox 3.6, but transition are available only from FF4.0
Advantages of CSS3 Version
- No need to load extra js for achieving the effect.
- Faster load time.
PS : Note that, the current load time will be higher, as I have some description and Twitter/Facebook iframes embedded in the demo page. Plus, my server seems a bit slow, and hence fetching the large image takes time. Provided both demos, jQuery and CSS3, in the same environment – there is no doubt CSS3 wins.
