Weebly Tricks #87 - Overlay Effect Menu

I consider this as one of the most brilliant tutorial you need to know and apply on your site. Bored with your navigation menu? Check this sample from Codrops and I am sure you will love it. It supports text and images as menus.

CLICK HERE FOR LIVE DEMO

---

FILES NEEDED
How to use these files? Click Here!

---

• ovefme.css

---

HEADER CODE
Where to place these codes? Click Here!

---

<link href="http://mwtdatabase.weebly.com/files/theme/ovefme.css" rel="stylesheet" type="text/css" />

Note:
Red text - Change with your site address.

---

FOOTER CODE
Where to place these codes? Click Here!

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
            $(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');

                $oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});

$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
            });
        </script>

---

BODY CODE
Where to place these codes? Click Here!

---

<div class="oe_wrapper">
    <div id="oe_overlay" class="oe_overlay"></div>
    <ul id="oe_menu" class="oe_menu">
        <li>
            <a href="">Basic Tutorials</a>
            <div>
                <ul>
                    <li class="oe_heading">
                        Modification
                    </li>
                    <li><a href="#">Editing Header</a></li>
<li><a href="#">Editing Footer</a></li>
<li><a href="#">Managing Files</a></li>
                </ul>
                <ul>
                   <li class="oe_heading">
                        Navigation
                    </li>
<li><a href="#">Logo Link</a></li>
<li><a href="#">Breadcrumbs</a></li>
<li><a href="#">Content Widget</a></li>
                </ul>
                <ul>
                   <li class="oe_heading">
                        Backgrounds
                    </li>
<li><a href="#">Full Image Slideshow</a></li>
<li><a href="#">Individual Backgrounds</a></li>
<li><a href="#">Others...</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="">Images</a>
            <div style="left:-111px;">
                <ul>
                    <li class="oe_heading">
                        Hover Effects
                    </li>
                    <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidanRE4EZrBaEKl3pK-xi6UEn4aEALk6m3j_Sox1o1NxUkcPwNQ83Kr7dfjez6_h5gFOf1AOYrePyuWfXPk76BjHYhCyGfxysa92GCpWL3P05LalTuPoWAhA2ax7MDzkaMC3jUIolKTaos/s1600/3D+Thumbnail+Hover+Effects+++MWT+Second+Demo.jpeg" alt="Mountain View" style="width:140px;height:140px"></a></li>
</ul>
<ul>
<li class="oe_heading">
                        Image Effects
                    </li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXlqx3JjXede1jEX3DMUYFCuBmOsqC00e5mMp_5dmifzcFGsGOrSIEsd2dyW0EtRoBVBG9iy4oIzZG_3mOVRNqeDBnoCM8JmBwE_54hS4SZXM-8dDJErnCOntFDajeGNtM4mYGcM9SUcg/s1600/jQuery+Isotope+++MWT+Second+Demo.jpeg" alt="Mountain View" style="width:140px;height:140px"></a></li>
                </ul>
<ul>
                    <li class="oe_heading">
                        Slideshows
                    </li>
                    <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCk9g1fRWTdPDj9OqYeE9Zqq_ZyJKUlSurGkD4Ln-eyBgBbiRsnBDx-hG-Z8dhjBmrQqEAlq-0Gik21tTwkpCYqFj2DlRehvHqEhsATo1nztMvAVml6K5rl3KNAqTCz0B28pSObzWJe9c/s1600/graysacle+image+effects.jpg" alt="Mountain View" style="width:140px;height:140px"></a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="">Other topics</a>
            <div style="left:-223px;">
                <ul class="oe_full">
                    <li class="oe_heading">
                        Fashion Fragrances
                    </li>
                    <li><a href="#">Deálure</a></li>
                    <li><a href="#">Violet Woman</a></li>
                    <li><a href="#">Deep Blue for Men</a></li>
                    <li><a href="#">New York, New York</a></li>
                    <li><a href="#">Illusion</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Title Here</a>
            <div style="left:-335px;">
                ...
            </div>
        </li>
        <li><a href="">Title Here</a>
            <div style="left:-447px;">
                ...
            </div>
        </li>
    </ul>
</div>

Notes:

Ok, the HTML is simple, it has only three divisions, the Tab title, the List title and the items on each list. On the second tab, instead of using text, I used images and great to see that it fits perfectly. You should probably experiment on this one. Now here are the legends to guide you.

Blu text - Your Tab's titles.
Red text - Your list titles or headings
Yellow text - Your list items.
Green text - Your image source link, if you choose to display image.
# - The link for each element.

---

CONCLUSION

---

If you simple copy paste all the codes above, the output will still end up *ugly*. Now to do the magic, you have to adjust your site's dimension and backgrounds. The code I gave you is simply the navigation menu and background adjustment is excluded.

Be my subscriber and I will help you apply the backgrounds!

Useful articles which was used for this tutorial:

1. 10 Capsulated Tips that Can Change the Way you Edit your Weebly Site

2. Solving "Overflowing Widgets" in Weebly

3. Weebly Tricks #69 - Advance Way of Editing your Weebly Background

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!