Menu bar repetition

Question

coud_ren_26 -11 Junior Poster in Training

13 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.

usability web-design

3 Contributors
7 Replies
162 Views
17 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by MJ Pieterse

All 7 Replies

Kraai 56 Senior Poster

13 Years Ago

Hi

You can link to your stylesheet on each page, in stead of copy it over to each page. That requires only one line of code on each page. As for the html part, if you have a database installed and for instance running on php, you can include the html on each page with one line of php code.

Kraai 56 Senior Poster

13 Years Ago

You do not need a database to link your stylesheet. You van only have this code in the <head> part of your page:

<link rel="stylesheet" type="text/css" href="path/to/pro_dropdown_2.css">

This means, you have to copy the stylesheet into something like notepad, and save it as pro_dropdown_2.css, then upload to your server, and only use above code in head section of each page. NOTE to put correct path to stylesheet in above code.

About database:

What I was saying, is that a easy way to get the html on each page, using only one line of code, would be if you can use php with a database, by using the include function, for stuff you want to include on some pages without copy the full html into that page. You will then call something from the mysql database with only one string. That will look something like this:

<?php include("menubar.php"); ?>

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.

coud_ren_26 -11 Junior Poster in Training · Answer 1 · 2010-11-18T13:14:51+00:00

Thank you for yor quick reply.
yes i link my style sheet, given this code

<link rel="stylesheet" type="text/css" href="menuBar/pro_dropdown_2.css" />
<script src="menuBar/stuHover.js" type="text/javascript">

why do i need to have a database, please elaborate and what php tag i suppose to use?

Kraai 56 Senior Poster Featured Poster · Answer 2 · 2010-11-18T13:48:27+00:00

Sorry, I see on your code you posted you already have the code for including your stylesheet. Use that then in the head section of your pages, and it should be fine.

coud_ren_26 -11 Junior Poster in Training · Answer 3 · 2010-11-18T14:26:00+00:00

coud_ren_26 -11 Junior Poster in Training

13 Years Ago

can i include html file?

Kraai 56 Senior Poster Featured Poster · Answer 4 · 2010-11-18T14:39:56+00:00

I think, without the database option, the best solution to include the same html in many pages without copy them in, will be by using javascript.

HERE is a good tut on how to do that.

Let us know how you're doing!

MJ Pieterse 2 Poster · Answer 5 · 2010-11-18T15:28:39+00:00

why don't you just create a seperate page with all of that in and call it with an include function?

<!--#include virtual="nav.html"-->

on your include page you include your javascript and styles etc..

Menu bar repetition

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers