Member Avatar for preetisiyer 
<%@ include file="header_style.jsp" %>
<html>

<head> </head>

<script type="text/javascript">

	MakeHoverable = function(navigationDiv){
	var liEls = document.getElementById(navigationDiv).getElementsByTagName("LI");
	for (var i=0; i<liEls.length; i++) {
		liEls[i].onmouseover = function()
		{
			this.className += " sfhover";
		}
		liEls[i].onmouseout = function()
		 {
			this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
			
		  }
	}

}

function exit(){
       var url = location.href;
       var result = url.search(/saml/i);
       if (result != -1)
               {
                document.location.href = 'https://bmdwas.honeywell.com/irj/portal?NavigationTarget=navurl://43a5aba0b4712f1ad658ce0df1f5b0df';
               }
               }


</script>



<%-- this is the main navigation section --%>
<body>


<div id="navigation">


<ul>
<li  class='Level3'><a href="www.google.com">HOME</a></li>

<%-- About US--%>			
	<li  class='Level3'><a href="www.google.com">ABOUT US</a></li>
	<UL>

		<li class="Level4">
		<Table  border=0 CELLSPACING=0 width="100">
		<Tr onMouseOver="this.style.backgroundColor='#b5b5b5'"; onMouseOut="this.style.backgroundColor='#999999'";>
		<Td width="20">&nbsp;
			<img align=center src="<%=componentRequest.getWebResourcePath() + "/images/dot_w.gif" %>">
		</TD>
		<TD width="80">
           <a href="<%=URL%>AboutUs/Overview/">Overview
		   </a>
		</Td>
		</Tr>
		</Table>	
		</li>	
		
		<li class="Level4">
   		<Table  border=0 CELLSPACING=0 width="100">
		<Tr onMouseOver="this.style.backgroundColor='#b5b5b5'"; onMouseOut="this.style.backgroundColor='#999999'";>
		<Td width="36">&nbsp;
			<img align=center src="<%=componentRequest.getWebResourcePath() + "/images/dot_w.gif" %>">
		</TD>
		<TD width="132">
			<a href="www.google.com">AboutUs/ManagementTeam/">Management Team
			</a>
		</Td>
		</Tr>
		</Table>	
		</li>	
	</UL>	
</ul>
</div>

</body>
<script>MakeHoverable("navigation");

</script>
</html>
  • 2 Contributors
  • 1 Reply
  • 153 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by phper
Member Avatar for phper

Try this menu written in Javascript using the jQuery JS Framework

<html>
<head>
<title>Drop Down</title>
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

a:link {
	color: #333333;
	text-decoration:none;
}
a:visited {
	color: #333333;
	text-decoration:none;
}
a:active {
	color: #333333;
	text-decoration:none;
}
a:hover {
	color: #993333;
	text-decoration:none;
}

li,ul {
	list-style: none;
	padding: 3px;
}


</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("ul.item").each(function(){
		$(this).hide();
	});
});

function menuAction(obj){
	try{
		$(obj).next("#menuItem").slideToggle();

	}catch(e){
		$("#statusMessages").empty();
		$("#statusMessages").append("<B>Navigation Error</B><br/>An error has occured whilst building the Navigation Menu");
	}

}
</script>
</head>
<body>
<ul id="menu_container">

  <li><a href="#" onclick="menuAction(this);">Item 1 &raquo;</a>
	<ul id="menuItem" class="item">
	  <li><a href="#" onclick="menuAction(this);">Item 1, A &raquo;</a>
      	<ul id="menuItem" class="item">
        	<li>Item 1, A - A</li>
            <li>Item 1, A - B</li>
            <li>Item 1, A - C</li>
            <li>Item 1, A - D</li>
        </ul>
      </li>
	  <li>Item 1, B</li>
	</ul>
  </li>

  <li><a href="#" onclick="menuAction(this);">Item 2 &raquo;</a>
	<ul id="menuItem" class="item">
	  <li>Item 2, A</li>
	  <li>Item 2, B</li>
	  <li>Item 2, C</li>
	</ul>
  </li>

</ul>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.