mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 06:08 Benutzername: Passwort: Auto-Login

Thema: rollover im js menu vom 13.03.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> rollover im js menu
Seite: Zurück  1, 2, 3
Autor Nachricht
maverick69

Dabei seit: 09.12.2002
Ort: Alpirsbach
Alter: 36
Geschlecht: Männlich
Verfasst Mi 17.03.2004 14:05
Titel

Antworten mit Zitat Zum Seitenanfang

also wenn du sooo lieb frägst hab ichs dir ma eben in den code eingefügt. aber nur qucik and dirty. aber eigentlich ist javascript ganz einfach wenn du selfhtml offen hast Lächel

einfach mal ein bissl lesen, der rest kommt von allein...

Code:

<html>
<head>
<style type=text/css>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
   .test
   {
      background-color: #ffffff
   }
   
   .testRollOver
   {
      background-color: #ff0000
   }


</style>

<script type=text/javascript>

function rollon() {
if (window.event.srcElement.className == test) {window.event.srcElement.className = testRollOver;}
}

function rolloff()
{
   if (window.event.srcElement.className == testRollOver) {
      window.event.srcElement.className = test;}
}

// Activate Hoovering //

document.onmouseover = rollon;
document.onmouseout = rolloff;

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format  NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type=text/css>\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
   if(document.getElementById){
   var el = document.getElementById(obj);
   var ar = document.getElementById(masterdiv).getElementsByTagName(span); //DynamicDrive.com change
      if(el.style.display != block){ //DynamicDrive.com change
         for (var i=0; i<ar.length; i++){
            if (ar[i].className==submenu) //DynamicDrive.com change
            ar[i].style.display = none;
         }
         el.style.display = block;
      }else{
         el.style.display = none;
      }
   }
}

function removeRollOvers()
{
    if(document.getElementById)
    {
       document.getElementById(nav1).className='test';
       document.getElementById(nav2).className='test';
       document.getElementById(nav3).className='test';
       document.getElementById(nav4).className='test';
    }
}
</script>
</head>

<body>
<!-- Keep all menus within masterdiv-->
<div id=masterdiv>


   <div class=menutitle onclick=SwitchMenu('sub1')><span id=nav1 class=test onClick=removeRollOvers(); this.className='testRollover'>Site Menu</span></div>
   <span class=submenu id=sub1>
      - <a href=new.htm>What's New</a><br>
      - <a href=hot.htm>What's hot</a><br>
      - <a href=revised.htm>Revised Scripts</a><br>
      - <a href=morezone/>More Zone</a>
   </span>

   <div class=menutitle onclick=SwitchMenu('sub2')><span id=nav2 class=test onClick=removeRollOvers(); this.className='testRollover'>FAQ/Help</span></div>
   <span class=submenu id=sub2>
      - <a href=notice.htm>Usage Terms</a><br>
      - <a href=faqs.htm>DHTML FAQs</a><br>
      - <a href=help.htm>Scripts FAQs</a>
   </span>

   <div class=menutitle onclick=SwitchMenu('sub3')>
   <span id=nav3 class=test onClick=removeRollOvers(); this.className='testRollover'>
Help Forum</span></div>
   <span class=submenu id=sub3>
      - <a href=http://www.codingforums.com>Coding Forums</a><br>
   </span>
   
   <div class=menutitle onclick=SwitchMenu('sub4')>   <span id=nav4 class=test onClick=removeRollOvers(); this.className='testRollover'>Cool Links</span></div>
   <span class=submenu id=sub4>
      - <a href=http://www.javascriptkit.com>JavaScript Kit</a><br>
      - <a href=http://www.freewarejava.com>Freewarejava</a><br>
      - <a href=http://www.cooltext.com>Cool Text</a><br>
      - <a href=http://www.google.com>Google.com</a>
   </span>

   <img src=about.gif onclick=SwitchMenu('sub6')><br>
   <span class=submenu id=sub6>
      - <a href=http://www.dynamicdrive.com/link.htm>Link to DD</a><br>
      - <a href=http://www.dynamicdrive.com/recommendit/>Recommend Us</a><br>
      - <a href=http://www.dynamicdrive.com/contact.htm>Email Us</a><br>
   </span>

</div>
</body>
</html>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Unpredictable

Dabei seit: 11.05.2006
Ort: Siegen
Alter: 30
Geschlecht: Männlich
Verfasst Do 11.05.2006 21:05
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo!

Bin neu und beginne gerade erst meine Einarbeitung in css und javascript!

Ich habe ein kleineres Problem, ich müsste möglichst schnell eine Homepage erstellen und ich möchte gern eine Art Rollover Menü erstellen.
Also ich möchte eine Navigation bauen, bei der man wenn man auf ein Link klickt sich unter diesem weitere unterlinks öffnen und sich dann auch die ganze menü Leiste dynamisch nach unten verschiebt!
Die Angaben hier im Thread haben mir schon ein wenig geholfen, dennoch kriege ich die Version von maverick69 nicht ans laufen.

Kann mir irgendwer helfen?

Danke!
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen javascript menu II
Smart MENU
Collapsible menu
Frage zum Menu
JS-Dropdown Menu
CSS Menu
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.