Hallo.

Ich habe mir eine horizontale Navigation nach den Listenvorgaben gebaut, also:

div, ul und dann die li mit dem a.

Mein Wunsch war es nun, dass alle Menüpunkte eine feste Breite haben, was auch funktioniert. Allerdings bestehen einige Einträge aus 2 Worten und müssen aufgrund der Länge zweizeilig dargestellt werden.

Ich hätte es jetzt gerne so, dass sowohl die zweizeiligen als auch die einzeiligen vertikal zentriert im li ausgerichtet sind, weiß aber leider nicht wie das gehen soll.

Line-height, scheint nicht viel zu bringen.

versuch es mal damit:

script für navi:

PHP-Code:

<script src="SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script> 


SpryMenuBar.js muss daneben gespeichert werden:

PHP-Code:


var Spry;
if(!Spry)
{
    Spry = {};
}
if(!Spry.Widget)
{
    Spry.Widget = {};
}

Spry.Widget.MenuBar = function(element, opts)
{
    this.init(element, opts);
};

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
    this.element = this.getElement(element);


    this.currMenu = null;

    var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
    {

        return;
    }


    if(opts)
    {
        for(var k in opts)
        {
            var rollover = new Image;
            rollover.src = opts[k];
        }
    }

    if(this.element)
    {
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
        {
            this.initialize(items[i], element, isie);
            if(isie)
            {
                this.addClassName(items[i], "MenuBarItemIE");
                items[i].style.position = "static";
            }
        }
        if(isie)
        {
            if(this.hasClassName(this.element, "MenuBarVertical"))
            {
                this.element.style.position = "relative";
            }
            var linkitems = this.element.getElementsByTagName('a');
            for(var i=0; i<linkitems.length; i++)
            {
                linkitems[i].style.position = "relative";
            }
        }
    }
};

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
    {
        return false;
    }
    return true;
};

Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
    if (!ele || !className || this.hasClassName(ele, className))
        return;
    ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
    if (!ele || !className || !this.hasClassName(ele, className))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
    try
    {
        if (element.addEventListener)
        {
            element.addEventListener(eventType, handler, capture);
        }
        else if (element.attachEvent)
        {
            element.attachEvent('on' + eventType, handler);
        }
    }
    catch (e) {}
};


Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:false;';
    menu.parentNode.appendChild(layer);
    
    layer.style.left = menu.offsetLeft + 'px';
    layer.style.top = menu.offsetTop + 'px';
    layer.style.width = menu.offsetWidth + 'px';
    layer.style.height = menu.offsetHeight + 'px';
};


Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
    var layers = menu.parentNode.getElementsByTagName('iframe');
    while(layers.length > 0)
    {
        layers[0].parentNode.removeChild(layers[0]);
    }
};

Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
    var menus = root.getElementsByTagName('ul');
    for(var i=0; i<menus.length; i++)
    {
        this.hideSubmenu(menus[i]);
    }
    this.removeClassName(this.element, "MenuBarActive");
};

Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
    return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};


Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
    if(this.currMenu)
    {
        this.clearMenus(this.currMenu);
        this.currMenu = null;
    }
    
    if(menu)
    {
        this.addClassName(menu, "MenuBarSubmenuVisible");
        if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
        {
            if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
            {
                menu.style.top = menu.parentNode.offsetTop + 'px';
            }
        }
        if(typeof document.uniqueID != "undefined")
        {
            this.createIframeLayer(menu);
        }
    }
    this.addClassName(this.element, "MenuBarActive");
};

Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
    if(menu)
    {
        this.removeClassName(menu, "MenuBarSubmenuVisible");
        if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
        {
            menu.style.top = '';
            menu.style.left = '';
        }
        this.removeIframeLayer(menu);
    }
};

Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
{
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);

    var hasSubMenu = false;
    if(menu)
    {
        this.addClassName(link, "MenuBarItemSubmenu");
        hasSubMenu = true;
    }

    if(!isie)
    {

        listitem.contains = function(testNode)
        {
        
            if(testNode == null)
            {
                return false;
            }
            if(testNode == this)
            {
                return true;
            }
            else
            {
                return this.contains(testNode.parentNode);
            }
        };
    }
    
    
    var self = this;

    this.addEventListener(listitem, 'mouseover', function(e)
    {
        if(self.bubbledTextEvent())
        {
            
            return;
        }
        clearTimeout(closetime);
        if(self.currMenu == listitem)
        {
            self.currMenu = null;
        }
        
        self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
        if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
        {
            opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
        }
    }, false);

    this.addEventListener(listitem, 'mouseout', function(e)
    {
        if(self.bubbledTextEvent())
        {
        
            return;
        }

        var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
        if(!listitem.contains(related))
        {
            clearTimeout(opentime);
            self.currMenu = listitem;

    
            self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
            if(menu)
            {
                closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
            }
        }
    }, false);
}; 


SpryMenuBarHorizontal.css muss auch daneben gespeichert werden:

PHP-Code:


@charset "UTF-8";


ul.MenuBarHorizontal
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
}

ul.MenuBarActive
{
    z-index: 1000;
}

ul.MenuBarHorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    float: left;
}

ul.MenuBarHorizontal ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
    left: auto;
}

ul.MenuBarHorizontal ul li
{
    width: 8.2em;
}

ul.MenuBarHorizontal ul ul
{
    position: absolute;
    margin: -5% 0 0 95%;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
    left: auto;
    top: 0;
}


ul.MenuBarHorizontal ul
{
    border: 1px solid #CCC;
}

ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
    background-color: #33C;
    color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
    background-color: #33C;
    color: #FFF;
}


ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}


ul.MenuBarHorizontal iframe
{
    position: absolute;
    z-index: 1010;
}

@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        background: #FFF;
    }
} 


Gibt es da keine simplere Lösung?

Ist ja schließlich kein Hexenwerk, was ich hier gerne möchte.

die gibt es sicher, nur wüsste ich auf anhieb nicht genau wie, meine variante funktioniert jedenfalls, sollte auch nur als hilfe dienen.

Hi.

Zitat von Fanatico

Gibt es da keine simplere Lösung?

Ist ja schließlich kein Hexenwerk, was ich hier gerne möchte.

Da muß ich dich leider enttäuschen.

line-height oder padding wären hier in der Tat die Eigenschaften deiner Wahl, nur funktioniert dies dann nicht gleichzeitig bei einem "Zweizeiler".

mfg Maik

Bliebe noch vertical-align:middle in Verbindung mit den Tabelleneigenschaften der display-Eigenschaft - Browserunterstützung vorausgesetzt, die der IE selbst in der aktuellen Version "8" noch immer nicht zu bieten hat.

HTML-Code:

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2<br>link 2</a></li>
</ul>

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

ul { margin:0; padding:0; list-style:none; } li { float:left; display:table; } a { display:table-cell; vertical-align:middle; height:50px; background:#ddd; }

mfg Maik