горизотальное меню

chapai · April 16, 2011

Доброго времени суток.

Недавно начал заниматься версткой, возникла задача, которую никак не могу решить.

Нужно сделать простое одноуровневое горизонтальное меню (таблицы не использовать), т.е. на дивах, с использованием <ul> <li> и CSS. Сложность в том, что некоторые пункты меню располагаются в одну строчку , а некоторые в две строчки. Проблема как выровнять пункты меню по вертикали. Воспользовался display: table-cell; vertical-align: middle;. Получилось вроде бы, но в IE6,7 это не работает. Может кто знает как это можно сделать?

psywalker · April 16, 2011

Старый добрый релатив с абсолютом тебе в помощь. Ищи в инете.

chapai · April 16, 2011

Искал. Много. Куча предложений и вариантов. Под мой случай ничего подходящего.

psywalker · April 16, 2011

Плохо искал. Лови:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Menu</title>
        <style type="text/css">
            *{margin:0;padding:0;list-style:none;}
            body{min-width:1000px;}
            ul{
                height:47px;
                padding:0 20px;
                background:url(m-bg.jpg) left top repeat-x;
                border:1px solid #6b9b07;
                background:#94c74e;
            }
            ul li:hover .drop,ul li.hover .drop{display:block;width:300px;}
            ul li{
                float:left;
                width:14%;
                position:relative;
                height:45px;
                display:table-cell;
                vertical-align:middle;
                padding:1px 1px;
                top:-1px;
                _behavior:url("csshover.htc")
            }
            ul li a{
                font-size:15px;
                color:#fff;
                background:url(arrow.gif) no-repeat 10px 50%;
                vertical-align:middle;
                display:table-cell;
                height:42px;
                padding-left:30px;
            }
            ul li:hover{
                background:url(m-bg.jpg) repeat-x 0 -48px;
                border:1px solid #b1770b;
                height:45px;
                padding:0px 0px 1px;
            }
            ul .drop{
                display:none;
                position:absolute;
                z-index:1;
                width:305px;
                overflow:hidden;
            }
            ul ul{
                left:0;
                top:49px;
                overflow:hidden;
                background:#94c74e;
                border:1px solid #6fa204;
                border-width:0 1px 1px;
                height:auto;
            }
            ul ul li{float:none;text-align:left;width:300px;padding:0 10px;background:none;display:block;}
            ul ul a{padding:0;padding-left:15px;}
            iframe{
                position:absolute;
                top:0px;
                left:0px;
                z-index:-1;
                width:3000px;
                height:3000px;
                filter:mask();
            }
        </style>
        <!--[if lte IE 7]>
            <style type="text/css">
            ul li{width:13.8%;display:inline;zoom:1;}
            ul li a{zoom:1;position:relative;padding-left:30px;width:70%;display:block;background:url(arrow.gif) no-repeat 10px 50%;}
            ul li a span{position:absolute;top:50%;}
            ul li a span span{position:relative;top:-50%;}
        </style>
        <![endif]-->
</head>
<body>
<div>
    <ul>

        <li><a href="#"><span><span>Детские коляски</span></span></a></li>
        <li><a href="#"><span><span>Детская мебель</span></span></a>
            <div class="drop">
                <ul>
                    <li><a href="#">Детские кроватки</a></li>
                    <li><a href="#">Детские комнаты</a></li>
                    <li><a href="#">Дуэты (кровать+комод)</a></li>

                    <li><a href="#">Кроватки-трансформеры</a></li>
                    <li><a href="#">Комод-пеленатор(с ванночкой иеленальным столиком)</a></li>
                    <li><a href="#">Комоды</a></li>
                    <li><a href="#">Шкафы</a></li>
                    <li><a href="#">Игровые манежи</a></li>
                    <li><a href="#">Манежи-кроватки</a></li>

                    <li><a href="#">Пеленальные столики с Ванночкой</a></li>
                    <li><a href="#">Люльки</a></li>
                    <li><a href="#">Люльки - переноски</a></li>
                </ul>
                <!--[if lt IE 7]><iframe></iframe><![endif]-->
            </div>
        </li>

        <li><a href="#"><span><span>Автокресла</span></span></a></li>
        <li><a href="#"><span><span>Постельные пренадлежности</span></span></a></li>
        <li><a href="#"><span><span>Мамочкам в помощь</span></span></a></li>
        <li><a href="#"><span><span>Детский транспорт</span></span></a></li>
        <li><a href="#"><span><span>Для купания и гигиены</span></span></a></li>
    </ul>

    <form action="#">
        <select class="brand"><option>Выберите производителя</option></select>
        <select class="brand"><option>Выберите производителя</option></select>
        <select class="brand"><option>Выберите производителя</option></select>
        <select class="brand"><option>Выберите производителя</option></select>
    </form>
</div>

</body>
</html>

Извлеки только нужное.

chapai · April 17, 2011

Спасибо огромное!

psywalker · April 17, 2011

Спасибо огромное!

Не за что!

Sign In

горизотальное меню

Question

chapai

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

chapai

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

chapai

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information