0

Доброго времени суток, форумчане. Писал простейшее меню на 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>

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

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

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

3
  • #links li - position: relative; .submenu - position: absolute; top: 100%; left: 0;
    – soledar10
    11 фев 2017 в 14:16
  • 1
    Мы не форумчане :) SO - это не форум
    – Yuri
    11 фев 2017 в 14:20
  • offtop @Yuri, окей, будете стакчанинами. стакчанин. по моему отлично звучит.
    – Blc_Dragon
    11 фев 2017 в 15:26

2 ответа 2

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>

0

Добавьте к #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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.