Choose from our various pricing plans. There is a package for everyone!


How to add drop down menu to the default navbar

View previous topic View next topic 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 : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

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

Back to top Go down

View previous topic View next topic Back to top


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