Menu bar repetition

Question

coud_ren_26 -11 Junior Poster in Training

14 Years Ago

I have this code for my menu bar

home.html file
-----------------------------------

<html>
<body background="background_aboutus1.jpg">
<link rel="stylesheet" type="text/css" href="menuBar/pro_dropdown_2.css" />
<script src="menuBar/stuHover.js" type="text/javascript"></script>
<ul id="nav">
	<li class="top"><a href="home.html" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="pulmonary_pulmoxcel.html" id="products" class="top_link">
	<span class="down">Products</span></a>
	<ul class="sub">
	<li><a href="pulmonary_pulmoxcel.html" class="fly">Pulmonary</a>
	<ul>
	<li><a href="pulmonary_pulmoxcel.html">Pulmoxcel</a></li>
	<li><a href="pulmonary_ventar.html">Ventar</a></li>
	<li><a href="pulmonary_ventar_exp.html">Ventar Exp</a></li>
	<li><a href="productPage/pulmonary_qualisone.html">Qualisone</a></li>
	</ul>	
	<li><a href="pain_control_difenax.html" class="fly">Pain Control</a>
	<ul>
	<li><a href="pain_control_difenax.html">Difenax</a></li>
	<li><a href="pain_control_stangesic.html">Stangesic</a></li>
	<li><a href="pain_control_neoxicam.html">Neoxicam</a></li>
	</ul>

	<li><a href="anti_allergy_zylohist.html" class="fly">Anti Allergy</a>
	<ul>
	<li><a href="anti_allergy_zylohist.html">Zylohist</a></li>
	<li><a href="anti_allergy_texzine.html">Texzine</a></li>
	<li><a href="anti_allergy_neofex.html">Neofex</a></li>
	</ul>

	<li><a href="anti_diabetes_neoform_500.html" class="fly">Antidiabetes</a>
	<ul>
	<li><a href="anti_diabetes_neoform_500.html">Neoform 500</a></li>
	<li><a href="anti_diabetes_arya.html">Arya</a></li>
	</ul>
	<li><a href="gastrointestinal_acifre.html" class="fly">Gastrointestinal</a>
	<ul>
	<li><a href="gastrointestinal_acifre.html">Acifre</a></li>
	<li><a href="gastrointestinal_raxide.html">Raxide</a></li>
	</ul>
		</ul>
	</li>
	<li class="top"><a href="consultNow.html" id="services" class="top_link"><span 

class="down">Services</span></a>
		<ul class="sub">
			<li><a href="consultNow.html">Consult Now</a></li>
			<li><a href="applyNow.html">Apply Now</a></li>
			<li><a href="submitQuery.html">Submit Query</a></li>
			<li><a href="FAQ.html">FAQ</a></li>
			
		</ul>
	</li>

	<li class="top"><a href="company.html" id="services" class="top_link"><span 

class="down">Company</span></a>
		<ul class="sub">
			<li><a href="boardMembers.html">Board Members</a></li>
			<li><a href="announcements.html">Announcements</a></li>
			<li><a href="branches.html">Branches</a></li>
			
		</ul>
	</li>	


	<li class="top"><a href="privacyPolicy.html" id="privacy" 

class="top_link"><span>Privacy Policy</span></a></li>
</ul>

</body>
</html>

--------------end of home.html-------------------------------

pro_dropdown_2.css
---------------------------------------------------------

.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:42px; background:	#52D017
 url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:30px;}
#nav li a.top_link {display:block; float:left; height:38px; line-height:32px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:30px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:38px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}


#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

-----------end of pro_dropdown_2.css-------------------------------------------

---------------------stuHover.js----------------------------------

stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, 

"LI.iehover");
				document.styleSheets[i].addRule(newSelector , 

cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), 

"");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHoe>
  </blockquote>

------------------------end of stuHover.js-------------------------------

Now my problem is i need to copy or repeat the html code every page of my site to make the menu bar available. I do not ask for the exact code coz i know it is not allowed here, what i want is a suggestion or idea of how i can do it for me not to repeat the html code. One of my idea is to call that like the (behavior) function but i do not know what language to use. Thank you in advance.

ui-ux web-design

Edited 14 Years Ago by Ezzaral because: Added code tags. Please use them to format any code that you post.

3 Contributors
3 Replies
144 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Roymj

hielo 65 Veteran Poster

14 Years Ago

if your server supporst PHP, you can use the php's include() to "import" that file into your pages. You would just save the menu bar as an independent file (let's call it menu.inc.php - even if you have just "plain" html in it).

Then you would need to rename index.html to index.php. Then in index.php at the point where you want to "insert" your menu, just put <?php include( '/path/to/your/file/menu.inc.php') ?> NOTE: It does NOT HAVE to be php. If you have ASP support, then you can accomplish the same task in a very similar manner. The syntax will be slightly different but the concept still applies.

Alternatively, see if your server has support for Server-Side includes (in which case your files "might" need to be renamed from "index.html" to "index.shtml"):

<!--#include virtual="/path/to/your/file/menu.inc" -->

Reply to this topic

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.

Roymj 0 Newbie Poster · Answer 1 · 2010-11-22T13:08:26+00:00

Hey,

You can do that by using a new file and include_once(); Cut and paste the script for the menu and create a new php file and name it as header.php or as you wish. Then do the same with css and other script also. You call the corresponding menu script in the pages u need by include_once('header.php');. This will do. Make sure you call the css and other scripts also from the head of the pages needed.

Roymj 0 Newbie Poster · Answer 2 · 2010-11-22T13:09:17+00:00

Use the include_once() where u need the menu to appear in the corresponding pages.