MediaWiki:Menu.rythm
Jump to navigation
Jump to search
Links
- MediaWiki:Bootstrap.rythm
- MediaWiki:Form.rythm
- https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
- https://getbootstrap.com/docs/3.3/components/#navbar
- https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click
Rythm template source
@// Rythm template for Bootstrap menu
@// static code
@def static {
// a menu
class Menu extends MenuItem {
String homeUrl_en;
String homeUrl_de;
String iconUrl;
public Menu(String homeUrl_en,String homeUrl_de,String iconUrl) {
this.homeUrl_en=homeUrl_en;
this.homeUrl_de=homeUrl_de;
this.iconUrl=iconUrl;
}
}
class MenuItem {
String id;
String text_de;
String text_en;
String url_en;
String url_de;
Map<String,MenuItem> menuItemMap=new LinkedHashMap<String,MenuItem>();
public MenuItem(){
this.id="root";
}
/**
* construct me from the given id texts and urls
*/
public MenuItem(String id,String text_en,String url_en, String text_de,String url_de) {
this.id=id;
this.text_en=text_en;
this.text_de=text_de;
this.url_en=url_en;
this.url_de=url_de;
}
public void addMenuItems(MenuItem[] menuItems) {
for (MenuItem menuItem:menuItems) {
addMenuItem(menuItem);
}
}
public void addMenuItem(MenuItem menuItem) {
menuItemMap.put(menuItem.id,menuItem);
}
public MenuItem getMenuItem(String menuItemId) {
MenuItem menuItem=menuItemMap.get(menuItemId);
return menuItem;
}
public Collection<MenuItem> getMenuItems() {
return menuItemMap.values();
}
}
}
@// show the given menu - potentially in german
@def showMenu(boolean de,Menu menu) {
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='@(de?menu.homeUrl_de:menu.homeUrl_en)'>
<img src='@(menu.iconUrl)' style="max-height:7vh; margin-top: -2vh;" >
</a>
</div>
<div>
<ul class="nav navbar-nav">
@for (MenuItem menuItem:menu.getMenuItems()) {
@{
Collection<MenuItem> subMenuItems=menuItem.getMenuItems();
}
<li class="dropdown"><a class="btn btn-secondary dropdown-toogle" role="button" data-toggle="dropdown" href="@(de?menuItem.url_de:menuItem.url_en)">@(de?menuItem.text_de:menuItem.text_en)</a>
@if(subMenuItems.size()>0) {
<ul class="dropdown-menu">
@for (MenuItem subMenuItem:subMenuItems) {
<li><a class="dropdown-item" href="@(de?subMenuItem.url_de:subMenuItem.url_en)">@(de?subMenuItem.text_de:subMenuItem.text_en)</a></li>
}
</ul>
}
</li>
}
</ul>
</div>
</div>
</nav>
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
$('.dropdown-toggle').click(
function(){
if ($(this).next().is(':visible')) {
location.href = $(this).attr('href');;
}
});
});
</script>
}