<body>
  <h1>Injected Toolbar</h1>
  <ul>
    <li>Compatable with IE 8+</li>
    <li>Generates the menu based on layout of scaffolding variable</li>
    <li>Appends all the CSS, only 1 file needed</li>
    <li>Pure CSS Dropdown, no JavaScript for menu bar interaction, only creation</li>
  </ul>
</body>
/* The CSS for References */
/*
#dm-menu ul, #dm-menu li, #dm-menu span, #dm-menu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#dm-menu {
  height: 37px;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 37px;
  font-size:16px;
  font-family:Verdana,Geneva,sans-serif;
  z-index: 2000;
}
#dm-menu:after, #dm-menu ul:after {
  content: '';
  display: block;
  clear: both;
}
#dm-menu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 37px;
  padding: 0 20px;
  text-decoration: none;
}
#dm-menu ul {
  list-style: none;
}
#dm-menu > ul {
  float: left;
}
#dm-menu > ul > li {
  float: left;
}
#dm-menu > ul > li:hover:after,
#dm-menu > ul > li:hover > a:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
  font-height: 0;
  line-height: 0;
}

#dm-menu > ul > li:hover > a:after {
  z-index: -1;
  border-left-color: #070707;
  border-right-color: #070707;
}

#dm-menu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#dm-menu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#dm-menu .has-sub {
  z-index: 2001;
}
#dm-menu .has-sub:hover > ul {
  display: block;
}
#dm-menu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#dm-menu .has-sub ul li {
  *margin-bottom: -1px;
}
#dm-menu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px solid #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#dm-menu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#dm-menu .has-sub ul li.active a,
#dm-menu .has-sub .has-sub ul li.active a {
  font-weight: bold;
}
#dm-menu .has-sub .has-sub ul li a {
  font-weight: normal;
}
#dm-menu > ul > li > ul > .has-sub:after,
#dm-menu > ul > li > ul > .has-sub > a:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid #FFF;
  margin-top: -5px;
  margin-right: 10px;
  font-height: 0;
  line-height: 0;
}
#dm-menu > ul > .has-sub > a > span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -6px;
  right: 50%;
  padding: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #666;
  margin-right: -4px;
  font-height: 0;
  line-height: 0;
}
#dm-menu > ul > .has-sub:hover > a > span:after {
  display: none;
}
#dm-menu > ul > li > ul > .has-sub > a:after {
  z-index: -1;
}

#dm-menu .has-sub .has-sub:hover > ul {
  display: block;
}
#dm-menu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#dm-menu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px solid #6db2d0;
}
#dm-menu .has-sub .has-sub ul li:hover a {
  background: #095c80;
}
#dm-menu .dm-product, #dm-menu .dm-pull-right {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  color: #FFF;
  font-weight: bold;
  display: block-inline;
  line-height: 37px;
  padding: 0 20px;
}

#dm-menu .dm-product a{
  float: left;
  font-size: 120%;
}

#dm-menu .dm-pull-right {
  float: right;
  margin-right: 20px;
}

#dm-menu .dm-pull-right a.mini-link {
  margin-right: 37px;
  height: 30px;
}

#dm-menu a.alt-link {
  background: transparent;
}

#dm-menu a.alt-link:hover {
  color: #0fa1e0;
}


@media (min-width: 768px) and (max-width: 979px) {
  #dm-menu ul li a {
    font-size: 80%;
    padding: 0 15px;
  }
  #dm-menu div a.alt-link {
    font-size: 90%;
  }
}
@media (max-width: 767px) {
  #dm-menu ul li a {
    font-size: 60%;
    padding: 0 10px;
  }
  #dm-menu div a.alt-link {
    font-size: 80%;
  }
}

*/


body {
  margin-top: 40px;
}
var css = "#dm-menu ul,#dm-menu li,#dm-menu span,#dm-menu a{margin:0;padding:0;position:relative}#dm-menu{height:37px;background:#141414;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;background:-moz-linear-gradient(top,#32323a 0,#141414 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#32323a),color-stop(100%,#141414));background:-webkit-linear-gradient(top,#32323a 0,#141414 100%);background:-o-linear-gradient(top,#32323a 0,#141414 100%);background:-ms-linear-gradient(top,#32323a 0,#141414 100%);background:linear-gradient(to bottom,#32323a 0,#141414 100%);border-bottom:2px solid #0fa1e0;position:fixed;left:0;top:0;right:0;height:37px;font-size:16px;font-family:Verdana,Geneva,sans-serif;z-index:2000}#dm-menu:after,#dm-menu ul:after{content:'';display:block;clear:both}#dm-menu a{background:#141414;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;background:-moz-linear-gradient(top,#32323a 0,#141414 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#32323a),color-stop(100%,#141414));background:-webkit-linear-gradient(top,#32323a 0,#141414 100%);background:-o-linear-gradient(top,#32323a 0,#141414 100%);background:-ms-linear-gradient(top,#32323a 0,#141414 100%);background:linear-gradient(to bottom,#32323a 0,#141414 100%);color:#fff;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:37px;padding:0 20px;text-decoration:none}#dm-menu ul{list-style:none}#dm-menu>ul{float:left}#dm-menu>ul>li{float:left}#dm-menu>ul>li:hover:after,#dm-menu>ul>li:hover>a:after{content:'';display:block;width:0;height:0;padding:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #0fa1e0;margin-left:-10px;font-height:0;line-height:0}#dm-menu>ul>li:hover>a:after{z-index:-1;border-left-color:#070707;border-right-color:#070707}#dm-menu>ul>li.active>a{box-shadow:inset 0 0 3px #000;-moz-box-shadow:inset 0 0 3px #000;-webkit-box-shadow:inset 0 0 3px #000;background:#070707;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;background:-moz-linear-gradient(top,#26262c 0,#070707 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#26262c),color-stop(100%,#070707));background:-webkit-linear-gradient(top,#26262c 0,#070707 100%);background:-o-linear-gradient(top,#26262c 0,#070707 100%);background:-ms-linear-gradient(top,#26262c 0,#070707 100%);background:linear-gradient(to bottom,#26262c 0,#070707 100%)}#dm-menu>ul>li:hover>a{background:#070707;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;background:-moz-linear-gradient(top,#26262c 0,#070707 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#26262c),color-stop(100%,#070707));background:-webkit-linear-gradient(top,#26262c 0,#070707 100%);background:-o-linear-gradient(top,#26262c 0,#070707 100%);background:-ms-linear-gradient(top,#26262c 0,#070707 100%);background:linear-gradient(to bottom,#26262c 0,#070707 100%);box-shadow:inset 0 0 3px #000;-moz-box-shadow:inset 0 0 3px #000;-webkit-box-shadow:inset 0 0 3px #000}#dm-menu .has-sub{z-index:2001}#dm-menu .has-sub:hover>ul{display:block}#dm-menu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#dm-menu .has-sub ul li{*margin-bottom:-1px}#dm-menu .has-sub ul li a{background:#0fa1e0;border-bottom:1px solid #6fc7ec;filter:none;font-size:11px;display:block;line-height:120%;padding:10px}#dm-menu .has-sub ul li:hover a{background:#0c7fb0}#dm-menu .has-sub ul li.active a,#dm-menu .has-sub .has-sub ul li.active a{font-weight:bold}#dm-menu .has-sub .has-sub ul li a{font-weight:normal}#dm-menu>ul>li>ul>.has-sub:after,#dm-menu>ul>li>ul>.has-sub>a:after{content:'';display:block;width:0;height:0;position:absolute;top:50%;right:0;padding:0;border-bottom:6px solid transparent;border-top:6px solid transparent;border-left:6px solid #FFF;margin-top:-5px;margin-right:10px;font-height:0;line-height:0}#dm-menu>ul>.has-sub>a>span:after{content:'';display:block;width:0;height:0;position:absolute;bottom:-6px;right:50%;padding:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #666;margin-right:-4px;font-height:0;line-height:0}#dm-menu>ul>.has-sub:hover>a>span:after{display:none}#dm-menu>ul>li>ul>.has-sub>a:after{z-index:-1}#dm-menu .has-sub .has-sub:hover>ul{display:block}#dm-menu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#dm-menu .has-sub .has-sub ul li a{background:#0c7fb0;border-bottom:1px solid #6db2d0}#dm-menu .has-sub .has-sub ul li:hover a{background:#095c80}#dm-menu .dm-product,#dm-menu .dm-pull-right{font-family:Helvetica,Arial,Verdana,sans-serif;color:#FFF;font-weight:bold;display:block-inline;line-height:37px;padding:0 20px}#dm-menu .dm-product a{float:left;font-size:120%}#dm-menu .dm-pull-right{float:right;margin-right:20px}#dm-menu .dm-pull-right a.mini-link{margin-right:37px;height:30px}#dm-menu a.alt-link{background:transparent}#dm-menu a.alt-link:hover{color:#0fa1e0}@media(min-width:768px) and (max-width:979px){#dm-menu ul li a{font-size:80%;padding:0 15px}#dm-menu div a.alt-link{font-size:90%}}@media(max-width:767px){#dm-menu ul li a{font-size:60%;padding:0 10px}#dm-menu div a.alt-link{font-size:80%}}",
	scaffolding = {
		"home" : {
			"text" : "Home",
			"link" : "/index.html"
		},
		"products" : {
			"text" : "Products",
			"active" : true,
			"submenu" : {
				"product1" : {
					"text" : "Product 1",
					"submenu" : {
						"subitem1" : {
							"text" : "Sub item"
						},
						"subitem2" : {
							"text" : "Sub item"
						}
					}
				},
				"product2" : {
					"text": "Product 2",
					"active" : true,
					"submenu" : {
						"subitem1" : {
							"text" : "Sub item"
						},
						"subitem2" : {
							"text" : "Sub item",
							"active" : true
						}
					}
				}
			}
		},
		"about" : {
			"text" : "About"
		},
		"contact" : {
			"text" : "Contact"
		}
	},
	signedin  = true,
    head = document.head || document.getElementsByTagName('head')[0],
    body = document.body || document.getElementsByTagName('body')[0],
    style = document.createElement('style'),
    menu = document.createElement('div'),
    div, a, nav, builder;

style.type = 'text/css';
style.id = 'dm-menu-style';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

// Append Style
head.appendChild(style);

// Create Menu Starting Structure
menu.id = "dm-menu";

// Create Product Logo and Link
div = document.createElement('div');
div.className = "dm-product";
a = document.createElement('a');
a.innerText = "PRODUCT";
a.textContent = "PRODUCT";
a.href = "#";
a.className = "alt-link";
div.appendChild(a);
menu.appendChild(div);

// Create Core Menu from Scaffolding
builder = function(obj, elem){
	if(elem === undefined) {
		var ul = document.createElement('ul');
		return arguments.callee(obj, ul);
	}
	for(var key in obj) {
		var li = document.createElement('li'),
			link = document.createElement('a'),
			span = document.createElement('span');
		link.href = (obj[key].link === undefined) ? "#" : obj[key].link;
		if(obj[key].active !== undefined && obj[key].active === true) li.className = "active";
		if(obj[key].submenu !== undefined) li.className += (obj[key].active !== undefined) ? " has-sub" : "has-sub";
		span.innerText = obj[key].text;
		span.textContent = obj[key].text;
		link.appendChild(span);
		li.appendChild(link);
		if(obj[key].submenu !== undefined) {
			var ul = arguments.callee(obj[key].submenu);
			li.appendChild(ul);
		}
		// Add Menu Element to Main menu
		elem.appendChild(li);
	}

	// Add Last Class
	var tmp, nodes = elem.childNodes;
	for(node in nodes){
		if(nodes[node].nodeType === 1) tmp = nodes[node];
	}
	if(tmp.className !== "has-sub" && tmp.className !== "active has-sub")
		tmp.className += (tmp.className === undefined || tmp.className === "") ? "last" : " last" ;

	return elem;
}

// Apply to Menu
nav = builder(scaffolding);
console.log(nav);
console.log(nav.outerHTML);
menu.appendChild(nav);

// Create Signin or Signout Button
div = document.createElement('div');
div.className = 'dm-pull-right';
a = document.createElement('a');
a.className = "alt-link";
if(signedin) {
	a.innerText = "Logout";
	a.textContent = "Logout";
	a.href = "logout.php";
} else {
	a.innerText = "Log-in";
	a.textContent = "Log-in";
	a.href = "signin.php";
}
div.appendChild(a);
menu.appendChild(div);

// Put the Menu in the Body
body.appendChild(menu);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.