Wie bekomme ich das hin?

[LittleSteffi]

Hallo,

ich komme nicht weiter. Habe eine Menüleiste gefunden die mir gefällt, nur wie bekomme ich sie hin?
Hier der Link:

http://www.1000ps-web.de/KUNDEN/SUZUKI/DESIGN2010/Home

Ausserdem möchte ich die Frames verschwinden lassen, nur wie bekomme ich das hin? Könnt ihr mir mal eine Erklärung für Dumme zusenden? Dazu kommt das ich auf der Arbeit nie die Ruhe dafür finde alles durchzulesen und zu verstehen.
Daher bitte ich euch um Hilfe.

Vielen Dank schonmal

[webcreate]

Warum schaust du dir nicht einfach den Code an? Es ist doch nur ein einfachen CSS Flyout Menü ...
Hier gibt es das selbe, vielleicht etwas übersichtlicher, der Code.

Frames? Was meinst du damit genau?
Hast du deine Page mit Frames gestaltet? Dann ist es nicht mal eben mit einem Klick erledigt, die Inhalt, die ja nun in den Frames liegen müssen ja in die entsprechende Seite integriert werden.
Hier bietet sich halt an, ein Grundgerüst mit Containern (DIVs) zu bauen und dort die Inhalte zu integrieren. Solltest du mit PHP arbeiten, bietet sich hier natürlich ein include() an, gerade für Header, Navigation und Footer ...

Es hier alles richtig detailliert zu beschreiben würde den Rahmen sprengen. Bei konkreten Fragen kann man gewiss unter die Arme gereifen, aber nun ein von 0% auf 100% HowTo zu schreiben, das wird hier gewiss keiner machen.
Ja, dass man auf der Arbeit für so was keine Zeit hat ist gemein. Man, wie gut, dass wir anderen hier nicht arbeiten müssen ....

[LittleSteffi]

Ich habe damals die Seite vom Kollegen übernommen und wurde sozusagen ins Webseiten gestalten "hinein geschmissen".
Er hat damals ein FrameSet angelegt.

Vielen Dank für den Link, blöde Frage nur, kannst du mir eine Kurzanleitung zum Einfügen geben? Habe mir den Code schon angeschaut nur bin da nicht durchgestiegen, weil das Menü was mein Kollege sich damals gezogen hat gaaaanz anders aussieht. Siehe hier:

<script language="JavaScript1.2" src="coolmenus3.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (www.bratta.com)

eXperience DHTML coolMenus - Get it at www.bratta.com
Version 3.02
This script can be used freely as long as all copyright messages are
intact.
******************************************************************************/
</script>
<script>
/*****************************************************************************
Default browsercheck - Leave this one
******************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion; this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie7=(this.ver.indexOf("MSIE 7")>-1 && this.dom)?1:0;
this.ie8=(this.ver.indexOf("MSIE 8")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6||this.ie7||this.ie8
this.mac=this.agent.indexOf("Mac")>-1
this.safari=this.agent.indexOf("Safari")>-1
this.safari2=this.agent.indexOf("Safari 2")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.opera9=this.agent.indexOf("Opera 9")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie8 || this.ie7 || this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.opera9 || this.safari || this.safari2 || this.dom)
return this
}
var bw=new lib_bwcheck() //Making browsercheck object

var mDebugging=2 //General debugging variable. Set to 0 for no debugging, 1 for alerts or 2 for status debugging.

oCMenu=new makeCoolMenu("oCMenu") //Making the menu object. Argument: menuname
oCMenu.useframes=1 //Do you want to use the menus as coolframemenu or not? (in frames or not) - Value: 0 || 1
oCMenu.frame="hauptframe" //The name of your main frame (where the menus should appear). Leave empty if you're not using frames - Value: "main_frame_name"

oCMenu.useclick=0 //If you want the menu to be activated and deactivated onclick only set this to 1. - Value: 0 || 1

/*If you set this to 1 you will get a "hand" cursor when moving over the links in NS4.
NOTE: This does not apply to the submenus if the menu is used in frames due some mayor problems with NS4*/
oCMenu.useNS4links=0

//After adding the "hover effect" for netscape as well, all styles are lost. But if you want padding add it here.
oCMenu.NS4padding=2

//If you have select boxes close to your menu the menu will check for that and hide them if they are in the way of the menu.
//This feature does unfortunatly not work in NS4!
oCMenu.checkselect=0

/*If you choose to have this code inside a linked js, or if your using frames it's important to set these variables.
This will help you get your links to link to the right place even if your files are in different folders.
The offlineUrl variable is the actual path to the directory where you js file are locally.
This is just so you can test it without uploading. Remember to start it with file:/// and only use slashes, no backward slashes!
Also remember to end with a slash */
oCMenu.offlineUrl="file:///F|/Internet/Storm2004/" //Value: path_to_menu_file_offline/"
//The onlineUrl variable is the online path to your script. Place in the full path to where your js file is. Remember to end with a slash.
oCMenu.onlineUrl="http://www.suzuki-storm.de/" //Value: "path_to_menu_file_online/"

oCMenu.pagecheck=1 //Do you want the menu to check whether any of the subitems are out of the bouderies of the page and move them in again (this is not perfect but it hould work) - Value: 0 || 1
oCMenu.checkscroll=1 //Do you want the menu to check whether the page have scrolled or not? For frames you should always set this to 1. You can set this to 2 if you want this feature only on explorer since netscape doesn't support the window.onscroll this will make netscape slower (only if not using frames) - Value: 0 || 1 || 2
oCMenu.resizecheck=1 //Do you want the page to reload if it's resized (This should be on or the menu will crash in Netscape4) - Value: 0 || 1
oCMenu.wait=500 //How long to wait before hiding the menu on mouseout. Netscape 6 is a lot slower then Explorer, so to be sure that it works good enough there you should not have this lower then 500 - Value: milliseconds

//Background bar properties
oCMenu.usebar=0 //If you want to use a background-bar for the top items set this on - Value: 1 || 0
oCMenu.barcolor="Navy" //The color of the background bar - Value: "color"
oCMenu.barwidth="menu" //The width of the background bar. Set this to "menu" if you want it to be the same width as the menu. (this will change to match the border if you have one) - Value: px || "%" || "menu"
oCMenu.barheight="menu" //The height of the background bar. Set this to "menu" if you want it to be the same height as the menu. (this will change to match the border if you have one) - Value: px || "%" || "menu"
oCMenu.barx="menu" //The left position of the bar. Set this to "menu" if you want it be the same as the left position of the menu. (this will change to match the border if you have one) - Value: px || "%" || "menu"
oCMenu.bary="menu" //The top position of the bar Set this to "menu" if you want it be the same as the top position of the menu. (this will change to match the border if you have one) - Value: px || "%" || "menu"
oCMenu.barinheritborder=0 //Set this to 1 if you want the bar to have the same border as the top menus - Value: 0 || 1

//Placement properties
oCMenu.rows=1 //This controls whether the top items is supposed to be laid out in rows or columns. Set to 0 for columns and 1 for row - Value 0 || 1
oCMenu.fromleft=3 //This is the left position of the menu. (Only in use if menuplacement below is 0 or aligned) (will change to adapt any borders) - Value: px || "%"
oCMenu.fromtop=85 //This is the left position of the menu. (Only in use if menuplacement below is 0 or aligned) (will change to adapt any borders) - Value: px || "%"
oCMenu.pxbetween=3 //How much space you want between each of the top items. - Value: px || "%"

/*You have several different ways to place the top items.
You can have them right beside eachother (only adding the pxbetween variable)
oCMenu.menuplacement=0

You can have them aligned to one of the sides - This is mostly when not using frames, but can be used in both conditions
Values: (If you get strange results check the fromleft,fromtop and pxbetween variables above)
For menus that are placed in columns (align=left or align=right (se below)) you can align them to the "right" or "center"
For menus that are placed in rows (align=top or align=bottom (se below)) you can align them to the "bottom", "center" or "bottomcenter"
oCMenu.menuplacement="center"

You can also set them directly in pixels: (Remember to have as many array members as you have top items)
oCMenu.menuplacement=new Array(10,200,400,600)

Or you can place in percentage: (remember to use the ' ' around the numbers)


Choose one of those options to get the desired results.
*/
oCMenu.menuplacement="left"
/*
Now we are ready for the properties of each level. For those of that have used the old
coolmenus for coolframemenu I will try and explain how this works like this:
level[0] = top items
level[1] = sub items
level[2] = sub2 items
level[3] = sub3 items and so on....
All menus will inherit the properties, and all properties does only HAVE to be spesifed on the top level.
If a level doesn't have on property spesified it will look for it on the last level that was spesified,
if it still doesn't exist it will get the properties from level[0]

Which means that if you set the background color on level[0] to "black" and doesn't spesify any more levels or doesn't
spesify the background color on the last level you spesified ALL menus will get the color from level[0]

Did that make sense at all? This can be a little hard to understand, look at the different examples on my site
and play with and I am sure you'll get what I mean.
*/

//TOP LEVEL PROPERTIES - ALL OF THESE MUST BE SPESIFIED FOR LEVEL[0]
oCMenu.level[0]=new Array() //Add this for each new level
oCMenu.level[0].width=100 //The default width for each level[0] (top) items. You can override this on each item by spesifying the width when making the item. - Value: px || "%"
oCMenu.level[0].height=20 //The default height for each level[0] (top) items. You can override this on each item by spesifying the height when making the item. - Value: px || "%"
oCMenu.level[0].bgcoloroff="#003145" //The default background color for each level[0] (top) items. You can override this on each item by spesifying the backgroundcolor when making the item. - Value: "color"
oCMenu.level[0].bgcoloron="transparent" //The default "on" background color for each level[0] (top) items. You can override this on each item by spesifying the "on" background color when making the item. - Value: "color"
oCMenu.level[0].textcolor="White" //The default text color for each level[0] (top) items. You can override this on each item by spesifying the text color when making the item. - Value: "color"
oCMenu.level[0].hovercolor="#003145" //The default "on" text color for each level[0] (top) items. You can override this on each item by spesifying the "on" text color when making the item. - Value: "color"
oCMenu.level[0].style="padding:2px; font-family:Arial; font-size:14px; font-weight:bold" //The style for all level[0] (top) items. - Value: "style_settings"
oCMenu.level[0].border=1 //The border size for all level[0] (top) items. - Value: px
oCMenu.level[0].bordercolor="#5EB6E4" //The border color for all level[0] (top) items. - Value: "color"
oCMenu.level[0].offsetX=0 //The X offset of the submenus of this item. This does not affect the first submenus, but you need it here so it can be the default value for all levels. - Value: px
oCMenu.level[0].offsetY=-1 //The Y offset of the submenus of this item. This does not affect the first submenus, but you need it here so it can be the default value for all levels. - Value: px
oCMenu.level[0].NS4font="arial"
oCMenu.level[0].NS4fontSize="2"

/*New: Added animation features that can be controlled on each level.*/
oCMenu.level[0].clip=0 //Set this to 1 if you want the submenus of this level to "slide" open in a animated clip effect. - Value: 0 || 1
oCMenu.level[0].clippx=2 //If you have clip spesified you can set how many pixels it will clip each timer in here to control the speed of the animation. - Value: px
oCMenu.level[0].cliptim=1 //This is the speed of the timer for the clip effect. Play with this and the clippx to get the desired speed for the clip effect (be carefull though and try and keep this value as high or possible or you can get problems with NS4). - Value: milliseconds
//Filters - This can be used to get some very nice effect like fade, slide, stars and so on. EXPLORER5.5+ ONLY - If you set this to a value it will override the clip on the supported browsers
oCMenu.level[0].filter=0 //VALUE: 0 || "filter specs"

/*And last but not least the align variable.

This spesifies how the submenus of this level comes out.
Values:
"bottom": The sub menus of this level will come out on the top of this item
"top": The sub menus of this level will come out on the bottom of this item
"left": The sub menus of this level will come out on the right of this item
"right": The sub menus of this level will come out on the left of this item

In generally "left" and "right" works best for menus in columns and "top" and "bottom" works best for menus in rows.
But by all means feel free to play with it.

If you have set pagecheck to 1 above this is what the pagecheck will change when reaching the bounderies of the page.
If it reaches the right boundery and it's aligned left it will change the align to right and so on.
*/
oCMenu.level[0].align="bottom" //Value: "top" || "bottom" || "left" || "right"

//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to spesify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new Array() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width+20
oCMenu.level[1].height=20
oCMenu.level[1].style="padding:2px; font-family:Arial; font-size:14px; font-weight:bold"
oCMenu.level[1].align="bottom"
oCMenu.level[1].offsetX=-(oCMenu.level[0].width-2)/2+55
oCMenu.level[1].offsetY=0
oCMenu.level[1].border=1
oCMenu.level[1].bordercolor="#5EB6E4"

//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[2]=new Array() //Add this for each new level (adding one to the number)
oCMenu.level[2].width=105
oCMenu.level[2].height=20
oCMenu.level[2].bgcoloroff="#003145"
oCMenu.level[2].bgcoloron="transparent"
oCMenu.level[2].style="padding:2px; font-family:Arial; font-size:14px; font-weight:bold"
oCMenu.level[2].align="bottom"
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].border=1
oCMenu.level[2].bordercolor="#5EB6E4"
oCMenu.level[2].NS4font="Arial"
oCMenu.level[2].NS4fontSize="1"

//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[3]=new Array() //Add this for each new level (adding one to the number)
oCMenu.level[3].width=105
oCMenu.level[3].height=20
oCMenu.level[3].bgcoloroff="#003145"
oCMenu.level[3].bgcoloron="transparent"
oCMenu.level[3].style="padding:2px; font-family:Arial; font-size:14px; font-weight:bold"
oCMenu.level[3].align="bottom"
oCMenu.level[3].offsetX=0
oCMenu.level[3].offsetY=0
oCMenu.level[3].border=1
oCMenu.level[3].bordercolor="#5EB6E4"
oCMenu.level[3].NS4font="Arial"
oCMenu.level[3].NS4fontSize="1"

/*Variables for each menu item: (** means that they have to be spesified!)
name: The name of the item. This must be unique for each item. Do not use spaces or strange charachters in this one! **
parent: The name of the menuitem you want this to "connect" to. This will be a submenu of the item that have the name you place in here. ** for all other then the topitems
text: The text you want in the item. ** (except if you use images)
link: The page you want this item to link to.
target: The target window or frame you want the link to go to (Default is same window if you're not using frames, and the mainframe if you're using frames)
width: The width of the element. If not spesified it will get the default width spesified above.
height: The height of the element. If not spesified it will get the default height spesified above.
img1: The "off" image for element if you want to use images.
img2: The image that appears onmouseover if using images.
bgcoloroff: The background color for this item. If not spesified it will get the default background color spesified above.
bgcoloron: The "on" background color for this item. If not spesified it will get the default "on" background color spesified above.
textcolor: The text color for this item. If not spesified it will get the default text color spesified above.
hovercolor: The "on" text color for this item. If not spesified it will get the default "on" text color spesified above. Netscape4 ignores this
onclick: If you want something to happen when the element is clicked (different from going to a link) spesifiy it here.
onmouseover: This will happen when you mouseover the element. Could be status text, another imageswap or whatever.
onmouseout: This will happen when you mouseout the element.

Remember you can have as many levels/sublevels as you want. Just make sure you spesify the correct "parent" for each item.
To set styles for each level see above.
*/


oCMenu.makeMenu('top0','','&nbsp;Home','Home.htm','')

oCMenu.makeMenu('top1','','Suzuki','eingangMo.htm')
oCMenu.makeMenu('sub10','top1','Neufahrzeuge','neutabmo05.htm')
oCMenu.makeMenu('sub11','top1','BestPrice','bestpricebikes.htm')
oCMenu.makeMenu('sub12','top1','Editionsmodelle','Editionen.htm')
oCMenu.makeMenu('sub13','top1','Gebraucht','gebrtabmo.htm')
oCMenu.makeMenu('sub14','top1','Finanzierung','')
oCMenu.makeMenu('sub140','sub14','Neufahrzeug','finmoneu.htm')
oCMenu.makeMenu('sub141','sub14','Gebraucht','finmogebr.htm')
oCMenu.makeMenu('sub15','top1','Umbauten','umbauten.htm')
oCMenu.makeMenu('sub150','sub15','Bandit 1250S','UmbauBandit.htm')
oCMenu.makeMenu('sub151','sub15','B-King Heckumbau','UmbauBKING.htm')
oCMenu.makeMenu('sub152','sub15','C 1800R ','UmbauC1800R.htm')
oCMenu.makeMenu('sub153','sub15','M 1800R ','umbauten.htm')
oCMenu.makeMenu('sub1530','sub153','Heckumbau','UmbauVZRRear.htm')
oCMenu.makeMenu('sub1531','sub153','Frontumbau','UmbauVZRFront.htm')
oCMenu.makeMenu('sub16','top1','Vermietung','')
oCMenu.makeMenu('sub160','sub16','Anhänger','vermietanh.htm')
oCMenu.makeMenu('sub161','sub16','Motorrad','vermietmoto.htm')
oCMenu.makeMenu('sub17','top1','Zubehör','zub00.htm')
oCMenu.makeMenu('sub18','top1','Links','LinksMo.htm')

oCMenu.makeMenu('top2','','TGB','eingangRo.htm')
oCMenu.makeMenu('sub20','top2','Roller','neutgbro.htm')
oCMenu.makeMenu('sub21','top2','Quads','neuquad.htm')
oCMenu.makeMenu('sub22','top2','Gebraucht','gebrtabmo.htm')
oCMenu.makeMenu('sub23','top2','Links','LinksMo.htm')

oCMenu.makeMenu('top3','','Daelim','eingangRo.htm')
oCMenu.makeMenu('sub31','top3','Roller','neudaelimro.htm')
oCMenu.makeMenu('sub32','top3','Leichtkraftrad','neudaelim.htm')
oCMenu.makeMenu('sub33','top3','Gebraucht','gebrtabmo.htm')
oCMenu.makeMenu('sub34','top3','Links','LinksMo.htm')

oCMenu.makeMenu('top4','','Beeline','eingangRo.htm')
oCMenu.makeMenu('sub41','top4','Roller','neubeeline.htm')
oCMenu.makeMenu('sub42','top4','Gebraucht','gebrtabmo.htm')
oCMenu.makeMenu('sub43','top4','Links','LinksMo.htm')

oCMenu.makeMenu('top5','','Marine','eingangMa.htm')
oCMenu.makeMenu('sub50','top5','Angebote','AngeboteMarine.htm')
oCMenu.makeMenu('sub51','top5','Außenborder','')
oCMenu.makeMenu('sub510','sub51','Neu','neutabbo.htm')
oCMenu.makeMenu('sub511','sub51','Gebraucht','gebrtabbo.htm')
oCMenu.makeMenu('sub52','top5','Boote','')
oCMenu.makeMenu('sub520','sub52','Linder','neutablinder.htm')
oCMenu.makeMenu('sub521','sub52','Suzumar','neutabsuzumar.htm')
oCMenu.makeMenu('sub53','top5','Finanzierung','')
oCMenu.makeMenu('sub530','sub53','Neu','finboneu.htm')
oCMenu.makeMenu('sub531','sub53','Gebraucht','finbogebr.htm')
oCMenu.makeMenu('sub54','top5','Links','LinksMa.htm')
oCMenu.makeMenu('sub55','top5','Messen','EventsMarine.htm')

oCMenu.makeMenu('top6','','Automobil','eingangAu.htm')
oCMenu.makeMenu('sub60','top6','Fahrzeuge','')
oCMenu.makeMenu('sub600','sub60','Gebraucht','gebrtabau.htm')
oCMenu.makeMenu('sub61','top6','Finanzierung','finaugebr.htm')

oCMenu.makeMenu('top7','','Van Vossen','eingangMo.htm')
oCMenu.makeMenu('sub70','top7','Anhänger','vanvossen.htm')
oCMenu.makeMenu('sub71','top7','Finanzierung','finvvneu.htm')

oCMenu.makeMenu('top8','','Über Uns','')
oCMenu.makeMenu('sub80','top8','Das Team','team.htm')
oCMenu.makeMenu('sub81','top8','Kontakt','kontakt.htm')
oCMenu.makeMenu('sub82','top8','Service','Service.htm')


//Leave these two lines! Making the styles and then constructing the menu
oCMenu.makeStyle(); oCMenu.construct()

</script>
</body>
</html>

In den Script habe ich mich hinein gefuchst mit der Zeit ..... Nur ist er wohl nicht mehr der aktuellste ..

[webcreate]

Vergiss das alte Menü, ohne aktivem JavaScript hast dann Probleme...

Hier mal der reduzierte Code vom CSSPlay-Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/opaque_dl.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:0 0 30px 0; padding:0;}

#menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;}
#menu li span {display:block; z-index:100; padding: 5px 10px;font-size:1.1em;}
#menu li a, #menu li a:visited {display:block; padding:0; white-space:nowrap;}

#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(../opacity/opaque.png);}
* html #menu dl {background:transparent url(../opacity/opaque.gif);}
#menu dt {margin:0; font-size: 1.1em; float:left;}
#menu dd {display:none; background: transparent; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; color:#000; padding: 5px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {color:#000; text-decoration:none; display:block; padding: 5px 10px;}

#menu li a:hover {border:0; text-decoration:underline;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}


</style>

</head>

<body>
   <ul id="menu">
<li><span>Demos</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
	<dt><a href="menu/index.html">Demos</a></dt>
	<dd><a href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>

	<dd><a href="menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
	<dd><a href="menu/form.html" title="Styling forms">styled form</a></dd>

	<dd><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
	<dd><a href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
	<dd><a href="menu/old_master.html" title="Image Map for detailed information">image map</a></dd>

	<dd><a href="menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
	<dd><a href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
	<dd><a href="menu/em_images.html" title="em size images compared">em sized images</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><span>Menu Items</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
	<dt><a href="index.html">Menu Items</a></dt>
	<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
	<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>

	<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
	<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
	<dd><a href="cross.html" title="non-rectangular links">non rectangular links</a></dd>
	<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>

	<dd><a href="circles.html" title="circular links">circular&nbsp;links</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>Various&nbsp;Layouts</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
	<dt><a href="http://www.traum-projekt.com/forum/layouts/index.html">Various Layouts</a></dt>
	<dd><a href="http://www.traum-projekt.com/forum/layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>

	<dd><a href="http://www.traum-projekt.com/forum/layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>

	<dd><a href="http://www.traum-projekt.com/forum/layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
	<dd><a href="http://www.traum-projekt.com/forum/layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
	<dd><a href="http://www.traum-projekt.com/forum/layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>Mozilla and other Browsers</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>

	<dt><a href="http://www.traum-projekt.com/forum/mozilla/index.html">Mozilla and other Browsers</a></dt>
	<dd><a href="http://www.traum-projekt.com/forum/mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>

	<dd><a href="http://www.traum-projekt.com/forum/mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
	<dd><a href="http://www.traum-projekt.com/forum/mozilla/content.html" title="Using content:">content:</a></dd>
	<dd><a href="http://www.traum-projekt.com/forum/mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
	<dd><a href="http://www.traum-projekt.com/forum/mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>

	<dd><a href="http://www.traum-projekt.com/forum/mozilla/snooker.html" title="Snooker cue">a border art snooker cue</a></dd>

	<dd><a href="http://www.traum-projekt.com/forum/mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</body>
</html>

Was da nun fehlt sind die background-grafiken, aber die kannst du dir ja anlegen, oder von dort aus speichern ...

[LittleSteffi]

So ich habe den Code nun etwas zurecht gerückt.
Nun habe ich folgende Probleme:

- Wenn das Menü aufklappt, klappt es nicht über die "hauptframe" sondern verschwindet.
- Wenn das Menü aufklappt, wird die angegebene Farbe angezeigt, aber ansonsten bleibt das Menü blau, was mache ich falsch?
- Dritter und letzter Punkt, wie bekomme ich das Menü weiter nach unten?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style type="text/css">

<script language="JavaScript1.2" src="coolmenus3.js">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/opaque_dl.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu
{list-style-type:none;
margin:0 0 30px 0;
padding:0;}

#menu li
{display:block;
float:left;
position:relative;
z-index:100;
margin-right:1px;}

#menu li span
{display:block;
z-index:100;
padding: 5px 10px;
font-size:14px;}

#menu li a, #menu li a:visited
{display:block;
padding:0; white-space:nowrap;}

#menu dl
{position:absolute;
top:0;
left:0;
margin: 0;
padding: 0;
background:transparent url(../opacity/opaque.png);}

* html #menu dl
{background:transparent url(../opacity/opaque.gif);}

#menu dt
{margin:0; font-size: 14px; float:left;}

#menu dd {display:none;
background: transparent;
clear:left;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif; c
olor: #FFFFF;
font-size: 14px;
text-align:left;}

#menu dt a, #menu dt a:visited
{display:block;
color:#FFFFF;
font-family:Arial, Helvetica, sans-serif;
padding: 5px 10px;
text-decoration:none;}

#menu dd a, #menu dd a:visited
{color:#FFFFF;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
display:block;
padding: 5px 10px;}

#menu li a:hover
{border:1;
border-color: #5EB6E4;
text-decoration:underline;}

#menu li:hover dd, #menu li a:hover dd {
display:block;}

#menu li:hover dl, #menu li a:hover dl
{padding-bottom:14px;}

#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover
{color:#5EB6E4;}

body {
background-color: #003145;
}
</style>

</head>
<body>
<ul id="menu">
<li><span>Home</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="http://www.suzuki-storm.de/home.htm">Home</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><span>Motorrad</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="http://www.suzuki-storm.de/eingangMo.htm" target:"hauptframe">Motorrad</a></dt>
<dd><a href="http://www.suzuki-storm.de/neutabmo.htm"target:"hauptframe">Neufahrzeuge</a></dd>
<dd><a href="http://www.suzuki-storm.de/bestpricebikes.htm"target:"hauptframe">BestPrice</a></dd>

<dd><a href="http://www.suzuki-storm.de/editionen.htm"target:"hauptframe">Editionsmodelle</a></dd>
<dd><a href="http://www.suzuki-storm.de/gebrtabmo.htm"target:"hauptframe">Gebraucht</a></dd>
<dd><a href="http://www.suzuki-storm.de/finmoneu.htm"target:"hauptframe">Finanzierung</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>TGB</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="http://www.suzuki-storm.de/eingangQuad.htm"target:"hauptframe">TGB</a></dt>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>Marine</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="http://www.suzuki-storm.de/neutabbo.htm"target:"hauptframe">Aussenborder</a></dt>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</body>
</html>

[webcreate]

- Wenn das Menü aufklappt, klappt es nicht über die "hauptframe" sondern verschwindet.
Das liegt an den Frames ... verabschiede dich von diesen und erstelle eine "richtige" page.

- Wenn das Menü aufklappt, wird die angegebene Farbe angezeigt, aber ansonsten bleibt das Menü blau, was mache ich falsch?
Hast du dir die .png und .gif Grafik angelegt? Wenn ja, auch im richtigen Ordner ... Speicherort kontrollieren oder CSS anpassen.

- Dritter und letzter Punkt, wie bekomme ich das Menü weiter nach unten?
Scherz? br-Tag, p-Tag oder ein Spacer-Div, dessen Höhe in CSS definiert ist.

[LittleSteffi]

Also habe jetzt etwas gelesen und man kann das Menü per Include einbinden, was ich für sehr gut empfinde, weil wenn sich was im Menü mal ändert muss man nicht alles auf jeder Seite ändern. Somit könnte ich mich von den Frames verabschieden - ein Problem weniger.

Für das Menü benutze ich keine Grafiken, nur reine Farbe Aber wieso macht er nicht das was ich will

[webcreate]

Nein, laut CSS verwendest du Grafiken: background:transparent url(../opacity/opaque.png);}
In dem Beispiel ist es nur eine weiße Fläche mit verringerter Deckkraft ... wenn du lieber einen anderen Farbton haben willst, dann nutze halt eine andere Farbe.