December 10, 2014

Weebly Tricks #87 - Overlay Effect Menu

Posted by Domingo Tambasacan at 12/10/2014



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.








FILES NEEDED
How to use these files? Click Here!


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="http://2.bp.blogspot.com/-on-qjRmjsBk/VIQ1R6cFLzI/AAAAAAAABLk/QiPMm_wFKvw/s1600/3D%2BThumbnail%2BHover%2BEffects%2B%2B%2BMWT%2BSecond%2BDemo.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="http://3.bp.blogspot.com/-NynDzThwHg0/VHXveYaB5bI/AAAAAAAABJU/P9vPd6x7r6k/s1600/jQuery%2BIsotope%2B%2B%2BMWT%2BSecond%2BDemo.jpeg" alt="Mountain View" style="width:140px;height:140px"></a></li>
                </ul>
<ul>
                    <li class="oe_heading">
                        Slideshows
                    </li>
                    <li><a href="#"><img src="http://1.bp.blogspot.com/-cwKa_O9B7vA/VAuEZWDvfEI/AAAAAAAAA3U/10iWoMs8Ve4/s1600/graysacle%2Bimage%2Beffects.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:



Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top