Dynamisk Dropdown menu med Bootstrap

Med Twitter Bootstrap kan man nemt lave en dynamisk dropdown menu i flere niveauerdropdown

Menuen er lavet som en Twitter Basic navbar. Til at beregne menuen automatisk benyttes en managed bean. Nedenfor ses noget at koden – bemærk at html koden er tweaket lidt for at få menuen til at åbne ‘OnMouserOver’ i stedet for ‘OnClick’ som er standarden foir Twitter Menuen. Bl.a. er class=\”dropdown-toggle\” data-toggle=\”dropdown\” fjernet og der der tilføjet en class=”cascading” til sub menuerne

/* Creates LI elements */
private String GetHtmlFromDocument( Document doc, int level ) {
	String html = "";
	try {
		if ( IsLinkSupportedOnWeb( doc )) {
			html += "<li class=\"dropdown\">";
			html += "<a  href=\""+GetUrlFromDocument( doc )+"\" target=\"_blank\">" + doc.getItemValueString("Subject"); //class=\"dropdown-toggle\" data-toggle=\"dropdown\"
			html += "</a>";
			html += GetHtmlFromResponses( doc.getResponses(), level+1);
			html += "</li>";
		}
		
	} catch (NotesException e1) {
		e1.printStackTrace();
	}
	return html;
}

/* Creates the UL element */
private String GetHtmlFromResponses( DocumentCollection coll, int level ) {
	Document doc;
	String html="";
	
	if (coll==null) return "";
	if(level==0){
		// top navigator
		html += "<ul class=\"nav\">";
	} else if (level==1) {
		// immediate dropdown menu
		html += "<ul class=\"dropdown-menu\" role=\"menu\" >";
	} else {
		// sub dropdown menu
		html += "<ul class=\"dropdown-menu cascading\" role=\"menu\" >";
	}
	
	try {
		doc = coll.getFirstDocument();
		if (doc==null) return "";
		
		while (doc!=null) {
			html += GetHtmlFromDocument( doc, level );
			doc = coll.getNextDocument(doc);
		}
	}
	catch (NotesException e) {
		e.printStackTrace();
	}
	
	html += "</ul>";
	return html;
}

På en XPage kan menuen indsættes med dette kode:

		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<!-- All menu html is read by a managed bean -->
					<xp:text escape="false" value="#{javascript:Menu.getHtml('Top');}"></xp:text>
				</div>
			</div>
		</div><!-- /.navbar -->

MouseOver effekt og formatering af undermenuer klares med nogle få CSS tilføjelser

/* Show on hover: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click */
ul.nav li.dropdown:hover>ul.dropdown-menu {
	display: block;
}

ul.dropdown-menu li:hover>ul {
	display: block;
}

.navbar .dropdown-menu {
	margin-top: 0px;
}

/* Cascading menu */
.cascading {
	position: absolute;
	top: 20px;
	left: 50px;
	z-index: top;
}

Links:

En tanke om "Dynamisk Dropdown menu med Bootstrap"

  1. Har ikke læst din artikel, og kender ikke dit website, men at andre danskere bruger bootstrap er thumbs up! God stil

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

*