Dropdown Menu on Frames | DeviantCoders

I had this problem a week ago. It involves adding a dropdown menu on frames. The menu is expected to span across involved frames. Aside from that, the dropdown is set to use a predefined image.

The problem stated above is easy to be solved at first glance. And indeed, I was able to solve it using a select tag. But to my dismay, select tag does not render the right background on IE like FF does.

Luckily, I figured something right. I shall show you how, and hope it works on your side as well.

1. First, let's set the main frame.

You can save it as main_frame.html

	<frameset border="0" frameborder="0" rows="40,*">
		<frame name="header" scrolling="no" noresize src="header_frame.html">
		<frame name="content" scrolling="no" noresize src="content_frame.html">
	</frameset>

2. Next, let's create our header_frame.html.

As you can see, the select tag on the code below acts as the dropdown menu. Once the dropdown menu is clicked, it will call the javascript code on the head tag to call the appropriate page to be displayed at the content area.

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
		<head>
			<title>Header Frame</title>
			
			
		</head>
		<body class="head">
			 					
 					
 				
		</body>
	</html>

3. Now, let's create our Home Page, and we'll save it as content_frame.html.

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
		<head>
			<title>Home Page</title>
			
		</head>
		<body>
			Welcome to Home Page.
		</body>
	</html>

4. Then, we'll create our Book pages. Since we have three books, we'll name them Book1.html, Book2.html, and Book3.html, respectively.

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
		<head>
			<title>Book 1</title>
			<link href="style.css" media="all" rel="stylesheet" type="text/css">
		</head>
		<body>
			Welcome to Book 1.
		</body>
	</html>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
		<head>
			<title>Book 2</title>
			<link href="style.css" media="all" rel="stylesheet" type="text/css">
		</head>
		<body>
			Welcome to Book 2.
		</body>
	</html>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
		<head>
			<title>Book 3</title>
			<link href="style.css" media="all" rel="stylesheet" type="text/css">
		</head>
		<body>
			Welcome to Book 3.
		</body>
	</html>

4. Lastly, we need to create our css file and we'll save it as style.css

	body
	{
		font-family: Verdana;
		font-size: 12px;
		color: #333333;
	}

	body.head
	{
		background-color: #FFF6D2;
	}

	a 
	{
		border: none;
		padding:0;
	}

	img
	{
		border: none;
		display: block;
	}

	li
	{
		list-style-image:none;
		list-style-position:outside;
		list-style-type:none;
		float: left;
	}

	li#manual
	{
		background: url(images/manual.gif) no-repeat;
		cursor: pointer;
	}

	.container 
	{
		background:transparent url(/images/manual_select.png) no-repeat scroll 0 0;
		border:0 none;
		height:14px;
		left:8px;
		overflow:hidden;
		position:relative;
		top:5px;
		width:80px;
		z-index: 0;
		cursor: pointer;
	}

	select.drop_menu
	{
		background:transparent url(/images/manual_select.png) no-repeat scroll 0 0;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-top: 0 !important;
		height:18px;
		color:black;
		width:70px;
		text-indent: 100px;
		cursor: pointer;
		z-index: -1;
		position: absolute;
		left: 0;
		top: 0;
		filter:alpha(opacity=1);
		-moz-opacity:.25;
		opacity:.01; 
	}

And those are the files involved. Now, I just want to explain what I did.

For the dropdown menu, I used the select tag since it will always float once it expands its options. From there, I am expecting it to move across the frames.

For the predefined image to be used, IEs do not apply whatever background you put on it. So what I did, I turned the select tag to a transparent object and placed the select tag inside a div which has a background that corresponds to the predefined image on the requirement.

I hope this will help you as well. Till next time.