js drop down menu

4.7 - DROP DOWN MENU

To insert a drop-down menu on many pages
This script has been used to for the CIM recordings pages.
Especially to create more space on mobile devices' small screens.

1. place js script (current: js_menu/cim_main_menu.js) in HEAD of introduction frame

var menu ={	name: "home",	submenu: function() 	
	{	return "<div class=\"menuposition\">
	<div class=\"nav\">" 
 +  "<ul><ul><li class=\"enlarge\"><img src=\"menu_style/grafik/menu-alt-512-hvid.png\"</img>"

+ "<ul><li class=\"empty\"></li>"

+ "<a href=\"0_frontpage.html\"><li class=\"menulink\">home</li></a>"
+ "<a href=\"1_freeform.html\"><li>free form</li></a>"
+ "<a href=\"2_jazz.html\"><li>jazz</li></a>"
+ "<a href=\"2_1_bigband.html\"><li>bigband</li></a>"
+ "<a href=\"3_studio.html\"><li>studio</li></a>"
+ "<a href=\"4_african.html\"><li>african</li></a>"
+ "<a href=\"5_songs.html\"><li>songs</li></a>"
+ "<a href=\"6_electropoetica.html\"><li>OCS</li></a>"
+ "<a href=\"7_vaerker.html\"><li>værker</li></a>"
+ "</ul></div></div>"

	},	};document.write(menu.submenu() 

+ "</ul></ul></div></div>");

2. CSS - "menu_style/pages_style.css". Only body background:grey; + all below has been kept.

.menuposition	{ position:fixed; top:10px; left: 7px; opacity:50%;}
.container {width: auto; margin-left:75px; }

.nav li.empty:hover {background: url('menu_style/grafik/baggr11dark5.jpg');line-height:15px; } 
	/* 2. line under the menu icon is empty and transparent (has same background as the page */

.nav li.empty2:hover {background: url('menu_style/grafik/baggr11dark5.jpg');line-height:20px; }

.nav li.enlarge	{float:left; text-align:center; height:35px;line-height:35px;width:50px}
/* bigger height of top line with a larger icon than before - 
styling of the two elements is done in the simple js sheet 'document write' 
-> the menu can be inserted on any page with a reference to the js script 'js_menu/cim_main_menu.js' */

.nav li.enlarge:hover {background-color:black;}  /* color of HOME (menulink)  */

.nav li.menulink:hover {color:#f94d4d; text-decoration:none;}

.nav li.menulink {color:green; text-decoration:none;}   /* sets color of hover-link in playlist */
		
.nav ul {list-style:none; margin:0; padding: 0;}

.nav li {float:left; width:80px; text-align:center; color: #e8e8f4; border: 1px; position:relative; height:30px; line-height:30px;}

.nav li ul li {float:none; width:75px;text-align:left; padding-left:5px; border-top:1px; }
.nav a {text-decoration:none; color:#FFF;} 
.nav li ul {position:absolute; top:20px; left:0;  visibility: hidden; }  
.nav li:hover {color:#a50008; }
.nav li:hover ul {visibility: visible; }
.content {clear:both;} 	
	
 /* sets color of hover-link in playlist */

.nav ul 		{list-style:none; margin:0; padding: 0;
			}
.nav li 		{float:left; width:80px; ; text-align:center; color: #e8e8f4; border: 1px; position:relative; height:30px; line-height:30px;}
.nav li ul li 	{float:none; width:75px;text-align:left; padding-left:5px; border-top:1px; }
.nav a 		{text-decoration:none; color:#FFF;} 
.nav li ul 		{position:absolute; top:20px; left:0;  visibility: hidden; }  
.nav li:hover 	{color:#a50008; }
.nav li:hover ul 	{visibility: visible; }
.content 		{clear:both;}

The script is a simple 'document write'.

div class "menuposition" css - the placement of the menu.
div class "nav" css - the styling of the single elements in the drop-down
li class "enlarge" was necessary to make space for the menu-icon
NB! backslash - quote \" is standard in js to make references work

menuposition places the menu on the page
container pushes page content (left margin)
--> space for menu
nav first lines - the special conditions
next the general definitions