Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag30.03.2007 um 15:20 (UTC)    
Titel: navigation ändern

Ich habe bisher eine normale Navi (abgesehen von den Farben und so) gehabt. Hab jetzt aber ein 'Cascade-Menu' gefunden (von javarea.de) und möchte es an die Stelle der bisherigen Navi setzten. Doch dabei gibt es Schwierigkeiten. Mal ist das ganze Design resetet, mal nur die Navi (dann aber nicht so wie sie sein sollte).


Das ist mein Style:

Code:
<style type="text/css">
<!--
td.edit_below_nav{visibility: hidden;width: 0px;}
td.nav_heading{visibility:hidden;width:0px;}

td.sidebar_heading{background-image:url(url);width: 0 px;}
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: url();background-color:
transparent;border:5px double #ff3300;}
td.edit_navi_headbg{background-image: url(URL);}
td.edit_content{background-image: url(url);width: 0 px}
td.edit_content_bottom2{background-image: url(url);width : 0 px;}
td.edit_content_bottom{background-image: url(url);width : 0 px;}
td.nav:hover{background-image: url();color:
 #FFFF00;text-decoration: none;font-size: 18px;}
td.edit_rechts_cbg{background-image: url(URL);}
td.edit_rechts_sbg{visibility: hidden; width: 0px ;}
td.edit_rechts_bottom{background-image: url(url);}
td.edit_rb_footer{visibility: hidden; width: 0px ;}
td.nav{background-image: url();color:
 #FFFF00;text-decoration: none;font-size: 18px;}
td.edit_content_top{background-image:url();}
body{background-image:url(http://img.webme.com/pic/f/freestyler-mirko/hintergrund-hp.jpg);}
-->
</style>



Und das möchte ich irgendwo einfügen anstelle der Navi:


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cascade Menu</title>

<style type="text/css">
<!--
.menu
{
   background-color: #2b6ebb;
   border: 1px solid #008;
   font-family: Verdana;
   position: absolute;
   font-weight: bold;
   padding-top: 3px;
   font-size: 10px;
   cursor: pointer;
   width: 150px;
   color: #fff;
}

.item_panel
{
   border-left: 1px solid #008;
   border-right: 1px solid #008;
   clip: rect(0, 150, 0, 0);
   position: absolute;
   width: 150px;
}

.item_panel a
{
   text-decoration: none;
   cursor: pointer;
   color: #000;
}

.item
{
   background-color: #e9f0f8;
   font-family: Verdana;
   font-size: 10px;
   width: 148px;
}
//-->
</style>

<script type="text/javascript">
<!--
// www: http://www.javarea.de
// Copyright by javarea.de

// Link[nr] = 'position [0 is menu/1 is item] | Link name | url | target (blank|top|frame_name)'
var Link = new Array();

Link[0]  = '0|Home';
Link[1]  = '1|Startseite|http://freestyler-mirko.de.tl/Startseite.htm|';
Link[2]  = '1|Kontakt|http://freestyler-mirko.de.tl/G.ae.stebuch.htm|';
Link[3]  = '1|Gästebuch|http://freestyler-mirko.de.tl/Kontakt.htm|';
Link[4]  = '1|Über Mich|http://freestyler-mirko.de.tl/-Ue-ber-mich.htm|';

Link[5]  = '0|Videos';
Link[6]  = '1|Kettcar|http://freestyler-mirko.de.tl/Kettcar.htm';
Link[7]  = '1|Playmobilschrotting|http://freestyler-mirko.de.tl/Playmobilschrotting.htm'
Link[8]  = '1|Schule-Zu viel Zeit|http://freestyler-mirko.de.tl/Schule-_-Zu-viel-Zeit.htm'

Link[9]  = '0|Bilder';
Link[10] = '1|FUN|http://freestyler-mirko.de.tl/FUN.htm;
Link[11] = '1|Kettcarspähning|http://freestyler-mirko.de.tl/Kettcarsp.ae.hning.htm';
Link[12] = '1|Äktschnmän|http://freestyler-mirko.de.tl/-Ae-ktschnm.ae.n.htm';
Link[13] = '1|Freizeit|http://freestyler-mirko.de.tl/Freizeit.htm';

Link[14] = '0|Lustiges';
Link[15] = '1|Neuigkeiten|http://freestyler-mirko.de.tl/Neuigkeiten.htm';
Link[16] = '1|Computerbau|http://freestyler-mirko.de.tl/Computerbau.htm';
Link[17] = '1|Bier Unser|http://freestyler-mirko.de.tl/Bier-Unser.htm';
Link[18] = '1|Worms|http://freestyler-mirko.de.tl/Worms.htm';

Link[19] = '0|Anderes';
Link[20] = '1|Tuning-Ecke|http://freestyler-mirko.de.tl/Tuning_Ecke.htm';
Link[21] = '1|PC-Ecke|http://freestyler-mirko.de.tl/PC_Ecke.htm';
Link[22] = '1|Bannertausch|http://freestyler-mirko.de.tl/Bannertausch.htm';
Link[23] = '1|Links|http://freestyler-mirko.de.tl/Links.htm';
Link[24] = '1|Umfragen|http://freestyler-mirko.de.tl/Umfragen--f---ar---f---ar---f---ar-.htm';
Link[25] = '1|Kostenlose HP|http://www.homepage-baukasten.de/';
Link[26] = '1|HPBK-Forum|http://www.homepage-baukasten.de/forum/';

Link[27] = '0|Webmaster';
Link[28] = '1|Projekte|http://freestyler-mirko.de.tl/Projekte.htm';
Link[29] = '1|Parties|http://freestyler-mirko.de.tl/Parties.htm';
Link[30] = '1|Codes|http://freestyler-mirko.de.tl/Codes.htm';
Link[31] = '1|Forum|http://freestyler-mirko.de.tl/Forum/index.htm';
Link[32] = '1|Test|http://freestyler-mirko.de.tl/Test.htm';

Link[33] = '0|Extras';
Link[34] = '1|Satellitenbild|http://freestyler-mirko.de.tl/Satellitenbild.htm';
Link[35] = '1|News|http://freestyler-mirko.de.tl/News.htm';
Link[36] = '1|Newsletter|http://freestyler-mirko.de.tl/Newsletter.htm';
Link[37] = '1|Galerie|http://freestyler-mirko.de.tl/Galerie/index.htm';

Link[38] = '0|Schule';
Link[39] = '1|Deutsch|http://freestyler-mirko.de.tl/Deutsch.htm';

Link[40] = '0|Noch was';
Link[41] = '1|Spiele|http://freestyler-mirko.de.tl/Spiele.htm';
Link[42] = '1|Impressum|http://freestyler-mirko.de.tl/Impressum.htm';


var height    = 20; // Hoehe der Menuekoepfe
var iheight   = 15; // Hoehe der Menueelemente
var bgc       = '#e9f0f8' // background color of the item
var over_bgc  = '#fff';
var tc        = '#000' // text color of the item
var over_tc   = '#004891';
var speed     = 0;
var timerID   = 0;
var width     = 152;
var N         = (document.all) ? 0 : 1;
var self_menu = new Array();

function write_menu()
{
   smc   = 0;
   mn    = 0;
   mni   = 1;
   start = -1;

   document.write('<div style="position: absolute;">');

   for (var i = 0; i < Link.length; i++)
   {
      la = Link[i].split('|');

      if (la[0] == 0)
      {
         if (start == 0)
         {
            document.write('</div>');

            h = csmc * iheight;
            tmn = mn; // - h;
            self_menu[smc] = new Array(tmn, h, 0, -2);

            smc++;
            mn--;
         }

         csmc = 0;

         document.write('<div id="down' + smc + '" class="menu" '
                      + 'style="top: ' + mn + 'px; height: ' + height + 'px;" '
                      + 'onclick="pull_down(' + smc + ', ' + mni + ');">'
                      + '  ' + la[1] + '</div>');

         self_menu[smc] = new Array(mn, height, 0, mni);

         smc++;
         mni++;
         mn += height;
         start = 1;
      }
      else
      {
         if (start == 1)
         {
            if (N)
               mn += 2;

            document.write('<div id="down' + smc + '" class="item_panel" '
                         + 'style="top: '+ mn + 'px;">');

            start = 0;
         }

         document.write('<a href="' + la[2] + '"'
                      + ((la[3] != '') ? ' target="' + la[3] + '"' : '')
                      + '><div id="d' + i + '" class="item" '
                      + 'style="height: ' + iheight + 'px;'
                      + ((N) ? ' width:150px;' : '')
                      + '" onmouseover="color(this.id);" '
                      + 'onmouseout="uncolor(this.id);">'
                      + ' ' + la[1] + '</div></a>');

         csmc++;
      }
   }

   if (start == 0)
   {
      document.write('</div>');

      h =  csmc * iheight;
      tmn = mn + 5; // - h;
      self_menu[smc] = new Array(tmn, h, 0);
      name = 'down' + (self_menu.length - 1);

      obj = document.getElementById(name);
      obj.style.borderBottomColor = '#008';
      obj.style.borderBottomWidth = '1px';
      obj.style.borderBottomStyle = 'solid';
   }

   document.write('</div>');
}

function color(obj)
{
   document.getElementById(obj).style.backgroundColor = over_bgc;
   document.getElementById(obj).style.color = over_tc;
}

function uncolor(obj)
{
   document.getElementById(obj).style.backgroundColor = bgc;
   document.getElementById(obj).style.color = tc;
}

function pull_down(nr, c)
{
   if (timerID == '')
   {
      to = self_menu[nr + 1][1]
      begin = nr + 2;

      if (timerID != '')
         clearTimeout(timerID);

      if (self_menu[nr + 1][2] == 0)
      {
         self_menu[nr + 1][2] = 1;

         if (nr == (self_menu.length - 2))
            to++;

         epull_down(begin, to, 0);
      }
      else
      {
         to = 0;
         self_menu[nr + 1][2] = 0;
         name = 'down' + (nr + 2);
         open_item = 0;

         for (var i = 0; i < nr; i++)
            if (self_menu[i][2] == 1)
               open_item += self_menu[i][1];

         if (N == false)
            open_item -= (c * 1);

         if (nr == (self_menu.length - 2))
         {
            val = self_menu[self_menu.length - 1][1];
            to = -1;
         }
         else
            val = parseInt(document.getElementById(name).style.top) - (open_item) -
(c * height);

         epull_up(begin, to, val);
      }
   }
}

function epull_down(nr, to, nowv)
{
   name = 'down' + (nr - 1);
   obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + (nowv + 1) + ', 0)';

   for (var i = nr; i < self_menu.length; i++)
   {
      name = 'down' + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top) + 1;
   }

   nowv++;

   if (nowv < to)
      timerID = setTimeout('epull_down(' + nr + ', ' + to + ', ' + nowv + ');', speed);
   else
      timerID = 0;
}

function epull_up(nr, to, nowv)
{
   name = 'down' + (nr - 1);
   obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + nowv + ', 0)';

   for (var i = nr; i < self_menu.length; i++)
   {
      name = 'down' + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top) - 1;
   }

   nowv--;

   if(nowv > to)
      timerID = setTimeout('epull_up(' + nr + ', ' + to + ', ' + nowv + ');', speed);
   else
      timerID = 0;
}

function startup(nr)
{
   write_menu();

   if (nr != 0)
   {
      for (var i = 0; i < self_menu.length; i++)
      {
         if (self_menu[i][3] == nr)
            pull_down(i, nr);

         i == self_menu.length;
      }
   }
}
//-->
</script>

</head>
<body>

<script type="text/javascript">
<!--
startup(1);
//-->
</script>

</body>
</html>




Ich hoffe mir kann jemand helfen!!!!!
Beitrag30.03.2007 um 18:09 (UTC)    
Titel:

das musst du mit ner absoluten positionierung machen !

warte kurz
______________
Meine Homepage
Mein HP Service
Hertha Fanpage
Die Anti Bayern Seite
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de