Customizing the web user interface in Munin using a mouseover tabs menu
DSUG, Bergen 2006
Obiajulu Odu, Karl Magnus Nilsen
University Library, University of Tromsø uit.no/ub
Munin
An institutional digital archive. It contains research work
publications at the University of Tromsø.
Powered by DSpace (v1.3.2).
10.04.2006 Universitetsbiblioteket i Tromsø 2
Why customising the default DSpace web user interface?
Default DSpace install web user
interface is not ideal for Munin. Munin needs a better presentation of the contents like:
10.04.2006
Search Browse by My Dspace etc
Universitetsbiblioteket i Tromsø 3
Moving Dspace default menu to a mouseover tabs menu
Based on javascript and css. When moving the mouse over
designated links, additional "sub links" appear beneath it.
Think of it as an inline two level
menu.
10.04.2006 Universitetsbiblioteket i Tromsø 4
Munin menu
10.04.2006
Universitetsbiblioteket i Tromsø
5
Example of Two level menu
10.04.2006
Universitetsbiblioteket i Tromsø
6
Munin testserver homepage
10.04.2006
Universitetsbiblioteket i Tromsø
7
Re-styling the left-side menu in dspace
A three step process: 1. Modify the main links in default dspace. 2. Specify the dimensions (width/height) of the container holding the sub-links. 3. Input the sub-links themselves inside the script.
Universitetsbiblioteket i Tromsø 8
10.04.2006
Where to put the scripts
Create a new javascript file (navbarhover.js)in … /src/jsp/local/ : Copy the default install files:
from
navbar-default.jsp and navbar-admin.jsp
Copy default install file styles.css.jsp from …/src/jsp/ to …/src/jsp/local/. Edit styles.css.jsp
10.04.2006 Universitetsbiblioteket i Tromsø 9
…/src/jsp/layout to …/src/jsp/local/layout. Edit the two files.
navbar-hover.js
* Show sub menu in Munin navigation menu. * Karl Magnus Nilsen - January 2006. */ var subMenus = ["sub0", "sub1", "sub2", "sub3", "sub4", "sub5"]; var mainTabs = ["", "main1", "main2", "main3", "main4", "main5"]; var tabHighlightClass = 'selected'; function showSubmenu(num){ for ( i = 1; i < mainTabs.length; i++ ) { document.getElementById(mainTabs[i]).className = ''; } if ( num != 0 ) document.getElementById(mainTabs[num]).className = tabHighlightClass; for(i in subMenus){ if(i != num){ document.getElementById(subMenus[i]).style.display = 'none'; } else{ document.getElementById(subMenus[i]).style.display = 'block'; } } } 10.04.2006 Universitetsbiblioteket i Tromsø 10
Conclusions
Better utilisation of width/height of
a page
Minimizing
menu
page scrolling
Easily toggle between a two level
10.04.2006 Universitetsbiblioteket i Tromsø 11
To get the scripts/codes, send an email to obi@ub.uit.no.
Thank you and enjoy the rest of DSUG 2006!!
10.04.2006 Universitetsbiblioteket i Tromsø 12
Questions!!!!!
10.04.2006
Universitetsbiblioteket i Tromsø
13