Navigation Waagrecht machen

Status
Nicht offen für weitere Antworten.

CHAKKA1992

Mitglied
Hey an alle...

Ich Will folgene Navigation Waagrecht haben:

HTML:
<script language="JavaScript">
<!-- IE and NS6 Menu Button script kurt.grigg@virgin.net
if (!document.layers){

// Choose size and colours here!!
Width=100;
Font='Verdana';
FontSize=12;
AFontColor='#0000ff';
BFontColor='#0000ff';
CFontColor='#9900ff';
FontWeight='normal';  //normal or bold!
BackGround='#cccccc'; //Same as your body bgcolor!
BorderDepth=1;
BorderLight='#0000ff';
BorderShad='#000000';

//Nothing needs altering past here!
function On(id){
with(id.style){
color=BFontColor;
borderTopColor=BorderLight;
borderLeftColor=BorderLight;
borderRightColor=BorderShad;
borderBottomColor=BorderShad;
}
}
function Off(id){
with(id.style){
color=AFontColor;
borderTopColor=BackGround;
borderLeftColor=BackGround;
borderRightColor=BackGround;
borderBottomColor=BackGround;
}
}
function Down(id){
with(id.style){
color=CFontColor;
borderTopColor=BorderShad;
borderLeftColor=BorderShad;
borderRightColor=BorderLight;
borderBottomColor=BorderLight;
}
}
function Link(Url,Txt){
document.write("<a href='"+Url+"'>"
+"<div style='position:relative;"
+"width:"+Width+"px;height:"+FontSize+"px;"
+"border-width:"+BorderDepth+"px;"
+"border-color:"+BackGround+";"
+"border-style:solid;"
+"padding:"+FontSize/3+"px;"
+"background:"+BackGround+";"
+"font-family:"+Font+";"
+"font-size:"+FontSize+"px;"
+"line-height:"+FontSize*1.2+"px;"
+"font-weight:"+FontWeight+";"
+"text-align:left;"
+"color:"+AFontColor+";"
+"margin-top:2px;"
+"cursor:hand'"
+"onMouseOver='javascript:On(this)'" 
+"onMouseOut='javascript:Off(this)'" 
+"onMouseDown='javascript:Down(this)'>"
+Txt+"</div></a>");
}
}
function Temp(){
alert("TEST");
}
//-->
</script>
<!-- End Menu Buttons Part:1 -->

<!-- Menu Buttons Part:2 Paste in Body where needed -->
<script language="JavaScript">
<!--
if (!document.layers){
//This table stops oddness in NS6 
if (document.getElementById&&!document.all){
document.write("<div style='position:relative'"
+"<table border='0'>"
+"<tr><td valign='top'>");
}

/*   The visible Buttons here!
Add as many as you want. Make sure 
you follow the same format as below
*/

Link('index.php?page=1','Home');
Link('index.php?page=2','Über uns');
Link('index.php?page=3','Leitung');
Link('index.php?page=4','Proben');
Link('index.php?page=5','Auftritte');


if (document.getElementById&&!document.all){
document.write("</td></tr></table></div>");
}
}
//-->

Kann mir jemand sagen was ich verändern muss? Ich versehs nicht mehr^^

Grüße,
chakka1992
 
Moin,

worauf genau kommt es dir denn bei diesem Menu an?
Ich sehe nicht so recht, wozu man da JS benötigt, das sind ein paar Links mit hover-Effekten, dafür reichen 3-4 Zeilen CSS.
 
Ganz schlicht: :-)
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author"             content="doktormolle">
<meta name="date"               content="2008-10-05">
<title>Test</title>
<script type="text/javascript">
<!--
//-->
</script>
<style type="text/css">
<!--
#menu a{
  text-align:center;
  font:bolder 12px Verdana;
  margin:2px;
  padding:2px;
  text-decoration:none;
  color:#000;
  display:block;
  width:100px;
  float:left;
  background-color:#cccccc;
  border:1px solid #cccccc;
}

#menu a:hover{
  border-color:#000;
}
-->
</style>
</head>
<body>
<div id="menu">
  <a href="#">Home</a>
  <a href="#">Über uns</a>
  <a href="#">Leitung</a>
  <a href="#">Proben</a>
  <a href="#">Auftritte</a>
</div>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.
Zurück