Menüs wie bei Microsoft.com ?? von Stefan Priebe, 12.03.2000 14:05

Menüs wie bei Microsoft.com ??

Stefan Priebe 12.03.2000 14:05

dhtml

Hallo !

Wie mache ich denn solche Menüs wie bei Microsoft.com ? Also, solche die bei einem MouseOver hervorkommen und dann wieder bei MouseOut verschwinden ? Und natürlich so, daß Sie sowohl Netscape als auch IE kompatibel sind ?

Stefan

Beitrag melden

– Informationen zu den Bewertungsregeln

Menüs wie bei Microsoft.com ??
Christoph Schnauß 12.03.2000 14:32

dhtml
– Informationen zu den Bewertungsregeln
Hallo !

Wie mache ich denn solche Menüs wie bei Microsoft.com ? Also, solche die bei einem MouseOver hervorkommen und dann wieder bei MouseOut verschwinden ? Und natürlich so, daß Sie sowohl Netscape als auch IE kompatibel sind ?

du kannst es mal mit dem folgenden Code versuchen (sorry, das ist ziemlich viel Text), den ich selber auf einer Seite verwende:

<html>

<head>
<title>Menue 1</title>
<base target="_blank">
<style>
.menu
{
position: absolute;
z-index: 1;
padding:3;
border-width: 2;
border-style: ridge;
background-color: white;
color: black;
}
</style>
<script language="JavaScript">

var mpos=new Array();
var mdir=new Array();
var maxmenus=5;
var delay=2;

function do_menu(menu){
for(i=0; i<maxmenus; i++){
  if(menu!=i && mpos[i]>-225){
   mdir[i]=-20;
   if(mpos[i]>=35)
    move_menu(i);
  }
}
mdir[menu]=-mdir[menu];
if(mpos[menu]<=-225 mpos[menu]>=35)
  move_menu(menu);
}

function move_menu(menu){
mpos[menu]+=mdir[menu];
if(document.layers)
  document.layers["menu"+menu].top=mpos[menu];
else
  document.all["menu"+menu].style.top=mpos[menu];
```
if(mpos[menu]>-225 && mpos[menu]<230)  
```
setTimeout("move_menu("+menu+")", delay);
}

function init(){
for(i=0; i<maxmenus; i++){
  mpos[i]=-225;
  mdir[i]=-20;
}
}
</script>

<style type="text/css">

</style>

</head>

<body onload="init()">

<p>Dieses script erzeugt ein aus fünf Feldern bestehendes Menü mit sich aufrollenden
Untermenüs. Es wird etwa in der Mitte des Browserfensters positioniert. Für die jeweils
gewünschte Positionierung müssen die Positionsangaben "mpos" und "mdir" entsprechend
angepaßt - und selbstverständlich müssen auch die Adreßangaben korrigiert werden. </p>

<p> </p>

<p> </p>

<p> </p>

<p>

<dl>

<div class="menu" style="left:15; width: 150; z-index:2"><p class="normal">
<a href="javascript:do_menu(0)" target="_self"><b>Seitenauswahl</b></a></p>
</div>

<div id="menu0" class="menu" style="top:-170; left:15; width:150; position: absolute">
  <dd><p class="normal"><b><br>
    <a href="index.html" target="_self">Startseite</a><br>
    <a href="main.html" target="_self">Hauptseite</a><br>
    Seite 3<br>
    Seite 4<br>
    Seite 5<br>
    </b></p>
  </dd>
</div>

<div class="menu" style="left:163; width: 150; z-index:2"><p class="normal">
<a href="javascript:do_menu(1)" target="_self"><b>Java-Applets</b></a></p>
</div>

<div id="menu1" class="menu" style="top:-225; left:163; width: 150; position: absolute">
  <dd><p class="normal"><b><br>
    <a href="applets1.html" target="_self">Applets 1</a><br>
    <a href="applets2.html" target="_self">Applets 2</a><br>
    <a href="applets3.html" target="_self">Applets 3</a><br>
    <a href="applets4.html" target="_self">Applets 4</a><br>
    <a href="applets5.html" target="_self">Applets 5</a><br>
    <a href="applets6.html" target="_self">Applets 6</a><br>
    <a href="applets7.html" target="_self">Applets 7</a><br>
    </b></dd>
</div>

<div class="menu" style="left:310; z-index:2; width: 150"><p class="normal">
<a href="javascript:do_menu(2)" target="_self"><b>JavaScript-Seiten</b></a></p>
</div>

<div id="menu2" class="menu" style="top:-230; left:310; width: 150; position: absolute">
  <dd><p class="normal"><b><br>
    <a href="jscript01.html" target="_self">erste Seite</a><br>
    <a href="jscript02.html" target="_self">zweite Seite</a><br>
    <a href="jscript03.html" target="_self">dritte Seite</a><br>
    <a href="jscript04.html" target="_self">vierte Seite</a><br>
    </b></dd>
</div>

<div class="menu" style="left:458; z-index:2; width: 150"><p class="normal">
<a href="javascript:do_menu(3)" target="_self"><b>Fractale</b></a></p>
</div>

<div id="menu3" class="menu" style="top:-230; left:458; width: 150 ; position:absolute">
  <dd><p class="normal"><b><br>
    Fractale 1<br>
    Fractale 2<br>
    Fractale 3</b></dd>
</div>

<div class="menu" style="left:606; z-index:2; width: 150"><p class="normal">
<a href="javascript:do_menu(4)" target="_self"><b>verschiedene Links</b></a></p>
</div>

<div id="menu4" class="menu" style="top:-230; left:606; width: 150; position: absolute">
  <dd><p class="normal"><b><br>
    <a href="http://msn.de">MSN-Portalseite</a><br>
    <a href="http://java.sun.com">Sun Microsystems</a><br>
  </b></dd>
</div>
</dl>

</body>

</html>

Christoph S.
Beitrag melden

–
Informationen zu den Bewertungsregeln
Code zum Vergleich besorgen
Christoph Schnauß 12.03.2000 15:42

meinung
– Informationen zu den Bewertungsregeln
Hallo !

Wie mache ich denn solche Menüs wie bei Microsoft.com ? Also, solche die bei einem MouseOver hervorkommen und dann wieder bei MouseOut verschwinden ? Und natürlich so, daß Sie sowohl Netscape als auch IE kompatibel sind ?

hi,

vorhin war ich etwas zu eilig mit dem Absenden ... was ich da gepostet habe, ist _nicht ganz_ dasselbe, was man auf den Microsoft-Seiten findet, aber es entspricht wohl dem, was du gerne haben möchtest.
Grundsätzlich bietet es sich aber an, vorher einfach mal zu schauen, ob man an die Quelltexte der Seiten herankommt, in deren Code man irgendetwas Interessantes finden könnte. Und da gibt es bei allen Microsoft-Seiten eigentlich keine Probleme. Du kannst dir microsoft.com/germany in deinen Browser holen, und dann einfach die Seite direkt aus dem Browser mit "speichern unter" irgendwo ablegen. Der IE wird dir dabei auch alle kleinen Grafiken und externe Java-Script-Dateien (es sind 3 Stück) abspeichern, die du brauchst, um zum Vergleich die nötigen Texte zu haben.
Andrerseits: ich fühle mich nicht sonderlich wohl, wenn ich so einen "Rat" gebe. Man mag zu Microsoft und seinen Produkten und Strategien stehen wie man will, an den Internet-Seiten sind aber Dutzende von Leuten, die doch ein klein wenig von HTML verstehen, längere Zeit fleißig am Arbeiten gewesen. Sie müssen auch Gründe haben, daß seit kurzer Zeit keine ASP-Seiten mehr verwendet werden; jedenfalls nicht bei den Portal-Adressen. Es ist also "reines HTML", woraus die Microsoft-Seiten bestehen, lediglich mit allerhand JavaScript garniert. Und wenn du da so einfach daherkommst und ihren Code "klaust", ist das ein bißchen Mißachtung der Arbeit, die drinsteckt. Sinnvoller ist es, sich die entsprechenden Grundlagen vor allem mit Hilfe von SelfHTML anzueignen und dann einfach herumzuexperimentieren. Es entspricht auch eher dem "Geist" des Forums, wenn du an deinem eigenen Code herumarbeitest und "steckengeblieben" bist, nachzufragen - irgendjemand wird dir antworten und weiterhelfen, wenn ein ernsthaftes Bemühen zu sehen ist. Aber zu erwarten, daß du gleich eine fertige Lösung aufgeschrieben bekommst, ist _eigentlich_ nicht so ganz clever.

Nix für ungut, aber das hab ich schon länger mal sagen gewollt, hier bot es sich jetzt an.

Christoph S.
Beitrag melden

–
Informationen zu den Bewertungsregeln
Menüs wie bei Microsoft.com ??
Daniel Thoma 12.03.2000 20:47

dhtml
– Informationen zu den Bewertungsregeln
Hallo Stefan,

Bei Netscape gibt es ein JavaScript das das macht und angeblich auch auf dem MSIE fuktioniert.
http://developer.netscape.com/viewsource/smith_menu2/smith_menu2.html

Tschüs

Daniel
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Stefan Priebe: Menüs wie bei Microsoft.com ??

Menüs wie bei Microsoft.com ??

Code zum Vergleich besorgen

Menüs wie bei Microsoft.com ??

Menüs wie bei Microsoft.com ??

Code zum Vergleich besorgen

Menüs wie bei Microsoft.com ??