Vertical Navigation Bar

Vertical Navigation Bar

by Arvid John -
Number of replies: 8
Hi moodle-community,
I recently finished my first project on setting up a moodle platform for an enterprise-client. I'd like to share my hacks for that 1.9.4 moodle with you.

Part I - Vertical navigation bar

If you are like me, you want to see the source code first and then read the explanations. Et voilà:

Version 1 (for pages that already use the regular layout with three big coloumns):
//Arvid Hack very first column to have navigation
// print_container_start();
echo '<!-- Navigation Column -->
<td id="navcol">
<table id="navtable"><tbody>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/a.gif" title="a: Home"/><br/>Home</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/course/view.php?id='.$course->id.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/b.gif" title="b: Current course"/><br/>Course</a>
</td></tr>
<tr><td id="navcell">
<a href="externallink1.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/c.gif" title="c: to contac"/><br/>Contact</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/imprint.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/d.gif" title="d: imprint"/><br/>Imprint</a>
</td></tr>
</tbody>
</td></tr>
</tbody></table>
</td>';

Version 2 (For pages without the three-columns lay-out, that's typically where no blocks can be used)

echo '<table id="layout-table"><tbody><tr>
<td id="navcol">
<table id="navtable"><tbody>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/a.gif" title="a: Home"/><br/>Home</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/course/view.php?id='.$course->id.'"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/b.gif" title="b: Current course"/><br/>Course</a>
</td></tr>
<tr><td id="navcell">
<a href="externallink1.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/c.gif" title="c: to contac"/><br/>Contact</a>
</td></tr>
<tr><td id="navcell">
<a href="'.$CFG->wwwroot.'/imprint.php"><img width="56" height="56" border="0" src="'. $CFG->wwwroot .'/pix/n/d.gif" title="d: imprint"/><br/>Imprint</a>
</td></tr>
</tbody></table>
</td>
<td id="middle-column">';
… original source code continues before closing the table with:
echo '</tr></tbody></table>';


A high priority demand of the enterprise was to have a vertical navigation bar, that always looks the same. They consider this a) more beautiful b) more intuitive and thus user-friendly, and c) their website has a vertical navigation and consistency is important. Elements of this vertical navigation are "Home", "Course" (obviously has no meaning on the start-page, there it redirects to "Home" as well), "Contact", and "Imprint". Although the horizontal, native moodle-navigation bar is a little bit counter-intuitive (personal opinion) we kept it for several reasons.

The vertical navigation is seen on all pages except the start-page. The hacks need to be inserted it into the courseview as well as all views of all used modules (file-download, wiki, quiz, lesson):

* homepagename/moodle/course/format/topics/format.php, line 74 above /// The left column ..., Version 1 (this means, the bar will only appear if the topics-format is used in the course. If you use other or several course-formats, change the according files as well)

* homepagename/moodle/mod/lesson/viewstart.html line 13 above <!-- First Column -->, Version 1 with added php-tags, i.e. <?php "Code Version 1" ?>

* homepagename/moodle/mod/quiz/view.php line 72 above print_container_start, Version 1

* homepagename/moodle/mod/quiz/attempt.php, line 432 above // Print the quiz name heading and tabs for teacher, etc. Closing the table at new line 565 (above //Finish the page) Version 2

* homepagename/moodle/mod/wiki/view.php, line 355, adapt and insert the Version 2 code between </div> and <div id=”wiki-view” class = “mwiki”> Clsoe the table above print_footer, Version 2

* homepagename/moodle/mod/resource/type/file/resource.class.php, line 514, above if (trim($resource->summary)) { replace old code and close in new line 731 with following: if ($inpopup) {
echo "<div class=\"popupnotice\">(<a href=\"$fullurl\">$strdirectlink</a>)</div>";
echo "</div>"; // MDL-12098
//Hack Arvid Ende der Tabelle
echo '</tr></tbody></table>';
print_footer($course); // MDL-12098
} else {
print_spacer(20,20);
//Hack Arvid Ende der Tabelle
echo '</tr></tbody></table>';
print_footer($course);

That's it for now,
Arvid
Average of ratings: -
In reply to Arvid John

Re: Vertical Navigation Bar

by Paul Holden -
Picture of Core developers Picture of Moodle HQ Picture of Moodle Workplace team Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Could this have been achieved easier by modifying (or creating) a theme? This way it would stick between upgrades, which will now become harder as you've modified core code.
In reply to Paul Holden

Re: Vertical Navigation Bar

by Frank Ralf -
Hi Arvid,

I agree with Paul. You might have a look at http://moodle.org/mod/forum/discuss.php?d=128160 to see how far you can come with CSS alone.

The screenshot shows another proof-of-concept for putting the side admin block fixed in the upper left corner of the screen.

CSS FAQ and Themes FAQ are good starting points for learning more about CSS and theming.

hth
Frank
Attachment Fixed_site_admin_block.png
In reply to Frank Ralf

Re: Vertical Navigation Bar

by Arvid John -
Hi,

thanks for the idea, I think I would prefer this solution for my own installation (and by what I've seen from moodle 2.0 the question won't be relevant in there). However, the given task was to replicate a vertical navigation with four specific icons in a certain position, to match the platform with an existing site.

As far as I see, it's hard to replicate that with CSS, as there need to be the four objects first, isn't it?

In reply to Arvid John

Re: Vertical Navigation Bar

by Frank Ralf -
If you create your own theme you can put any code you want in its header.html file for example.

Do you perhaps have a screenshot of the menu in question?
In reply to Frank Ralf

Re: Vertical Navigation Bar

by Arvid John -
Hi Ralf, I think I was trying to put it into the header, but didn't find a way to have it floating on the left, with the regular course content next to it, that's why I put it into the table. I'd prefer knowing a way to put it into CSS! As the platform is still non-public I don't want to offer a screenshot, but I made a conceptual drawing (sorry, always preferred music-lessons to drawing ;) ).
In reply to Arvid John

Re: Vertical Navigation Bar

by Frank Ralf -
Hi Arvid,

Thanks, but unfortunately I cannot open your JP2 file. Could you upload it in another format (GIF, PNG or JPG)?

tia
Frank
In reply to Frank Ralf

Re: Vertical Navigation Bar

by Arvid John -
Hi,

sorry for the delay, subscribed to this forum now.
Attachment Scanned_Image.jpg
In reply to Frank Ralf

Re: Vertical Navigation Bar

by Arvid John -
Hi,

now that I'm thinking about it, it shouldn't be that difficult to add something to the header which is left of the main content/table. I failed finding a way to make the navigation bar float left, but maybe it would be possible to make the main table float right...

Will let you know, if I successfully followed up on that. Thanks for the input so far.