Pull Up- statt Pull Down Menue

Rubikon · 20 Oktober 2009

Hallo zusammen.

Nach reichlicher Recherche habe ich es geschafft ein Pull Down Menu ohne Script, nur mit CSS hinzubekommen.

HTML:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title></title>

<style type="text/css">
    ul 
    {    
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    li 
    {
        float: left;
        position: relative;
        width: 10em;
    }        
    
    li ul 
    {
        display: none;
        position: absolute;
        top: 1em;
        left: 0;
    }    
    
    li > ul 
    {
        top: auto;
        left: auto;
    }
    
    li:hover ul 
    { 
        display: block; 
    }
</style>
</head>

<BODY>    
<ul>
    <li>Menue1
        <ul>
            <li>
                <a href="">Gruen</a>
            </li>
            <li>
                <a href="">Gelb</a>
            </li>
            <li>
                <a href="">Rot</a>
            </li>
            <li>
                <a href="">Schwarz</a>
            </li>
        </ul>
    </li>
    <li>Menue2
        <ul>
            <li>
                <a href="">Alpha</a>
            </li>
            <li>
                <a href="">Beta</a>
            </li>
            <li>
                <a href="">Gamma</a>
            </li>
        </ul>
    </li>
    <li>Menue3
        <ul>
            <li>
                <a href="">Eins</a>
            </li>
            <li>
                <a href="">Zwei</a>
            </li>
            <li>
                <a href="">Drei</a>
            </li>
            <li>
                <a href="">Vier</a>
            </li>
            <li>
                <a href="">Fuenf</a>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

Nun möchte ich aber gerne dass sich das Menue nicht nach unten, sondern nach oben aufklappt.

Hintergrund ist der, dass das Menue am untern Rand eines Frames sitzt und wenn es nach unten aufklappt, ist es nicht komplett zu sehen.

Wie bekomme ich das hin?

Vielen Dank

roddy · 20 Oktober 2009

Glaube nicht dass es sowas als HTML / CSS lösung gibt.

Ne alternative wäre mit DHTML oder JS

Wie wäre es denn z. B. damit ?

http://www.milonic.com/menusample22.php

Rubikon · 21 Oktober 2009

Naja, von JS bin ich ja nicht wirklich ein Fan...

Zum einen kann der Besucher das ja deaktiviert haben und zum anderen bekomme ich alleine schon Würfelhusten wenn ich mir den Quelltext von dem Beispiel anschaue. Was mit CSS mit ein paar Zeilen (anscheinend leider nicht ganz) geht, sind mit JS direkt einige kilo byte... Da muss man auch erstmal durchblicken...

Kann jemand roddys Vermutung bestätigen dass das mit CSS nicht geht, oder hat vielleicht doch jemand eine Lösung? :neutral:

Gilles · 21 Oktober 2009

Ich hab es noch nicht ausprobietr und bin kein CSS Meister, aber wenn du den Untermenüs ein margin-left vergibst könnte das doch klappen. (Kann dies leide rnicht bestätigen)
--
Edit: hab es nun ausprobiert und kann bestätigen das das ganze klappt.
Folgendes hab ich am css verändert

Code:

li:hover ul 
    { 
        margin-left: 4em;
        margin-top: -1em;
        display: block; 
    }

Pull Up- statt Pull Down Menue

Rubikon

Neues Mitglied

roddy

Mitglied

Rubikon

Neues Mitglied

Gilles

Blogger

Neueste Beiträge