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.


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
$('#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>

    $([window, document]).blur(function(){
        $('ul.drop').css({display: 'none'});

The CSS Stylesheet:

Go to Administration Panel ► Display ► Colors ► CSS stylesheet. Copy and paste the following 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!

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

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

View user profile

Back to top Go down

Back to top

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