Ergebnis 1 bis 5 von 5
  1. #1
    Stanley Jobson
    Registriert seit
    03.10.2007
    Beiträge
    655

    Standard Suche für ein Menü ein POP-Up wie dies bei 3DL.AM

    Suche für ein Menü ein POP-Up wie dies bei 3DL.AM.
    Wenn jemand für mich eins Machen könnte wäre ich Dankbar..(blicke das einfach nicht durch)

    L!x

    Hier mein BM Link
    [6/0]

  2. #2
    Transpinguin Avatar von IRET
    Registriert seit
    02.09.2008
    Beiträge
    1.295

    Standard

    Beschreibe das bitte genauer.
    Du willst einfach Popups??
    Oder dass wenn du auf einen Button klickst sich ein Menü öffnet(wie hier bei der SUFU zB)??

  3. #3
    Trojaner Avatar von n3v3r-ag4in
    Registriert seit
    08.01.2009
    Beiträge
    84

    Standard

    wobei dies dann ein drop-down menue wäre....

    so ich habe mal gekramt, weil ich so ein dropdown-menü mal umgesetzt habe. dies basiert auf css und nicht javascript, heisst, ist auch mit ausgeschaltetem javascript ausführbar. (leider nicht barrierefrei, da das menü mit der tastatur trotzdem verbuggt ist)

    das script besteht aus 3 komponenten:

    1. die .html datei:
    2. css datei für alle browser
    3. css datei für explorer < 7

    1. hier genannt dropdown.html

    Code:
    <?xml version="1.0" encoding="ISO-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>n3v3r-ag4in modifizierter dropdown css hack für alle browser</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="n3v3r-ag4in" /> 
    <link rel="stylesheet" type="text/css" href="dropdown.css" />
    <style type="text/css">@import url(dropdown.css) all;</style>
      <!--[if lt IE 7]>
        <style type="text/css">@import url(ie_drop.css);</style>
      <![endif]-->
    
    </head>
    <body>
    
    
    <div id="menuebox" style="">
    
        <div id="menue">
    
                
            <div class="aussen" style="text-align:left; margin-left:30px;">
    <span class="menutag"><strong>Überschrift</strong></span>
    <a class="innen-1" href="">Unterpunkt 1</a><span class="invis"></span>
    <a class="innen" href="">Unterpunkt 2</a><span class="invis"></span>
    <a class="innen" href="">Unterpunkt 3</a>        </div>
    
            
    
            </div>
    
    
        </div><!-- menue -->
    
    <!-- Der folgende Block bedient nur IEs! 
         Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->
    
    <!--[if IE]>
    
        <div class="stupidie">
    
    <a class="auss" href="#" style="margin-left:25px"><span class="menutag">Überschrift</span>
    <table><tr><td>
    <a class="inn" href="">Unterpunkt 1</a>
    <a class="inn" href="">Unterpunkt 2</a>
    <a class="inn" href="">Unterpunkt 3</a>
    </td></tr></table>
    </a>
    
        
    <![endif]-->
    
        </div>
    </body>
    </html>
    2. css-datei für alle browser ( dropdown.css )

    Code:
    #menuebox-top {
    position: relative;
    height: 30px;
    font-size: 12px;
    }
    .stupidie-top {
    display: none;
    }
    #menue-top {
    position:absolute;
    top: 5px;
    left: 10px;
    z-index: 200;
    }
    #menue-top .aussen {
    width: 120px;
    }
    #menue-top a.innen,
    #menue-top a.innen-1 {
    width: 120px;
    }
    /* ================= */
    
    
    #menuebox {
    position: relative;
    height: 30px;
    }
    .stupidie {
    display: none;
    }
    #menue {
        position:absolute;
        top: 5px;
        left: 0;
        padding-bottom: 2px;
        z-index: 200;
        width: 950px;
    }
    
    .aussen {
    float: left;
    display: block;
    overflow: hidden;
    width: 120px;
    height: 1.3em;
    font-weight: bold;
    text-align: left;
    background-color:#580000;
    color: white;
    
    
    }
    .aussen:hover {
    height: auto;
    background-color:#580000;
    color: #10e51a;
    }
    .aussen2 {
    float: left;
    display: block;
    overflow: hidden;
    width: 120px;
    height: 2.4em;
    font-weight: bold;
    text-align: left;
    background-color: #580000;
    color: white;
    
    }
    .aussen2:hover {
    height: auto;
    background-color:#580000;
    color: #10e51a;
    }
    
    
    a.innen-1 {
    margin-top: 2px;
    }
    
    a.innen,
    a.innen-1 {
    display: block; text-align:left;
    width: 120px;
    padding: 5px 0;
    text-decoration: none;
    font-weight: normal;
    background-color: #580000; background-image:url(bg.gif);
    color: white; font-size:11px; padding-left:5px;
    }
    
    a:hover.innen,
    a:hover.innen-1 {
    background-color: #580000;
    color: #10e51a;
    }
    
    span.menutag {
    display: block;
    cursor: default;
    }
    3. css datei für die explorer < 7 ( ie_drop.css )

    Code:
    /* seiteneigenes dropdown im head */
    
    .stupidie-top {
    display: block;
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 200;
    }
    .stupidie-top a.auss {
    width: 10em;
    }
    .stupidie-top a.inn {
    width: 10em;
    }
    /* ================ */
    
    
    #menue {
    display:none;
    }
    .stupidie {
    display: block;
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 200;
    }
    
    a.auss {
    float: left;
    width: 10em;
    height: 1.4em;
    overflow: hidden;
    display: block;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    background-color: #580000;
    color: white; 
    }
    a:hover.auss {
    overflow: visible;
    background-color: #580000;
    color: #10e51a;
    }
    a:hover.auss table {
    display: block;
    margin-top: 3px;
    
    color: #400;
    border-collapse: collapse;
    }
    
    a.inn {
    display: block;
    width: 10em;
    padding: 2px 0;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    
    background-image:url(bg.gif);
    color: white; padding-left:5px;
    }
    
    a:hover.inn {
    position: relative;
    background-color: #580000 ;
    color: #10e51a;
    }
    span.menutag {
    display: block;
    cursor: default;
    }
    so das menu entstand abgeleitet von nem online-beispiel, der zahn der zeit lässt mich die quelle aber nicht mehr finden.

    (getestet mit: ie7, firefox, ie6, opera)
    Geändert von n3v3r-ag4in (15.06.2009 um 09:52 Uhr) Grund: Automerged Doublepost

  4. #4
    Stanley Jobson
    Registriert seit
    03.10.2007
    Beiträge
    655

    Standard

    Danke für diese Antworten.. aber das ist nicht ganz das was ich suche.. hier mal ein Screen
    (Klick Bild)



    Hoffe das das Verständlicher ist

    Hier mein BM Link
    [6/0]

  5. #5
    Transpinguin Avatar von IRET
    Registriert seit
    02.09.2008
    Beiträge
    1.295

    Standard

    Achso
    Das wird mit Javscript gemacht.
    Ich hatte mal sowas nur weiß ich nicht mehr wo.
    Und da ich selber nur sehr wenig Javascript kann weiß ich das leider nicht wie man das so schön macht.
    Aber mit Layer sollte das gehen.
    Schau dir mal das
    http://www.willmaster.com/blog/css/s...oating-div.php
    und das
    http://de.selfhtml.org/javascript/objekte/layers.htm
    an.
    Damit sollte es gehn.
    Aber vl gibts was einfacheres.
    mfg

    //edit

    hab sowas gefunden
    http://dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
    und hier auch in anderen Variationen(Tooltip ist das Stichwort)
    http://dynamicdrive.com/dynamicindex5/index.html
    Geändert von IRET (15.06.2009 um 13:04 Uhr)

Stichworte

Berechtigungen

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