Ergebnis 1 bis 5 von 5

Thema: Dropdown Menü//Javascript

  1. #1
    Skaters
    Gast

    Standard Dropdown Menü//Javascript

    Hallo, ich habe für die Navigation meiner Webseite Dropdownmenüs für die Navigationsbuttons erstellt, welchee mit jedoch ein kleiens Problem bereiten.
    Funktioniert halt so, dass man auf einen Button klickt, dann öffnet sich darunter eine kleine Navigatigation (dropdown Menü) in dem einige Sublinks sind.
    Das ganze sieht erstma so aus:

    Script+Stylesheet
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    function test&#40;x&#41; &#123;
     if &#40;navigator.appName == 'Microsoft Internet Explorer'&#41;
     x.blur&#40;&#41;;
    &#125;
    function show_layer&#40;x&#41;
    &#123;
    if&#40;document.layers&#41;
    document.layers&#91;x&#93;.visibility="show";
    else
    document.all&#91;x&#93;.style.visibility="visible";
    &#125;
    function hide_layer&#40;x&#41;
    &#123;
    if&#40;document.layers&#41;
    document.layers&#91;x&#93;.visibility="hide";
    else
    document.all&#91;x&#93;.style.visibility="hidden";
    &#125;
    var old;
    var memold;
    var subold;
    
    if&#40;document.layers&#41;
    &#123;
    window.captureEvents&#40;Event.MOUSEDOWN&#41;;
    window.onmousedown=do_out;
    &#125;
    else
    &#123;
    document.onmouseup=do_out;
    &#125;
    function do_menu&#40;x&#41;
    &#123;
    if&#40;!old&#41;
    old=memold;
    if&#40;old!=x&#41;
    &#123;
    show_layer&#40;x&#41;;
    old=x;
    &#125; else
    old="";
    &#125;
    function do_check&#40;x&#41;
    &#123;
    if&#40;old && old!=x&#41;
    &#123;
    hide_layer&#40;old&#41;;
    show_layer&#40;x&#41;;
    old=x;
    &#125;
    do_submenu&#40;&#41;;
    &#125;
    function do_out&#40;&#41;
    &#123;
    if&#40;old&#41;
    hide_layer&#40;old&#41;;
    memold=old; old="";
    do_submenu&#40;&#41;;
    &#125;
    function do_submenu&#40;x&#41;
    &#123;
    if&#40;subold&#41;
    &#123;
    hide_layer&#40;subold&#41;;
    subold="";
    &#125;
    if&#40;x&#41;
    &#123;
    show_layer&#40;x&#41;;
    subold=x;
    &#125;
    &#125;
    function lade&#40;seite&#41; &#123;
    parent.pageFrame.location.href = seite;
    &#125;
    // -->
    </script>
    <style>
    
    .menu        &#123;position&#58; absolute;top&#58;0;z-index&#58; 2;&#125;
    .submenu    &#123;position&#58; absolute;top&#58; 22;z-index&#58; 1;    visibility&#58; hide;visibility&#58; hidden;&#125;
    
    </style>
    Und die Buttons+Menü:
    Code:
    <div id="m1" class="menu" style="left&#58;554;top&#58;208;">
    Button01
    </div>
    <div id="m1x" class="submenu" style="left&#58;567;top&#58;238">
    <table cellspacing="0" cellpadding="0" border="0" width="137">
    <tr><td width="10" height="14">[img]Data/dropdown01.gif[/img]</td><td width="117" height="14">[img]Data/dropdown02.gif[/img]</td><td width="10" height="14">[img]Data/dropdown03.gif[/img]</td></tr>
    <tr><td width="10" background="Data/dropdown04.gif"></td><td width="117" background="Data/dropdown05.gif">
    Sublink
    
    Sublink
    
    Sublink
    
    Sublink</td><td width="10" background="Data/dropdown06.gif"></td></tr>
    <tr><td width="10" height="15">[img]Data/dropdown07.gif[/img]</td><td width="117" height="15">[img]Data/dropdown08.gif[/img]</td><td width="10" height="15">[img]Data/dropdown09.gif[/img]</td></tr>
    </table>
    </div>

    Problem:
    Die Sachen im <div> Tag scheinen eine fest Position, jenach Auflösung des Monitores (oder so) zu haben. Wenn man das Browserfenster in der Größe verändert, bleiben die Buttons wo sie sind, während sie die Tabelle verschiebt.
    Im Internetexplorer (der bei mir die Seite in einer anderen Auflöösung anzeigt) sind die Buttons schon von vorn rein falsch Positioniert.

    Weiss jemand, was falsch ist und wie ich das Problem lösen kann?
    Danke im vorraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    was hältst du von einem reinen css dropdown menu?
    www.htmldog.com

  3. #3
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Nimm lieber ein css-dropdown wie jojo87 vorgeschlagen hat,
    Javascriptnavis sind unsicher, weil du sie ja jederzeit ausschalten kannst, dann wars mit der Navigation
    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  4. #4
    Kaiserliche Hoheit Avatar von No0ob
    Registriert seit
    02.01.2006
    Ort
    Nähe Frankfurt
    Beiträge
    1.500
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    CSS Menüs funktionieren auch nicht in älteren Browsern.

  5. #5
    Skater
    Gast

    Standard

    Hallo, danke für die Antworten.
    Ich habe eure Ratschläge befolgt und konnte mit erfolgreich eine hübsche Navigation zusammenbasteln. Das Problem ist, sie funktioniert momentan nur mit Mozilla Firefox (getestet in Mozilla Firefox, Internet Explorer und tOnline Browser).

    Im Internet Explorer beispielsweise sieht man die Buttons, aber beim Rollover bzw draufklicken, dropt das Menü nicht down!

    Style
    Code:
    <style>
    
    #nav, #nav ul &#123;
    	padding&#58; 0;
    	margin&#58; 0;
    	list-style&#58; none;
    &#125;
    
    #nav a &#123;
    	display&#58; block;
    	width&#58; 10em;
    &#125;
    
    #nav li &#123;
    	float&#58; left;
    	width&#58; 10em;
    &#125;
    
    #nav li ul &#123;
    	position&#58; absolute;
    	width&#58; 10em;
    	left&#58; -999em;
    	border&#58; 4px solid #5C0000;
    	background-color&#58; #900000;
    &#125;
    
    #nav li&#58;hover ul &#123;
    	left&#58; auto;
    &#125;
    
    sfHover = function&#40;&#41; &#123;
    	var sfEls = document.getElementById&#40;"nav"&#41;.getElementsByTagName&#40;"LI"&#41;;
    	for &#40;var i=0; i<sfEls.length; i++&#41; &#123;
    		sfEls&#91;i&#93;.onmouseover=function&#40;&#41; &#123;
    			this.className+=" sfhover";
    		&#125;
    		sfEls&#91;i&#93;.onmouseout=function&#40;&#41; &#123;
    			this.className=this.className.replace&#40;new RegExp&#40;" sfhover\\b"&#41;, ""&#41;;
    		&#125;
    	&#125;
    &#125;
    if &#40;window.attachEvent&#41; window.attachEvent&#40;"onload", sfHover&#41;;
    
    #nav li&#58;hover ul, #nav li.sfhover ul &#123;
    	left&#58; auto;
    &#125;
    
    </style>
    Buttons
    Code:
    <ul id="nav">
    	[*]ButtonX
    		    <ul>[*]Sublink[*]Sublink[*]Sublink[*]Sublink[/list]

Ähnliche Themen

  1. css js dropdown menü
    Von st0ny im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 16.10.2007, 18:26
  2. dropdown menü problem
    Von Bit2_Gosu im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 27.05.2007, 00:13
  3. dropdown Menü
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.11.2006, 21:33
  4. Link aus DropDown Menü und JavaScript
    Von 00eraser00 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 05.10.2006, 16:29
  5. Dropdown-Menü mit Variablenübergabe
    Von Knüps im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 29.12.2005, 16:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •