Ширина элемента увеличивается

314
13 февраля 2017, 13:53

Доброго времени суток, форумчане. Писал простейшее меню на jQuery.

Вот кусок кода: 

jQuery('document').ready(function() { 
  jQuery('li').hover( 
    function() { 
      var width = $(this).width; 
      $(this).maxWidth = width; 
      $(this).find('.submenu').stop().slideDown(); 
 
    }, function() { 
      $(this).find('.submenu').stop().slideUp('fast'); 
      $(this).maxWidth = ""; 
    }); 
});
#nav-bg { 
  width: 100%; 
  background: none repeat scroll 0 0 #88B739; 
  height: 55px; 
  z-index: 15; 
} 
#nav-bg > #nav-content { 
  min-width: 855px; 
  max-width: 855px; 
  margin: auto; 
  z-index: 15; 
} 
#links li { 
  z-index: 15; 
  background: none repeat scroll 0 0 #88B739; 
  float: left; 
  display: block; 
  height: 55px; 
  line-height: 55px; 
  text-decoration: none; 
} 
#links li a { 
  z-index: 15; 
  color: #FFF; 
  display: block; 
  padding-right: 5px; 
  padding-left: 5px; 
  height: 55px; 
  line-height: 55px; 
  text-decoration: none; 
} 
#links li a:hover { 
  background-color: #516B23; 
} 
.submenu { 
  z-index: 15; 
  display: none; 
  top: 44px; 
  padding: 1px 0 0 0; 
  background: #ddd; 
} 
.submenu>li { 
  z-index: 15; 
  clear: left; 
  display: block; 
  text-align: left; 
  color: #000000; 
} 
.submenu>li>a { 
  z-index: 15; 
  white-space: pre-wrap; 
  background: #ddd; 
  font-size: 14px; 
  line-height: 22px; 
  display: inline-block; 
} 
#links { 
  width: 100%; 
  height: 55px; 
  margin-left: -25px; 
  margin-top: 0px; 
  list-style: none; 
  text-align: center; 
  font-size: 15px; 
} 
.imgtomain a { 
  background: url("../images/home.png") no-repeat scroll 0 0 transparent; 
  display: block; 
  font-size: 0; 
  height: 55px; 
  margin-left: -11px; 
  margin-right: 0px; 
  margin-top: -21px; 
  width: 60px; 
} 
.imgtomain a:hover { 
  background-color: #516B23; 
} 
.imgtomain { 
  float: left; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="nav-bg"> 
  <div id="nav-content"> 
    <div class="imgtomain"> 
      <h1><a href="/">Главная</a></h1> 
    </div> 
 
    <ul id="links"> 
      <li><a href="/">Menu 1</a> 
        <ul class="submenu" style="display:none;"> 
          <li><a href="/">submenu 1sadSsdsasd asdasdasda sdasd</a> 
          </li> 
          <li><a href="/">submenu 2</a> 
          </li> 
        </ul> 
      </li> 
      <li><a href="/">Menu 2</a> 
        <ul class="submenu" style="display:none;"> 
          <li>submenu 1</li> 
          <li>submenu 2</li> 
        </ul> 
      </li> 
      <li><a href="/contacts.html">Контакты</a> 
      </li> 
    </ul> 
  </div> 
</div>

В принципе как видно в примере, при наведении, ширина автоматически растет.

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

Заранее спасибо

Answer 1

Ваши ошибки:

  1. var width = $(this).width; Нет такой функции в JQuery. Что бы получить ширину, нужно добавить скобки в конце:
    var width = $(this).width();
  2. $(this).maxWidth = width; Такой функции и назначения не существует! Что бы присвоить стиль, нужно писать его в css. И при том, все стандартные функции изменения чего либо прописываются в скобках:
    $(this).css('max-width', width);

$('document').ready(function() { 
  $('li').hover( 
    function() { 
      $(this).css('max-width', $(this).width()); 
      $(this).find('.submenu').stop().slideDown(); 
 
    }, function() { 
      $(this).find('.submenu').stop().slideUp('fast'); 
      $(this).maxWidth = ""; 
    }); 
});
#nav-bg { 
  width: 100%; 
  background: none repeat scroll 0 0 #88B739; 
  height: 55px; 
  z-index: 15; 
} 
#nav-bg > #nav-content { 
  min-width: 855px; 
  max-width: 855px; 
  margin: auto; 
  z-index: 15; 
} 
#links li { 
  z-index: 15; 
  background: none repeat scroll 0 0 #88B739; 
  float: left; 
  display: block; 
  height: 55px; 
  line-height: 55px; 
  text-decoration: none; 
} 
#links li a { 
  z-index: 15; 
  color: #FFF; 
  display: block; 
  padding-right: 5px; 
  padding-left: 5px; 
  height: 55px; 
  line-height: 55px; 
  text-decoration: none; 
} 
#links li a:hover { 
  background-color: #516B23; 
} 
.submenu { 
  z-index: 15; 
  display: none; 
  top: 44px; 
  padding: 1px 0 0 0; 
  background: #ddd; 
} 
.submenu>li { 
  z-index: 15; 
  clear: left; 
  display: block; 
  text-align: left; 
  color: #000000; 
} 
.submenu>li>a { 
  z-index: 15; 
  white-space: pre-wrap; 
  background: #ddd; 
  font-size: 14px; 
  line-height: 22px; 
  display: inline-block; 
} 
#links { 
  width: 100%; 
  height: 55px; 
  margin-left: -25px; 
  margin-top: 0px; 
  list-style: none; 
  text-align: center; 
  font-size: 15px; 
} 
.imgtomain a { 
  background: url("../images/home.png") no-repeat scroll 0 0 transparent; 
  display: block; 
  font-size: 0; 
  height: 55px; 
  margin-left: -11px; 
  margin-right: 0px; 
  margin-top: -21px; 
  width: 60px; 
} 
.imgtomain a:hover { 
  background-color: #516B23; 
} 
.imgtomain { 
  float: left; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="nav-bg"> 
  <div id="nav-content"> 
    <div class="imgtomain"> 
      <h1><a href="/">Главная</a></h1> 
    </div> 
 
    <ul id="links"> 
      <li><a href="/">Menu 1</a> 
        <ul class="submenu" style="display:none;"> 
          <li><a href="/">submenu 1sadSsdsasd asdasdasda sdasd</a> 
          </li> 
          <li><a href="/">submenu 2</a> 
          </li> 
        </ul> 
      </li> 
      <li><a href="/">Menu 2</a> 
        <ul class="submenu" style="display:none;"> 
          <li>submenu 1</li> 
          <li>submenu 2</li> 
        </ul> 
      </li> 
      <li><a href="/contacts.html">Контакты</a> 
      </li> 
    </ul> 
  </div> 
</div>

Answer 2

Добавьте к #links 

position: relative;

И к .submenu

position: absolute;
top: 100%;

В JS коде оставил только анимацию. Остальное не нужно

jQuery('document').ready(function() { 
  jQuery('li').hover( 
    function() { 
      $(this).find('.submenu').stop().slideDown(); 
 
    }, function() { 
      $(this).find('.submenu').stop().slideUp('fast'); 
    }); 
});
#nav-bg { 
  width: 100%; 
  background: none repeat scroll 0 0 #88B739; 
  height: 55px; 
  z-index: 15; 
} 
#nav-bg > #nav-content { 
  min-width: 855px; 
  max-width: 855px; 
  margin: auto; 
  z-index: 15; 
} 
#links li { 
  z-index: 15; 
  background: none repeat scroll 0 0 #88B739; 
  float: left; 
  display: block; 
  height: 55px; 
  line-height: 55px; 
  text-decoration: none; 
} 
#links li a { 
  z-index: 15; 
  color: #FFF; 
  display: block; 
  padding-right: 5px; 
  padding-left: 5px; 
  height: 55px; 
  line-height: 55px; 
  text-decoration: none; 
} 
#links li a:hover { 
  background-color: #516B23; 
} 
.submenu { 
  z-index: 15; 
  display: none; 
  top: 44px; 
  padding: 1px 0 0 0; 
  background: #ddd; 
  position: absolute; 
  top: 100%; 
} 
.submenu>li { 
  z-index: 15; 
  clear: left; 
  display: block; 
  text-align: left; 
  color: #000000; 
} 
.submenu>li>a { 
  z-index: 15; 
  white-space: pre-wrap; 
  background: #ddd; 
  font-size: 14px; 
  line-height: 22px; 
  display: inline-block; 
} 
#links { 
  width: 100%; 
  height: 55px; 
  margin-left: -25px; 
  margin-top: 0px; 
  list-style: none; 
  text-align: center; 
  font-size: 15px; 
  position: relative; 
} 
.imgtomain a { 
  background: url("../images/home.png") no-repeat scroll 0 0 transparent; 
  display: block; 
  font-size: 0; 
  height: 55px; 
  margin-left: -11px; 
  margin-right: 0px; 
  margin-top: -21px; 
  width: 60px; 
} 
.imgtomain a:hover { 
  background-color: #516B23; 
} 
.imgtomain { 
  float: left; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="nav-bg"> 
  <div id="nav-content"> 
    <div class="imgtomain"> 
      <h1><a href="/">Главная</a></h1> 
    </div> 
 
    <ul id="links"> 
      <li><a href="/">Menu 1</a> 
        <ul class="submenu" style="display:none;"> 
          <li><a href="/">submenu 1sadSsdsasd asdasdasda sdasd</a> 
          </li> 
          <li><a href="/">submenu 2</a> 
          </li> 
        </ul> 
      </li> 
      <li><a href="/">Menu 2</a> 
        <ul class="submenu" style="display:none;"> 
          <li>submenu 1</li> 
          <li>submenu 2</li> 
        </ul> 
      </li> 
      <li><a href="/contacts.html">Контакты</a> 
      </li> 
    </ul> 
  </div> 
</div>

Answer 3

Растёт потому, что класс submenu расширяет ваш блок. Добавьте:

#links li { 
    position: relative
    ...
}
.submenu { 
    position: absolute;
    top: 55px
    ...
}
READ ALSO
Как подправить мобильное меню(показ)?
HTML

Как подправить мобильное меню(показ)?

Привет всем

 305
Сетка Bootstrap-а DIV как ссылка (нюансы)
HTML

Сетка Bootstrap-а DIV как ссылка (нюансы)

Возникла проблема , а знаний пока не хватает и ответа найти не могуБлоки как ссылки , у ссылок есть title

 335
Мое первое изображение SVG
HTML

Мое первое изображение SVG

Я сделал свой первый опыт работы с <path> на SVG и было интересно, есть ли лучший способ сделать этоПример получился, как я хотел, только в этих...

 336
Phaser.js + Electron Framework. Почему не работает?
HTML

Phaser.js + Electron Framework. Почему не работает?

Пытаюсь подключить фреймворк phaserjs к electron, для создания desktop-игры на html5

 314