Не получается сделать меню

chiffenok · August 14, 2012

Добрый вечер! мне нужно сделать меню типа как тут(сверху слева). Пункты которые не вмещаются в ширину меню помещаются в саб меню "еще". Дизайн сайта резиновый, соответственно ширина меню может меняться и окна тоже. Это можно сделать на Jquery

В моем конкретном случае меню выглядит так

расширяется от 1000px до 1280px

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

Я начала делать с ресайза окна , но скрипт не работает


$(window).resize(function(){
	var widthsCat = 0;
	$(".b-categories .b-category__item").each(function(indx, element){
		var widthECat = $(element).outerWidth(true);
		widthsCat = widthsCat + widthECat;
	});
	var widthCatMenu = $(".b-categories").width();
	while (widthsCat>widthCatMenu) {
		var widthLast = $(".b-category__item").last().width();
		widthsCat = widthsCat - widthLast ;
		$(".b-category__item").last().appendTo(".b-another-menu");
		var widthCatMenu = $(".b-categories").width();
	}
});

nerv · August 14, 2012

прошу хотя бы подсказать направление в котором нужно двигаться..?

учите javascript

chiffenok · August 14, 2012

учите javascript

в процессе и учишься, решая разные задачи, но это оказалась сложной для меня, но а как еще? кто бы мне платил деньги и дал время за то что я сижу целыми днями изучаю javascript, так то я верстальщик

не хотите помогать лучше не пишите вообще ничего, ваши едкие комментарии не помощь а просто флуд

nerv · August 14, 2012

кто бы мне платил деньги и дал время

ах уж простите, мне тоже никто не платит, за то, что я помогаю / пытаюсь помочь таким как Вы

в процессе и учишься

Вы начали не с того. Хотите участвовать в гонках? Научитесь водить машину. Хотите понимать код? Выучите язык, на котором он написан.

ваши едкие комментарии не помощь а просто флуд

ну уж извините, лестью не владею

p.s.: можете заминусовть и этот пост, на карму мне пофиг

chiffenok · August 14, 2012

к чему это все? помощь на форуме дело добровольное вас никто не заставляет помогать насильно, у вас нету времени помочь но тем не менее у вас есть время оставлять длинный бессмысленный пост

nerv · August 14, 2012

http://learn.javascript.ru/play/bEj0Y

реквизиты будут позже

chiffenok · August 14, 2012

да я сейчас пошла по этому же пути, но пока не могу сделать при ресайзе

nerv · August 14, 2012

<!DOCTYPE HTML>
<html>
  <head>    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <style>
      .yellow { background: yellow }
      .lime { background: lime }
      .silver  { background: silver }
    </style>
 <script>
	$(function() {

		var test = $( '#test' );
		var box = $( '#box' );

		$( window ).on( 'ready resize', function() {
			$( 'span', box ).appendTo( test );

			var maxWidth = $( test ).width();
			var width = 0;

			$( 'span', test ).each( function( index, elem ) {
				width += $( elem ).width();

				if ( maxWidth < width ) {
					$( box ).append( elem );
				}
			});
		});

	});
 </script>


  </head>
  <body>

    <div id="test" style="background: olive;">
      <span class="yellow"> Чебурашка - </span>
      <span class="silver"> ушастое </span>
      <span class="lime"> волосатое </span>
      <span class="yellow"> чудовище, </span>
      <span class="silver"> бомжующее </span>
      <span class="lime"> в </span>
      <span class="yellow"> телефонной </span>
      <span class="silver"> будке. </span>
      <span class="yellow"> Чебурашка - </span>
      <span class="silver"> ушастое </span>
      <span class="lime"> волосатое </span>
      <span class="yellow"> чудовище, </span>
      <span class="silver"> бомжующее </span>
      <span class="lime"> в </span>
      <span class="yellow"> телефонной </span>
      <span class="silver"> будке. </span>
    </div>

    <br>
    <br>

    <div id="box" style="background: magenta;"></div>

  </body>
</html>

chiffenok · August 15, 2012

на реальном примере не срабатывает при загрузке окна http://jsfiddle.net/43R5v/ только при ресайзе

сделала так http://jsfiddle.net/43R5v/1/ не знаю на скоко это правильно но работает

Edited August 15, 2012 by chiffenok

nerv · August 15, 2012

на реальном примере не срабатывает при загрузке

Т.е. мой пример нереальный? Так что ли?

Opera, Mozilla, IE8 - работает.

Дорогая, я написал за вас код, практически на 100%, осталось только прикрутить и деньги получить

Не получается? См. этот пост.

Попробуй так:

$(function() {

    var test = $( '#test' );
    var box = $( '#box' );

    $( window ).resize( handler );
    $( document ).ready( handler );

    function handler() {
        $( 'span', box ).appendTo( test );

        var maxWidth = $( test ).width();
        var width = 0;

        $( 'span', test ).each( function( index, elem ) {
            width += $( elem ).width();

            if ( maxWidth < width ) {
                $( box ).append( elem );
            }
        });
    }

});

Edited August 15, 2012 by nerv

Sign In

Не получается сделать меню

Question

chiffenok

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

nerv

Link to comment

Share on other sites

chiffenok

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

chiffenok

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

chiffenok

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

chiffenok

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information