timmy: Navigationsleiste (Dropdown Windows Like)

SELF-Forum

Navigationsleiste (Dropdown Windows Like)

timmy
– Informationen zu den Bewertungsregeln

Hallo

Ich möchte gerne auf meiner Seite ein neues Menü machen. Das sollte so funktionieren wie bei programmen die : Datei-bearbeiten-Ansicht usw... Menü Leiste. (ich hab keine ahnung wie die heisst ;) )

Mit was realisiert man sowas am besten? das sollte wohl jscript sein? hat vielleicht jemand ein gutes tutorial dazu? das ganze muss aber mit ASP/VBS funktionieren.

gruss

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Navigationsleiste (Dropdown Windows Like)

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Ich möchte gerne auf meiner Seite ein neues Menü machen. Das sollte so funktionieren wie bei programmen die : Datei-bearbeiten-Ansicht usw... Menü Leiste. (ich hab keine ahnung wie die heisst ;) )

    Mit was realisiert man sowas am besten?

    So: Dynamische CSS-Navigation für moderne Browser

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigationsleiste (Dropdown Windows Like)

      timmy
      – Informationen zu den Bewertungsregeln

      So: Dynamische CSS-Navigation für moderne Browser

      gruß,
      wahsaga

      Genau sowas hab ich gesucht. Dynamische Navigationsleiste nennt sich sowas also..! Vielen Dank

      Das ist aber möglich zum umschreiben, dass man, wenn das menü aufklapt, nicht solche spalten zwischen den einzelnen einträgen hat?

      das sieht aber schonmal sehr gut aus, jetzt kommt wohl die ganze einarbeitung *g*

      gruss

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Navigationsleiste (Dropdown Windows Like)

        B-ellanna
        – Informationen zu den Bewertungsregeln

        Hallo Timmy

        Das ist aber möglich zum umschreiben, dass man, wenn das menü aufklapt, nicht solche spalten zwischen den einzelnen einträgen hat?

        Ja. Stichworte sind hier margin und padding.
        Viel Erfolg,
        B-ellanna

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Navigationsleiste (Dropdown Windows Like)

          timmy
          – Informationen zu den Bewertungsregeln

          Hallo Timmy

          Das ist aber möglich zum umschreiben, dass man, wenn das menü aufklapt, nicht solche spalten zwischen den einzelnen einträgen hat?

          Ja. Stichworte sind hier margin und padding.
          Viel Erfolg,
          B-ellanna

          OK, ich les mir das alles mal durch. Ich hab bis jetzt leider nie was mit css gemacht. es tönt aber sehr interessant, vielen dank

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

    2. Navigationsleiste (Dropdown Windows Like)

      dey Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo,

      So: Dynamische CSS-Navigation für moderne Browser

      Achtung: "... für moderne Browser" es funktioniert nicht im IE

      Leider habe ich den Link zur Originalquelle verbummelt, deshalb poste ich dir den gesamten Quelltext. Das funktioniert zumindest mit FF und IE6.

        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >  
<head>  
<title>Drop Down Menu Example</title>  
<style type="text/css">  
.menu {display:none;}  
#noniemenu {position:absolute;}  
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}  
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}  
a.inner, a.inner:visited {display:block; width:89px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}  
a.inner:hover {background:#add;}  
</style>  
  
<!--[if IE]>  
   <style type="text/css">  
   /*<![CDATA[*/  
#noniemenu {display:none;}  
.menu {display:block; position:absolute;}  
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}  
a.outer:hover {color:#fff; background:#000; overflow:visible;}  
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}  
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}  
a.inner:hover {background:#add;}  
   /*]]>*/  
   </style>  
<![endif]-->  
  
</head>  
  
<body>  
  
<div class="menu">  
<a class="outer" href="#">Home  
</a>  
  
<a class="outer" href="#">Pages  
<table><tr><td>  
<a class="inner" href="#">Home</a>  
<a class="inner" href="#">Products</a>  
<a class="inner" href="#">How To</a>  
<a class="inner" href="#">#Store</a>  
<a class="inner" href="#">#Links</a>  
</td></tr></table>  
</a>  
  
<a class="outer" href="#">Photo Albums  
<table><tr><td>  
<a class="inner" href="#">House Album</a>  
<a class="inner" href="#">A N Other Album</a>  
<a class="inner" href="#">Wedding Album</a>  
<a class="inner" href="#">2000 Series</a>  
</td></tr></table>  
</a>  
  
<a class="outer" href="#">Blogs  
<table><tr><td>  
<a class="inner" href="#">Mostly</a>  
</td></tr></table>  
</a>  
</div>  
  
<div id="noniemenu">  
<div class="holder">  
Home<br />  
</div>  
  
<div class="holder">  
Pages<br />  
<a class="inner" href="#">Home</a>  
<a class="inner" href="#">Products</a>  
<a class="inner" href="#">How To</a>  
<a class="inner" href="#">#Store</a>  
<a class="inner" href="#">#Links</a>  
</div>  
  
<div class="holder">  
Photo Albums<br />  
<a class="inner" href="#">House Album</a>  
<a class="inner" href="#">A N Other Album</a>  
<a class="inner" href="#">Wedding Album</a>  
<a class="inner" href="#">2000 Series</a>  
</div>  
  
<div class="holder">  
Blogs<br />  
<a class="inner" href="#">Mostly</a>  
</div>  
</div>  
  
  
<p>&nbsp;</p>  
<p>This is just a test page to show how the menu can be made to overlap the content.</p>  
<p>This is achieved by taking the menu out of the page flow and giving it a position:absolute.</p>  
<p>If you check the menu above it should overlap this text.</p>  
<p>For Firefox I have added an extra containing div that has a position:absolute;</p>  
<p>Oh, and you must have the !DOCTYPE specified or Firefox etc will not work.</p>  
<p>Please send any questions or comments to me.</p>  
<p>REMEMBER : THIS IS JUST FOR FUN ;O)</p>  
  
</body>  
</html>

      bydey

      --
      -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
      -- Navigate all your PHP web projects with  PHP Project Browser--
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Navigationsleiste (Dropdown Windows Like)

        wahsaga Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        hi,

        Achtung: "... für moderne Browser" es funktioniert nicht im IE

        Weiterlesen: Mit Javascript-Unterstützung schon.

        Leider habe ich den Link zur Originalquelle verbummelt, deshalb poste ich dir den gesamten Quelltext. Das funktioniert zumindest mit FF und IE6.

        <a class="outer" href="#">Pages
        <table><tr><td>

        Tabellen und Links in Links verschachtelt - bitte verbummele das auch ganz schnell, egal wo du es her hast.

        Dass es im IE "funktioniert", ändert gar nichts daran, dass es sehr großer Mist ist.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. Navigationsleiste (Dropdown Windows Like)

          dey Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo,

          Weiterlesen: Mit Javascript-Unterstützung schon.

          Das kann die Lösung aber auch nicht sein!?

          Tabellen und Links in Links verschachtelt - bitte verbummele das auch ganz schnell, egal wo du es her hast.

          Dass es im IE "funktioniert", ändert gar nichts daran, dass es sehr großer Mist ist.

          Ich hatte es auch schon ohne table versucht, scheint aber nicht zu funktionieren!?

          bydey

          --
          -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
          -- Navigate all your PHP web projects with  PHP Project Browser--
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Navigationsleiste (Dropdown Windows Like)

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            Weiterlesen: Mit Javascript-Unterstützung schon.
            Das kann die Lösung aber auch nicht sein!?

            Natürlich kann es das.

            Der IE-Nutzer ohne Javascript sieht dann halt ein vollkommen aufgeklapptes Menü.

            Tabellen und Links in Links verschachtelt - bitte verbummele das auch ganz schnell, egal wo du es her hast.

            Dass es im IE "funktioniert", ändert gar nichts daran, dass es sehr großer Mist ist.
            Ich hatte es auch schon ohne table versucht, scheint aber nicht zu funktionieren!?

            Aha, und?

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln