Creating a Static (Fixed) Top Menu Bar

MohamedH · July 2014

This is pure css and html addition to create a static (Fixed) menu bar at the top of every page.

*
If you improve it please share it with us
*

you could duplicate your style or embed & add the changes to your current style (hopefully there will be no conflict with the css classes)

There is no limit to the styling you could apply to this menu bar (font face, bgcolor, borders, etc) just modify the css code.

1- Copy "default.master.tpl" from "vanillaforum/applications/dashboard/views/" to

yourtheme/view/ (create folder if not presence)

2- Download custom.css file and place it in
yourtheme/design/ (create folder if not presence)

3- Download 253.png and place it in
yourtheme/design/

4- Open (or download attached file) and
After
<body id="{$BodyID}" class="{$BodyClass}">
Add

<!-- Start Drop Menu-->
<div class="header">
    <ul id="nav">
        <li><a href="#" title="Return home">Home</a> </li>
        <li><a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>
        </li>
        <li><a href="#" title="The services we offer">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>
        </li>
        <li><a href="#" title="Our product range">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>
            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>
            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>
            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>
            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
        </li>
        <li><a href="#" title="Get in touch with us">Contact</a>
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
        </li>
    </ul>
</div>
<br />
<br />
<!-- End Drop Menu-->

END

Change the links to the ones you need to add.
to add a dropdown just add a ul tag into an li tag.

Special thanks to
Helping Develop (click here)
&
csswizardry

MohamedH · July 2014

Sample on a site I'm working on.. (with rtl tweaks) Click Here

vrijvlinder · July 2014

great idea, there is a plugin that does something like that, it adds the dropdown to the menu http://vanillaforums.org/addon/index-plugin the benefit is that you can use it with any theme without the need to add code to the master. this plugin works by using css

also there is http://vanillaforums.org/addon/categoriesdropdown-plugin if you want your categories in a dropdown on the menu, this plugin is a combination of javascript and css, the javascript to work the dropdown works on any links that the html represents a drop down

for example:

<ul><li></li><ul><li></li></ul></ul>

or php links for a default.master.php , constructed like this example where Menu is the parent link of the drop down .

$this->Menu->AddLink('Menu', T('Menu'),'#');
$this->Menu->AddLink('Menu', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
$this->Menu->AddLink('Menu', T('Edit Profile'),'/profile/edit',array('Garden.SignIn.Allow'),array('title'=>'Edit Your profile'));
$this->Menu->AddLink('Menu', T('Home'),'/');
$this->Menu->AddLink('Menu', T('Activity'), '/activity',array('Garden.SignIn.Allow'));
$this->Menu->AddLink('Menu',T('New Discussion'), 'post/discussion',array('Garden.SignIn.Allow'));

Creating a Static (Fixed) Top Menu Bar

Comments