Multi level navigation bar on every web page

markg · Joined: 04 Jul 2009 Posts: 1

I want to put a navigation bar on every page of my website but don't want to have to edit every page each time I make a change to the bar. How can I do this?

Here's the code of the navigation bar:

<head>
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script></head>
</head>




<h2 align="center">
<img border="0" src="logo.jpg" width="901" height="146"></h2>

<div id="smoothmenu1" class="ddsmoothmenu" style="width: 1241px; height: 30px">
<ul>

<li><a href="http://www.atleeathleticboosters.com/teams">Mission Statement</a></li>
<li><a href="#"> Teams </a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/baseball">Baseball </a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/baseball/roster" target="_blank">baseball team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/baseball/schedule">baseball team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/baseball/results">baseball team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/baseball/photos">baseball team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/baseball/email team rep">email baseball team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballb">Basketball</a>
<ul>
<li><a href="#">Boys</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballb/roster">boys basketball team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballb/schedule">boys basketball team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballb/results">boys basketball team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballb/photos">boys basketball team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballb/email team rep">email boys basketball team rep</a></li>
</ul>
<li><a href="#">Girls</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballg/roster">girls basketball team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballg/schedule">girls basketball team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballg/results">girls basketball team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballg/photos">girls basketball team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/basketballg/email team rep">email girls basketball team rep</a></li>
</ul>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/cheerleading">Cheerleading</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/cheerleading/roster">cheerleading team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cheerleading/schedule">cheerleading team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cheerleading/results">cheerleading team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cheerleading/photos">cheerleading team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cheerleading/email team rep">email cheerleading team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/crosscountry">Cross Country</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/cross country/roster">cross country team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cross country/schedule">cross country team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cross country/results">cross country team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cross country/photos">cross country team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/cross country/email team rep">email cross country team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/field hockey">Field Hockey</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/field hockey/roster">field hockey team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/field hockey/schedule">field hockey team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/field hockey/results">field hockey team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/field hockey/photos">field hockey team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/field hockey/email team rep">email field hockey team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/football">Football</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/football/roster">football team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/football/schedule">football team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/football/results">football team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/football/photos">football team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/football/email team rep">email football team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/golf">Golf</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/golf/roster">golf team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/golf/schedule">golf team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/golf/results">golf team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/golf/photos">golf team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/golf/email team rep">email golf team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/gymnastics">Gymnastics</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/gymnastics/roster">gymnastics team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/gymnastics/schedule">gymnastics team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/gymnastics/results">gymnastics team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/gymnastics/photos">gymnastics team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/gymnastics/email team rep">email gymnastics team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccer">Soccer</a>
<ul>
<li><a href="#">Boys</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerb/roster">boys soccer team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerb/schedule">boys soccer team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerb/results">boys soccer team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerb/photos">boys soccer team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerb/email team rep">email boys soccer team rep</a></li>
</ul>
<li><a href="#">Girls</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerg/roster">girls soccer team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerg/schedule">girls soccer team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerg/results">girls soccer team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerg/photos">girls soccer team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/soccerg/email team rep">email girls soccer team rep</a></li>
</ul>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/swimming">Swimming</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/swimming/roster">swimming team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/swimming/schedule">swimming team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/swimming/results">swimming team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/swimming/photos">swimming team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/swimming/email team rep">email swimming team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennis">Tennis</a>
<ul>
<li><a href="#">Boys</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisb/roster">boys tennis team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisb/schedule">boys tennis team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisb/results">boys tennis team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisb/photos">boys tennis team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisb/email team rep">email boys tennis team rep</a></li>
</ul>
<li><a href="#">Girls</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisg/roster">girls tennis team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisg/schedule">girls tennis team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisg/results">girls tennis team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisg/photos">girls tennis team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/Tennisg/email team rep">email girls tennis team rep</a></li>
</ul>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/track">Track</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/track/roster">track team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/track/schedule">track team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/track/results">track team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/track/photos">track team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/track/email team rep">email track team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyball">Volleyball</a>
<ul>
<li><a href="#">Boys</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballb/roster">boys volleyball team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballb/schedule">boys volleyball team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballb/results">boys volleyball team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballb/photos">boys volleyball team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballb/email team rep">email boys volleyball team rep</a></li>
</ul>
<li><a href="#">Girls</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballg/roster">girls volleyball team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballg/schedule">girls volleyball team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballg/results">girls volleyball team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballg/photos">girls volleyball team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/volleyballg/email team rep">email girls volleyball team rep</a></li>
</ul>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/teams/wrestling">Wrestling</a>
<ul>
<li><a href="http://www.atleeathleticboosters.com/teams/wrestling/roster">wrestling team roster</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/wrestling/schedule">wrestling team schedule</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/wrestling/results">wrestling team results</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/wrestling/photos">wrestling team photos</a></li>
<li><a href="http://www.atleeathleticboosters.com/teams/wrestling/email team rep">email wrestling team rep</a></li>
</ul>
</li>
<li><a href="http://www.atleeathleticboosters.com/">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Spirit Wear</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Wall of Fame</a></li>
<li><a href="#">Sports Backer</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.atleeathelticboosters/mulch.com/style/"> Mulch Fundraiser</a>
</li>
</li>
<li><a href="http://www.atleeathelticboosters/mulch.com/style/"> Sports Boosters</a>
</li>
</li>
<li><a href="http://www.atleeathelticboosters/mulch.com/style/"> Sports Boosters</a>
</li>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="mailto:Joseph.Sperlazzaatboehringer-ingelheim.com">Athletic Boosters President</a></li>
<li><a href="mailto:guncheon6.comcast.net">Website Designer</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="http://www.atleeathelticboosters/mulch.com/style/">Sign In</a>
</li>
</ul>
<br style="clear: left" />
</div>

<h2 style="margin-top:200px"> </h2>
<h2 style="margin-top:200px"> </h2>
<h2 style="margin-top:200px"> </h2>
<h2 style="margin-top:200px"> </h2>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
</ul>
<br style="clear: left" />
</div>

sticks464 · Joined: 31 Dec 2006 Posts: 2309

You can use includes to use your menu on multiple pages.
Cut all your menu html from the opening <ul> to the closing </ul> and paste it into a new file, name it menu.html. The only code on this page will be the menu code, no doctype, no html opening or closing tags, no head tags and no body tags.

example:

Lucas59 · Joined: 28 Jul 2009 Posts: 3

Hi,
I am not the person who asked for help on this, but I am also looking for the same solution.

I followed your advice and I managed the menu to work with an external xml menu list file what I am having problem with is the style.

If I leave the style internal, it works fine, see demo here:
http://www.kutya.info//test/FINAL_with_external_menu_file/index_with_css.php

but if I am trying to make it work with an external .css file, it doesn't.
here is that file:
http://www.kutya.info//test/FINAL_with_external_menu_file/index_with_extcss.php

and here is the CSS file:
http://www.kutya.info//test/FINAL_with_external_menu_file/style.css

Obviously I am doing something wrong. I cut and pasted the style info into a .css file, (without the div elements because I left the div elements in the main web page) and probably this is where the problem is.

Basically if I want to use the main web page as a template for all other web pages, I will need two CSS reference in the <head>, one just for the menu "cssm1" and one for the other parts of the web page. How would I go accomplishing this?

But first I am not able to make the menu work with one external CSS file either.

Lucas

sticks464 · Joined: 31 Dec 2006 Posts: 2309

First, this link is incorrect

Lucas59 · Joined: 28 Jul 2009 Posts: 3

I did what you suggested, but it didn't work. I think problem is with extracting the style and or referencing back to the web page.

I tried it with and without the <div... /div>, with one or two link to .css file, didn't make any difference.

Maybe the style syntax of the working complete web page is such that it cannot be xref-ed from the outside?

Lucas

Lucas59 · Joined: 28 Jul 2009 Posts: 3

I just figured out the problem. It was my fault (obviously.) When I copy/pasted the style info to the external .css file, I missed the very first line.

Thank you for your help and your quick reply!

Lucas