Jump to content
  • 0

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

Belovsan

Asked by Belovsan,

 Share

Question

Belovsan Explorer

Belovsan

Posted
Posted

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

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

Спасибо.

Link to comment
Share on other sites

28 answers to this question

Recommended Posts

  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

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

Edited by Belovsan
Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

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

Edited by Belovsan
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

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

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

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

Edited by Belovsan
Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted

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

без 


white-space: nowrap;

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

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

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

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

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

Удачи.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

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

#nav ul {
    left: 0;

Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted (edited)

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

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

*IE7 VirtualBox

Edited by tt48
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Вот в общем копать предлагаю в эту сторону:

<!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>

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

А я себе это вот так примерно представлял.

<!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>

Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted

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

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


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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

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

Блин, я думал ты понимаешь юмор :(

Тогда вот решение: Всё таки одноразовый экспрешан, это не тоже самое, что жс

<!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>

  • Like 2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept