Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag12.02.2007 um 15:40 (UTC)    
Titel: bei berührung soll eine liste ausfahren

ich suche einen code,mit dem eine leiste herunterklappt,wenn man z.b. auf einen button geht .es erscheinen dann mehrere möglichkeiten und man kann auf eine klicken.also auf deutsch^^:es soll eine navi werden,die wagerecht über der seite liegt.ich suche aber nur den code für das ausfahren.

danke schonmal
Beitrag12.02.2007 um 18:29 (UTC)    
Titel:

kann mir keiner helfen?
Beitrag12.02.2007 um 18:30 (UTC)    
Titel:

Schaue mal bei mir auf der Seite www.coolplace.de.tl und klicke unten auf "Zu den Support-Seiten"
Meinst Du so etwas?
Beitrag12.02.2007 um 18:34 (UTC)    
Titel:

ganz genau.das ist sogar mit elegantem ausfahren.das richtige für mich.
Beitrag12.02.2007 um 18:43 (UTC)    
Titel:

wenn ich mich nicht irre hat er es in css programmiert Smile
Beitrag12.02.2007 um 18:44 (UTC)    
Titel:

Schau mal hier: http://www.javarea.de/index.php3?opencat=Javascript&subcat=Navigation&id=471

Manchmal bin ich ja faul Wink

Warum das Rad neu erfinden Laughing
Beitrag12.02.2007 um 18:47 (UTC)    
Titel:

andybabe27 hat Folgendes geschrieben:
wenn ich mich nicht irre hat er es in css programmiert Smile


Da irrst Du Dich, alles ist in CSS auch nicht möglich Wink
Beitrag12.02.2007 um 18:47 (UTC)    
Titel:

Ja CSS und Javascript.
Aber da hat Coolplace Recht, das wird in jedem Javascript-Tutorial gesagt, lieber nach bereits vorhandenen Scripten suchen, weil man sonst viel Arbeit auf sich nimmt.
______________
[img:bb22a53e53]http://img.webme.com/pic/n/naruto-clanx/unbekannt.jpg[/img:bb22a53e53]
Lukas06.de.tl
Downloaden,Spielen,Spass
Wissen ist Macht, du bist machtlos.
Beitrag12.02.2007 um 18:50 (UTC)    
Titel:

könntest du es auch hinbekommen,wenn ich dir den code gebe ,dass du die felder nebeneinander stehen?
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 language="JavaScript" 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|JavaScripte';
Link[1]  = '1|Javarea.de|http://www.javarea.de|';
Link[2]  = '1|Javarea.de|http://www.javarea.de|';
Link[3]  = '1|Javarea.de|http://www.javarea.de|';
Link[4]  = '1|Javarea.de|http://www.javarea.de|';
Link[5]  = '0|Html Hilfe';
Link[6]  = '1|selfhtml|http://|';
Link[7]  = '1|lerne html|http://|'
Link[8]  = '0|Sonst';
Link[9]  = '1|Gästebuch|http://|';
Link[10] = '1|Kontakt|http://|';
Link[11] = '0|noch mehr';
Link[12] = '1|bla bla|';

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 language="JavaScript" type="text/javascript">
<!--
startup(1);
//-->
</script>

</body>
</html>
Beitrag12.02.2007 um 18:51 (UTC)    
Titel:

Dieses Script umzuschreiben wäre ein Mordsaufwand, schau Dich mal auf der Seite um, da sind einige gute Scripts Wink
Unter Anderem auch, was Du suchst.
Beitrag12.02.2007 um 18:55 (UTC)    
Titel:

hab noch gar nicht die anderen sachen angeschaut Embarassed
Beitrag12.02.2007 um 19:00 (UTC)    
Titel:

so hier ist der richtige,falls andere ihn auch benutzen wollen
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>

<style type="text/css" media="screen">
<!--
body
{
   font-family: Verdana, sans-serif;
   font-size: 14px;
   overflow: auto;
   padding: 10px;
   margin: 0px;
}

ul, li
{
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

.menu
{
   position: absolute;
   z-index: 3;
   top: 10px;
}

.menu li
{
   width: 140px;
   float: left;
}

.menu a
{
   border: 1px solid #888;
   background-color: #fff;
   text-decoration: none;
   text-align: center;
   font-weight: bold;
   cursor: default;
   margin: 0px 2px;
   display: block;
   height: 20px;
   color: #000;
}

.menu a:hover
{
   background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
   font-size: 12px;
   display: none;
   width: 140px;
   float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
   font-weight: normal;
   padding-top: 2px;
   border-top: 0px;
   cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
   with (document)
   {
      if (getElementById)
         getElementById(id).style.display = 'block';
      else if (all)
         all[id].style.display = 'block';
      else
         layers[id].display = 'block';
   }
}

function cache(id)
{
   with (document)
   {
      if (getElementById)
         getElementById(id).style.display = 'none';
      else if (all)
         all[id].style.display = 'none';
      else
         layers[id].display = 'none';
   }
}
//-->
</script>

</head>
<body>

<div class="menu">
  <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Medien</a>
      <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
        <li><a href="">Subkategorie 1.1</a></li>
        <li><a href="">Subkategorie 1.2</a></li>
        <li><a href="">Subkategorie 1.3</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Sonstiges</a>
      <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
        <li><a href="">Subkategorie 2.1</a></li>
        <li><a href="">Subkategorie 2.2</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Webmaster</a>
      <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
        <li><a href="">Subkategorie 3.1</a></li>
        <li><a href="">Subkategorie 3.2</a></li>
        <li><a href="">Subkategorie 3.3</a></li>
        <li><a href="">Subkategorie 3.4</a></li>
        <li><a href="">Subkategorie 3.5</a></li>
      </ul>
    </li>

    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
      <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
        <li><a href="">Subkategorie 4.1</a></li>
        <li><a href="">Subkategorie 4.2</a></li>
        <li><a href="">Subkategorie 4.3</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>
viel spaß
@coolplace:danke Wink
Beitrag12.02.2007 um 19:02 (UTC)    
Titel:

Kann ich das als erledigt ansehen?
Beitrag13.02.2007 um 13:26 (UTC)    
Titel:

nee ich hab noch ne frage.ich habe ja die 2 videos unter der navi mit diesem code eingefügt
Code:

<style type="text/css">
<!--
table.impressum{
width: 175px;
height: 200px;
position: absolute;
left: 5px;
top: 600px;
padding-left: 24px;
}
table.impressum td{color: #FFFFFF;}
-->
</style>
<table class="impressum">
<tr>
<td>
text

</td>
</tr>
</table>
jetzt will ich ja noch die neue navi einfügen und zwar im header,wofür ich wieder diesen code verwenden muss.was muss ich dann ändern damit ich verschiedene dinge mit einem code an verschiedene stellen bekomme?ich habe nämlich den code ein zweites mal eingefügt mit der navi,dann hat es den code einfach über dem design angezeigt.
Beitrag13.02.2007 um 13:36 (UTC)    
Titel:

noch ein problem.ich habe jetzt mal die navi in diesem code alleine getestet.ich wollte die lage verändern,indm ich left und top veränderte.in der seitlichen richtung kann ich die leiste verändern,aber in der höhe nicht.an was könnte das liegen?
Beiträge der letzten Zeit anzeigen:   


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