0

Всем привет:)

Проблемная часть кода:

 var posChange = function() {
         if ($(document).width() <= '340') {
             $('nav>ul>li>ul').css('position', 'inherit');
            $('nav').css('width','auto');
         } else {
             $('nav>ul>li>ul').css('position', 'absolute');
            $('nav').css('width','806px');


         }
     };
     $(window).on('load resize', posChange);

В чем проблема:

При установке этой функцией значения width в 806px ,размер перестает изменяться обратно при размере окна браузера в 304 px. Собстно,даже если убрать часть функции,устанавливающую значение и прописать значение в css -> это все дело тоже не работает как надо.

Задача и чего я всем этим хочу добиться:

Есть менюшка. Менюшка должна терять абсолютное позиционирование(точнее подсписок nav>ul>li>ul должен) при размере окна браузера ниже 340 (в будущем из переменной,но сейчас значения оно не имеет) и...так же должна терять любое настроенное значение поля width...(элемент nav должен) Ну,а по возвращению в >340px под-список (nav>ul>li>ul) должен получить обратно абсолютное позиционирование ,а nav должен вернуть свою ширину...

Позиционирование меняет свойства как положено,проблема только с шириной.

Если есть какие то еще способы сделать тоже самое,буду рад о них услышать,в JQ пару дней...эксперементируем)


Весь Html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="nav.css">
    <script src="nav.js"></script>
    <title>Document</title>
</head>

<body>
    <nav>
        <ul>
            <li><a href="javascript:void(0)">Выпадающее меню1</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню2</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню3</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню4</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню5</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

Весь css:

a {
    text-align: center;
    border-radius: 100px 100px;
}

nav {
    margin: auto;
}

nav ul {
    margin: auto;
    padding: 0;
    list-style-type: none;
}

nav>ul>li {
    display: inline-block;
}

nav>ul>li>ul {
    display: none;
    position: absolute;
}

nav ul li a {
    display: block;
    margin: 2px;
    padding: 2px;
    text-decoration: none;
    Color: #39b1a3;
    background: #303030;
    box-shadow: 1px 1px 0.05px #153c38;
    height: 25px;
    width: 150px;
    opacity: 1;
}

nav ul li a:hover {
    box-shadow: inset 2px 2px 10px 25px #d1f1e1;
    Color: #256e68;
}

nav>ul>li>ul>li>a {
    background: #3b3b3b;
    box-shadow: 1px 1px 0.05px #153c38;
}

Весь JS:

 $(function() {
     var opac = $("nav>ul>li>a").css("opacity");

     //При наведении на любой из элементов меню\подменю все остальные not(this) становятся прозрачнее.
     $("nav>ul li a").hover(
         function() {
             $("nav>ul li a").not(this).stop().animate({
                 opacity: "0.85"
             }, 300);
         },

         function() {
             $("nav>ul li a").not(this).stop().animate({
                 opacity: opac
             }, 300);

         });

     //Все внутренние подсписки останавливают свою анимацию,пояляются\изчезают при наведении/
     $("nav>ul>li").hover(
         function() {
             $(this).children("ul").stop(false, true).fadeIn(200);
         },

         function() {
             $(this).children("ul").stop(false, true).fadeOut(1);

         });
     //Вычисляем размер окна браузера.
     //Если оно ниже нужного - убираем абсолютное позиционирование,убираем статический размер блоку nav.Под нужным на данный момент 340px.
     var posChange = function() {
         if ($(document).width() <= '340') {
             $('nav>ul>li>ul').css('position', 'inherit');
             $('nav').css('width', 'auto');
         } else {
             $('nav>ul>li>ul').css('position', 'absolute');
             $('nav').css('width', '806px');
         }
     };

     $(window).on('load resize', posChange);
 });
8
  • добавьте css и html код
    – kizoso
    3 апр 2017 в 16:56
  • Добавлено в конец поста :)
    – RoseCrime
    3 апр 2017 в 17:47
  • не очень понимаю, с чем связано использование js, а не media-query? 3 апр 2017 в 17:53
  • С полным не знанием midia-query, полагаю :) Использую то,что известно или изучается в данный момент.
    – RoseCrime
    3 апр 2017 в 17:59
  • 1
    Не очень понимаю, как может быть то что описано в задаче (одно в условии выполняется, а другое нет), но могу предположить, что замена $(document).width() <= '340' на $(window).width() <= 340 поможет 3 апр 2017 в 18:27

2 ответа 2

1

обычно задаю еще и else if + ресайз $(window).width():

$(function() {
     var opac = $("nav>ul>li>a").css("opacity");

     //При наведении на любой из элементов меню\подменю все остальные not(this) становятся прозрачнее.
     $("nav>ul li a").hover(
         function() {
             $("nav>ul li a").not(this).stop().animate({
                 opacity: "0.85"
             }, 300);
         },

         function() {
             $("nav>ul li a").not(this).stop().animate({
                 opacity: opac
             }, 300);

         });

     //Все внутренние подсписки останавливают свою анимацию,пояляются\изчезают при наведении/
     $("nav>ul>li").hover(
         function() {
             $(this).children("ul").stop(false, true).fadeIn(200);
         },

         function() {
             $(this).children("ul").stop(false, true).fadeOut(1);

         });
     //Вычисляем размер окна браузера.
     //Если оно ниже нужного - убираем абсолютное позиционирование,убираем статический размер блоку nav.Под нужным на данный момент 340px.
     function posChange() {
         if ($(window).width() <= 340) {
             $('nav>ul>li>ul').css('position', 'inherit');
             $('nav').css('width', 'auto');
         } else if($(window).width() > 340){
             $('nav>ul>li>ul').css('position', 'absolute');
             $('nav').css('width', '806px');
         }
     };

    $(window).on('load resize', posChange);
 });
a {
    text-align: center;
    border-radius: 100px 100px;
}

nav {
    margin: auto;
}

nav ul {
    margin: auto;
    padding: 0;
    list-style-type: none;
}

nav>ul>li {
    display: inline-block;
}

nav>ul>li>ul {
    display: none;
    position: absolute;
}

nav ul li a {
    display: block;
    margin: 2px;
    padding: 2px;
    text-decoration: none;
    Color: #39b1a3;
    background: #303030;
    box-shadow: 1px 1px 0.05px #153c38;
    height: 25px;
    width: 150px;
    opacity: 1;
}

nav ul li a:hover {
    box-shadow: inset 2px 2px 10px 25px #d1f1e1;
    Color: #256e68;
}

nav>ul>li>ul>li>a {
    background: #3b3b3b;
    box-shadow: 1px 1px 0.05px #153c38;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

  
<nav>
        <ul>
            <li><a href="javascript:void(0)">Выпадающее меню1</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню2</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню3</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню4</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0)">Выпадающее меню5</a>
                <ul>
                    <li><a href="javascript:void(0)">Вложенность1</a></li>
                    <li><a href="javascript:void(0)">Вложенность2</a></li>
                    <li><a href="javascript:void(0)">Вложенность3</a></li>
                </ul>
            </li>
        </ul>
    </nav>

хотя данный пример будет работать и без else if , просто с else

4
  • это же глупо ... if(width <= 340) else {} и if(width <= 340) else if(width > 340) {} - абсолютно одно и то же 3 апр 2017 в 18:58
  • Угу,в точности так сейчас код и выглядит(Если ничего кроме JQ не менялось),разве что с else,но в браузерах Gchrome и FF(обычном и Dev Edition,если это имеет значение) - функция применяется только в случае изменения размера окна браузера,но не при загрузке. Нооо...здесь код работает как надо...странности... Edit:психанул,копирнул все ради эксперимента,однако,при загрузке функция не срабатывает.
    – RoseCrime
    3 апр 2017 в 20:29
  • @RoseSevenyears, у меня все отлично и при загрузке работает
    – SVE
    4 апр 2017 в 4:48
  • 1
    Как оказалось разница в работе разных версий библиотек. в 2x - работает при загрузке, в 3х - нет. Однако,на данный момент проблему можно считать решенной и,стало быть,этот ответ верным.
    – RoseCrime
    4 апр 2017 в 11:30
1

Исходя из задачи логичнее использовать медиа квери, почему решили использовать js не знаю, может были на это причины, но на всякий случай напишу:

CSS

nav > ul > li > ul { position: absolute; }
nav { width: 806px; }

@media only screen and (max-width: 340px){
  nav > ul > li > ul { position: inherit; }
  nav { position: auto; }
}
4
  • Благодарю за ответ,но,хотелось бы на данном этапе ограничиться html,css,js+JQ :) Использовать что-то,чего не знаю (хоть и интуитивно понятное) не хотелось бы :)
    – RoseCrime
    3 апр 2017 в 18:10
  • Ну вообще, это css (азы адаптивной верстки), но я понял к чему ты клонишь )) 3 апр 2017 в 18:15
  • прошу прощения,действительно, css(Видать,пора мне его подтянуть).... Однако,в таком случае появляется еще одна деталь,я планирую использовать переменную вместо значений 340px и 806px в будущем,чего мне чистый css никак не простит,насколько мне,опять таки известно :)
    – RoseCrime
    3 апр 2017 в 18:22
  • Ну, тут да, зависит от задачи, если ты знаешь заранее "точки перелома" то лучше медиа квери, если эти точки должен просчитывать js, то я там под твоим постом откомментил свое предположение, попробуй, будем посмотреть) 3 апр 2017 в 18:30

Ваш ответ

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

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