Автоматическое растягивание по ширине пунктов выпадающего меню

Belovsan · May 16, 2011

Всем добрый вечер. Вот уже реально крышу несёт не могу разрешить проблему. В общем есть горизонтальное выпадающее меню. Надо сделать так, чтобы выпадающие пункты по ширине растягивались в зависимости от величины названия пункта меню. То есть, чтобы общая ширина выпадающего меню бы соотв ширине самого длинного назв пункта. Уже мучаюсь целый день никак не могу въехать, как это сделать. Вот пациент: http://verstku.narod.ru/trablmenu/index.html

Получается в две строки почему-то идут выпадающие пункты и хоть ты тресни (((. Уже просто чувтсввую, что мозг близок к взрыву. Помогите, плиз.

Спасибо.

tt48 · May 16, 2011


ul#nav ul a{
white-space:nowrap;
}
#nav ul li{
float: none;
}

Edited May 16, 2011 by tt48

Belovsan · May 16, 2011

Это единственный способ? Честно говоря немного не кроссбраузерно выходит. ИЕ7, ИЕ6 криво отображают. Там получается уже другая проблема. Если разная ширина каждого пункта (в зависимости от наполнения) - это в ИЕ7.

Edited May 16, 2011 by Belovsan

Belovsan · May 17, 2011

Неужели все так делают? Ведь выпадающее меню - это вроде как нередко встречающийся участок работы. И наверняка многим приходилось делать его пункты именно резиновыми. Поделитесь, плиз, своими вариантами вёрстки. Ведь это будет полезно широкому кругу верстальщиков, в том числе и начинающим )

Edited May 17, 2011 by Belovsan

psywalker · May 17, 2011

Неужели все так делают? Ведь выпадающее меню - это вроде как нередко встречающийся участок работы. И наверняка многим приходилось делать его пункты именно резиновыми. Поделитесь, плиз, своими вариантами вёрстки. Ведь это будет полезно широкому кругу верстальщиков, в том числе и начинающим )

А нарисуй что ты хотел.

Belovsan · May 17, 2011

psywalker, приветствую, дружище! Давненько я уже здесь не был ).

Дак нечего там рисовать. Короче, есть выпадающее меню. Надо чтоб оно по ширине тянулось в зависимости от величины самого большого слова в выпадающем списке (речь идёт именно о выпадающем списке). Ессно, чтобы все пункты из выпавшего списка менюхи были одной ширины. То есть, если мы имеем в выпадающем списке пункты: Иванов, Петров, Череззаборногузадерищенко, то все пункты должны по ширине подогнаться под ширину самого большого пункта (Череззаборногузадерищенко). Сейчас почему-то пункты ограничены по ширине. Хотя я им ширину не ограничивал. Тем не менее, они начинают переноситься на новую строку. Вот так: http://verstku.narod.ru/trablmenu/index.html

По версии, предложенной господином tt48 в принципе решается трабл, но не везде. Скажем в ИЕ7, ИЕ6 чёт оно не очень корректно отображается. Да и мне что-то думается, что должен быть более корректный выход. Кроме того, вся ж страна верстает вып менюхи. Ну, или полстраны )

Edited May 17, 2011 by Belovsan

tt48 · May 17, 2011

Пока у меня только два замечания:

без


white-space: nowrap;

не обойтись - переносить будет

и при указании

 position: absolute; /*left:0; ставить надо всегда, если только не width =100%;*/

Чего ie не растягивает пункты меню до длины контейнера - фиг его знает.

Мне опыта не хватает это сверстать нормально - на ум лезут таблицы.

Удачи.

psywalker · May 17, 2011

psywalker, приветствую, дружище! Давненько я уже здесь не был ).

Привет! Чё не заходишь?

А вот так не пашет в ИЕ и везде?

#nav li ul li {
    background-position: -15px 0;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    width: 100%;
}

#nav ul {
    left: 0;

tt48 · May 17, 2011

Средний пункт не растягивается..Остаётся по ширине своего содержимого.

Если поставить переходный доктайп - то слишком широко растягивается.

*IE7 VirtualBox

Edited May 17, 2011 by tt48

psywalker · May 17, 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=windows-1251" />
    <title>Новый Документ</title>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
<script type="text/javascript" src="fixie.js"></script>
<style type="text/css">
#nav {display:block; list-style:none; font:bold 13px/30px Verdana, Arial, Helvetica, sans-serif;}
#nav ul{position:absolute; top:30px; list-style:none; left: 0; background: blue;}
#nav li { background: red; float:left; position:relative; margin:0 1px;}
#nav li a {display:block; float:left; color:#000; text-decoration:none; padding:0 16px;}
#nav li:hover, #nav li.jshover {background-position:0 -30px;}
#nav li:hover ul{display:block;}

#nav li ul li { background: blue; height:30px; line-height:30px; white-space: nowrap;}
#nav li ul li a {float:none; background: blue; width: 100%; overflow: hidden; display: block;}

#nav li ul li:hover, #nav li ul li.jshover {background-position:-15px -30px;}
</style>

</head>

<body>
<div id="container">
    <div id="header">
			<ul id="nav">
				<li><a href="#">Главная</a></li>
                <li><a href="#">Секреты</a></li>
                <li><a href="#">Скачать</a></li>

                <li><a href="#">Новости</a></li>
                <li><a href="#">F.A.Q.</a></li>
                <li><a href="#">Оплата</a></li>
                <li><a href="#">Реклама</a>
					<ul>
						<li><a href="#">Выпадающий пункт мен</a></li>

                        <li><a href="#">Выпадающий</a></li>
                        <li><a href="#">Выпадающий пункт мен</a></li>
					</ul>	
				</li>
                <li><a href="#">Ссылки</a></li>
			</ul>		
	</div><!--header-->
    <div id="left"></div><!--left-->

    <div id="right">RIGHT</div><!--right-->
    <div id="content">

    </div><!--content-->
    <div id="clear"></div>
</div><!--container-->

<div id="footer">FOOTER</div>
</body>
</html>

Это скорее для ИЕ, в их условных комментах. А для остальных применять решения выше.

ShurikEv · May 17, 2011

width: auto не подходит?

tt48 · May 19, 2011

psywalker может expression вбухать? я просто не в курсе об их возможностях..

ЗЫ: width: auto; ессно не катит.

psywalker · May 19, 2011

psywalker может expression вбухать?

А для чего? Ведь задача вроде решена? Нужно просто собрать решение из всех выше приведённых.

tt48 · May 19, 2011

Нууу...там неинтересное решение - фактически ширина-то левая остаётся..

psywalker · May 19, 2011

Нууу...там неинтересное решение - фактически ширина-то левая остаётся..

Собери решение из постов выше, и покажи его. Посмотрим.

tt48 · May 19, 2011

http://www.beavers-net.narod.ru/primers/spongle.html

Вот. Ежель всеж-таки напутал где - извиняйте.

psywalker · May 19, 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=windows-1251" />
    <title>Новый Документ</title>
        <meta name="title" content="" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
<script type="text/javascript" src="fixie.js"></script>
<style type="text/css">
#nav {
	display:block; 
	list-style:none; 
	font:bold 13px/30px Verdana, Arial, Helvetica, sans-serif;
}
#nav ul{
	position:absolute; 
	top:30px; 
	list-style:none; 
	left: 0;
	margin: 0;
	padding: 0;
	background: silver;
	border: 1px solid #000;
}
#nav li { 
	background: orange; 
	float:left; 
	position:relative; 
	margin:0 1px;
	border: 1px solid #000;
}
#nav li a {
	display:block; 
	float:left; 
	color:#000; 
	text-decoration:none; 
	padding:0 16px;
	}
#nav li:hover ul{display:block; }

#nav li ul{
	padding:0;
}
#nav li ul li { 
	background: #cdecda; 
	height:30px; 
   	line-height: 30px;
    white-space: nowrap;
    width: 100%;

}
#nav li ul li a {
	float:none; 
	background: blue; 
	overflow: hidden; 
	fdisplay: block;
}

</style>
<!--[if IE]>
<style type='text/css'>
#nav {display:block; list-style:none; font:bold 13px/30px Verdana, Arial, Helvetica, sans-serif;}
#nav ul{position:absolute; top:30px; list-style:none; left: 0; background: blue;}
#nav li { background: red; float:left; position:relative; margin:0 1px; }
#nav li a {display:block; float:left; color:#000; text-decoration:none; padding:0 16px;}
#nav li:hover, #nav li.jshover {background-position:0 -30px;}
#nav li:hover ul{display:block;}

#nav li ul li { background: blue; height:30px;  line-height:30px; white-space: nowrap; }
#nav li ul li a {float:none; background: blue; width: 100%; overflow: hidden; display: block;}

</style>
<![endif]-->
</head>

<body>

                        <ul id="nav">
                                <li><a href="#">Главная</a></li>
                <li><a href="#">Секреты</a></li>
                <li><a href="#">Скачать</a></li>

                <li><a href="#">Новости</a></li>
                <li><a href="#">F.A.Q.</a></li>
                <li><a href="#">Оплата</a></li>
                <li><a href="#">Реклама</a>
                                        <ul>
                                                <li><a href="#">Выпадающий пункт мен</a></li>

                        <li><a href="#">Выпадающий</a></li>
                        <li><a href="#">Выпадающий пункт мен</a></li>
                                        </ul>   
                                </li>
                <li><a href="#">Ссылки</a></li>
                        </ul>           

</body>
</html>

tt48 · May 19, 2011

Не суть - ширина среднего пункта от этого не меняется.

Можно эмулировать графически, что он такой же - согласен.

Но интересно именно чтоб фактически было)

expr никак не катят?

*не думаю, что задача может иметь практическое применение, но интересно..

psywalker · May 19, 2011

expr никак не катят?

А напиши его. Посмотрим.

mishka · May 19, 2011

*не думаю, что задача может иметь практическое применение, но интересно..

Вот как раз таки в большинстве задач так и должно быть

psywalker · May 19, 2011

А я думаю, что задача должна быть решена, хотя бы ради опыта. Медведь, помоги нам её добить :facepalmxd:

mishka · May 19, 2011

А я думаю, что задача должна быть решена, хотя бы ради опыта. Медведь, помоги нам её добить

Да я сам такое делал только с джсом.

psywalker · May 19, 2011

А я думаю, что задача должна быть решена, хотя бы ради опыта. Медведь, помоги нам её добить
Да я сам такое делал только с джсом.

Чё, сдаёшься лошара?

tt48 · May 19, 2011

Я с expression еще ни разу не сталкивался..

Мои попытки успехом не увенчались...Если не считать вынос ie вместе с кнопочками..


#nav li ul li { /*bla-bla-bla*/
	width: expression(parentNode.offsetWidth+'px';
}

Оно совсем не так должно быть?

mishka · May 19, 2011

А я думаю, что задача должна быть решена, хотя бы ради опыта. Медведь, помоги нам её добить
Да я сам такое делал только с джсом.
Чё, сдаёшься лошара?

Макс, давай без таких слов. Не со мной.

Можна експрешн написать, но сути это не поменяет, тот же джс.

psywalker · May 19, 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=windows-1251" />
    <title>Новый Документ</title>
        <meta name="title" content="" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
<script type="text/javascript" src="fixie.js"></script>
<style type="text/css">
#nav {
        display:block; 
        list-style:none; 
        font:bold 13px/30px Verdana, Arial, Helvetica, sans-serif;
}
#nav ul{
        position:absolute; 
        top:30px; 
        list-style:none; 
        left: 0;
        margin: 0;
        padding: 0;
        background: silver;
        border: 1px solid #000;
}
#nav li { 
        background: orange; 
        float:left; 
        position:relative; 
        margin:0 1px;
        border: 1px solid #000;
}
#nav li a {
        display:block; 
        float:left; 
        color:#000; 
        text-decoration:none; 

        }
#nav li:hover ul{display:block; }

#nav li ul{
        padding:0;
}
#nav li ul li { 
        background: #cdecda; 
        height:30px; 
        line-height: 30px;
		white-space: nowrap;
		width: 100%;


}
#nav li ul li a {
        float:none; 
        background: blue; 
        display: block;
}

</style>
<!--[if IE]>
<style type='text/css'>
#nav {display:block; list-style:none; font:bold 13px/30px Verdana, Arial, Helvetica, sans-serif;}
#nav ul{position:absolute; top:30px; list-style:none; left: 0; background: blue;}
#nav li { background: red; float:left; position:relative; margin:0 1px; }
#nav li a {display:block; float:left; color:#000; text-decoration:none; }

#nav li:hover ul{display:block;}

#nav li ul li { background: blue; height:30px;  line-height:30px; white-space: nowrap; }

#nav li ul li {
		background-image:expression(
			this.runtimeStyle.backgroundImage  = "none",
			//this.style.width = this.parentNode.offsetWidth + 'px',
            this.li = this.parentNode.getElementsByTagName('li'),
            this.a = 0,
            this.func = function(e){



            	for(var i = 0; i <  e.li.length; i++){
                	if(e.a < e.li[i].offsetWidth){e.a = e.li[i].offsetWidth}
                	e.style.width = e.a + 'px'
                }

                if(e.parentNode.getElementsByTagName('li')[e.parentNode.getElementsByTagName('li').length-1] == e){

            		for(var i = 0; i <  e.li.length; i++){

                		e.li[i].style.width = e.a + 'px'
                	}

                }


            },


            this.func(this)

		);
	}

#nav li ul li a {float:none; background: blue;  display: block;}

</style>
<![endif]-->
</head>

<body>

                        <ul id="nav">
                                <li><a href="#">Главная</a></li>
                <li><a href="#">Секреты</a></li>
                <li><a href="#">Скачать</a></li>

                <li><a href="#">Новости</a></li>
                <li><a href="#">F.A.Q.</a></li>
                <li><a href="#">Оплата</a></li>
                <li><a href="#">Реклама</a>
					<ul>
						<li class="one"><a href="#">Выпадающий пункт мен</a></li>
						<li class="two"><a href="#">Выпадающий</a></li>
						<li class="three"><a href="#">Выпадающий пункт мен</a></li>
						<li class="four"><a href="#">Выпадающий пункт мен</a></li>
					</ul>   
                                </li>
                <li><a href="#">Ссылки</a></li>
                        </ul>           

</body>
</html>

Sign In

Автоматическое растягивание по ширине пунктов выпадающего меню

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information