How to add drop down menu to the default navbar

Go down

Tutorial How to add drop down menu to the default navbar

Post by Mati™ on Sun Dec 21, 2014 10:15 pm

How to add drop down menu to the default navbar


This tutorial will show you how to add drop down on the default navbar of your forum.

Demo:
Spoiler:

Adding the javascript

Go to Administration Panel ► Modules ► Javascript codes management ► Create a new script.

Title : what ever you like
Placement : In the home page
Add the following Code
Code:
$(document).ready(function(){
$('#i_icon_mini_index').before('<ul class="drop">
<li><a href="#">Your Link 1</a></li>
<li><a href="#">Your Link 2</a></li>
<li><a href="#">Your Link 3</a></li>
<li><a href="#">Your Link 4</a></li>
<li><a href="#">Your Link 5</a></li>
</ul>');
});


$(document).ready(function(){
    $([window, document]).blur(function(){
        $('ul.drop').css({display: 'none'});
    });
     $('a.mainmenu[href="/forum"]').hover(function(){
 $(this).children("ul").slideDown();
        },function(){
            $(this).children("ul").slideUp();
    });
});

The CSS Stylesheet:

Go to Administration Panel ► Display ► Colors ► CSS stylesheet. Copy and paste the following code :
Code:

ul.drop {
    background: #dee8fc;
    border: 1px solid #94afdd;
    border-radius: 5px;
    display: none;
    margin-top: 20px;
    padding: 5px;
    position: absolute;
    width: 200px;
    z-index: 999;
}
ul.drop li {
    float: none;
}
ul.drop li a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #082c51 !important;
    display: block;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: normal;
    margin: 0;
    padding: 3px;
}
ul.drop li a:hover {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 3px;
    text-decoration: none;
}

Save and you're done!

Note:
The following code will show the drop down menu on the "Home" but you can have it at any link you want just edit this part a.mainmenu[href="/forum"] on the script for the link you want the drop down to show.

This tutorial was written by Mati™, for FM Focus
avatar
Mati™
Administrator
Administrator

Age : 32
Posts : 2113
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum