CSS Menu & Drop Down Menu - PLEASE HELP

**jsybol** · 10-03-2007, 06:17 PM

I really can use some advise. I am going crazy. I created a navigation bar in Fireworks and exported it out. I have created our company website it work wonderfully, it has a rollover function to change text color as well as to have a drop down menu for most items.

My problem is that my boss continually changes the navigation bar. This is creating huge problems for me since I have to regenerate the exported html and image files and whatever else gets exported and re-copy and past into all the pages of the website. This is becoming very time consuming. He would like me to find a way to update one file and it automatically update all pages.

The only way I know how to do this is with Frames and we don't want the site with frames. So my question is, can this be done with CSS or PHP?

Please help me, I am pulling my hair out.

**boogyman** · 10-03-2007, 06:37 PM

HTML Code:

<ul id="navigation">
     <li id="link1"><a href="url/to/page">LINK TITLE</a></li>
     <li id="link2"><a href="url/to/page">LINK TITLE</a></li>
     <li id="link3"><a href="url/to/page">LINK TITLE</a></li>
     <li id="link4"><a href="url/to/page">LINK TITLE</a></li>
     <li id="link5"><a href="url/to/page">LINK TITLE</a></li>
</ul>

put the above in your <body> tag where you want the menu.

then follow the
http://www.stopdesign.com/articles/replace_text/
tutorial for image replacement if need be.

remember Google is your friend
there there are many css menu tutorials on this site
http://www.dynamicdrive.com/dynamicindex1/indexb.html

**jsybol** · 10-03-2007, 09:18 PM

So Basically;

I need to just recreate the entire navigation bar in CSS and scrap what I did in Fireworks, Correct?

Then add the HTML you suggest into the body of my pages and I should be fine?

Because right now, when I export the Fireworks file, It exports a Java file, a CSS file, HTML file and Images folder. Should I just start from scratch with my nav bar?

Thanks again.

**mvy** · 10-04-2007, 05:09 AM

Hi,

You could use include function(here for php, but also for asp/jsp/cfm ).....here is an example of includes and also example for header ........

<html>
<?php include("header.php"); ?>
<body>
<?php include("navigation.php"); ?>
<?php include("leftnavigation.php"); ?>
<?php include("rightnavigation.php"); ?>
<?php include("content.php"); ?>
<?php include("footer.php"); ?>
</body>
</html>

example for heaader:

<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META NAME="ROBOTS" CONTENT="ALL=INDEX,FOLLOW">
<META name="KEYWORDS" content="Design, Potato Head, Tomato Head">
<META name="DESCRIPTION" content="Potatis Design, tomatis Design">
<META name="verify-v1" content="JAGE0J0kHiSre8p4t/hqGM+lfadzHP2CAv71MvLFPys="/>
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="yourcsshere.css"/>
<script Language="Javascript" type="text/javascript" src="yourjavascript.js"></script>
</head>

hopefully this helps..........ORGANIZE little bit......

**kamal_chandel** · 10-08-2007, 05:46 PM

#menu {
width: 12em; /* set width of menu */
background: #eee;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

Positioning the Pop Outs

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

[Spam links removed by a moderator]

**boogyman** · 10-08-2007, 06:04 PM

Originally Posted by jsybol

I need to just recreate the entire navigation bar in CSS and scrap what I did in Fireworks, Correct?

your css should not change at all unless you are changing the overall design of the file. HTML as I wrote above

Originally Posted by me

will handle the actual content and your css just tells the browser how to display it.

Then add the HTML you suggest into the body of my pages and I should be fine?

If there are multiple pages using the same information (eg... header, nav, footer) then its best to create some sort of template file and you can include the files as mvy said <?php include("file.extension"); ?>

Because right now, when I export the Fireworks file, It exports a Java file, a CSS file, HTML file and Images folder. Should I just start from scratch with my nav bar?

Thanks again.

you are importing a javascript file. the only thing that Javascript and Java have in common is the name. its easy to assume that they are similiar or that javascript is derived from java but it wasn't. Java is a full fledged programming language and javascript is an interpreted language meaning it is initiated when a browser instance is started.

**molendijk** · 10-12-2007, 01:48 PM

There is a solution with javascript (client side include), see:
http://www.let.rug.nl/~molendyk/include_menu/file1.html

Arie Molendijk.

Thread: CSS Menu & Drop Down Menu - PLEASE HELP

Thread Tools

Search Thread

CSS Menu & Drop Down Menu - PLEASE HELP

Sorry - Confused

Vertical Menus

Bookmarks

Bookmarks

Posting Permissions