Выпадающее меню меняет направление открытия справа налево динамически зависит от ширины браузера - PullRequest
Новая
       4

Выпадающее меню меняет направление открытия справа налево динамически зависит от ширины браузера

2 голосов
/ 25 апреля 2019

Я строю рекурсивную строку меню. Он имеет несколько ul li ul li ul li. Позиция открытия элементов меню слева направо.

Но если ширина браузера мала, то мои открытые пункты меню; затем пункты меню переходят в правый экран.

Я хочу, чтобы если ширина браузера была меньше, чем у моих открытых пунктов меню, то направление открытия пунктов меню менялось справа налево.

Я пытаюсь создать этот код jQuery, но он не работает должным образом.

Мои проблемы:

  • Если ширина браузера меньше, чем в меню, меню изменилось, но есть ошибки,

  • Если размер браузера превышает размер меню, ширина меню не будет равна 100%, необходимо обновить браузер!

    $ (документ) .ready (function () {

    $(".anamenu li").on('mouseenter mouseleave', function(e) {
    e.preventDefault;
    if ($('ul', this).length) {
        var elm = $('ul:last', this);
        var off = elm.offset();
        var l = off.left;
        var w = elm.width();
        var docH = $(".disgovde").height();
        var docW = $(".disgovde").width();

        var isEntirelyVisible = (l + w <= docW);

        if (!isEntirelyVisible) {

            $("ul.anamenu li ul ul > li ul").css({
                "left": "auto",
                "right": "100%",
            });

            $("ul.anamenu li ul").css({
                "left": "auto",
                "right": "0",
            });
            $("ul.anamenu li > ul ul").css({
                "left": "200px",
                "right": "0",
            });
            $("ul.anamenu > li ul ul").css({
                "left": "auto",
                "right": "100%",
            });

        } else {
            $("ul.anamenu  li ul ul > li ul").css({
                "left": "200px",
                "right": "0",
            });


        }
    }
});

    }); 

$(document).ready(function() {
        $(".anamenu li").on('mouseenter mouseleave', function(e) {
            e.preventDefault;
            if ($('ul', this).length) {
                var elm = $('ul:last', this);
                var off = elm.offset();
                var l = off.left;
                var w = elm.width();
                var docH = $(".disgovde").height();
                var docW = $(".disgovde").width();

                var isEntirelyVisible = (l + w <= docW);
                if (!isEntirelyVisible) {
                    $("ul.anamenu li ul ul> li ul").css({
                        "left": "auto",
                        "right": "100%",
                    });

                    $("ul.anamenu li ul").css({
                        "left": "auto",
                        "right": "0",
                    });
                    $("ul.anamenu li > ul ul").css({
                        "left": "200px",
                        "right": "0",
                    });
                    $("ul.anamenu > li ul ul").css({
                        "left": "auto",
                        "right": "100%",
                    });

                } else {
                    $("ul.anamenu li ul ul > li ul").css({
                        "left": "200px",
                        "right": "0",
                    });

                }
            }
        });
    });




<!-- begin snippet: js hide: false console: true babel: false -->
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


a:hover {
    text-decoration: none;
}
body {
    height: 100vh;
    /*
    display: flex;

    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    */
}
.disgovde {
        width: 100%;
    }

    .icgovde {
        max-width: 1110px;
        width: 100%;
        margin: 0 auto;
        padding-left: 5px;
        padding-right: 5px;
    }

    .ustmenu {
        height: 155px;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        -webkit-flex-direction: row;
    }
    .ustmenu ol, .ustmenu ul {
        list-style: none;
    }

    .ustlogo img {
        /*width: 100%;*/
        /*margin-top: 50px;*/
        opacity: 1;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

    .ustlogo img:hover {
        /*width: 100%;*/
        /*margin-top: 50px;*/
        opacity: .5;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

    .ustsag {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    .menu {
        /*height: 45px;*/
        display: flex;
        display: -webkit-flex;
        align-items: center;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: flex-end;
        margin-top: 15px;
        background: #fff;
    }

    ul.anamenu {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        height: 35px;
    }

    ul.anamenu > li {
        /*padding: 10px;*/
        float: left;
        height: 45px;
        position: relative;
        z-index: 2;
        width: max-content;
    }

    ul.anamenu > li > a {
        display: block;
        font-family: manualeregular;
        font-size: 15px;
        color: #0099cc;
        padding: 0 15px;
        line-height: 35px;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3D(0, 0, 0);
        -moz-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
        -o-transform: translate3D(0, 0, 0);
        transform: translate3D(0, 0, 0);

    }

    ul.anamenu > li:hover > a {
        background-color: #0099cc;
        color: #fff;
        border-radius: 6px 6px 0 0;

    }

    ul.anamenu ul {
        background: #0099cc;
        width: 200px;
        position: absolute;
        top: 35px;
        left: 0;
        right: 100%;
        opacity: 0;
        transition: 250ms all;
        -webkit-transition: 250ms all;
        -moz-transition: 250ms all;
        -ms-transition: 250ms all;
        -o-transition: 250ms all;
        visibility: hidden;

    }


    ul.anamenu ul li {
        position: relative;
        border-bottom: 1px solid #ededed40;

    }

    ul.anamenu ul li:last-child {
        border-bottom: none;

    }


    ul.anamenu ul li a {
        display: block;
        padding: 12px 12px;
        font-size: 15px;
        color: #fff;
        font-family: manualeregular;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3D(0, 0, 0);
        -moz-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
        -o-transform: translate3D(0, 0, 0);
        transform: translate3D(0, 0, 0);


    }

    ul.anamenu > li ul ul {
        top: 0;
        left: 180px;
        background: #0099cc;

    }

    /*


    ul.anamenu > li ul:last-child ul ul {
        left: auto;
        right: 100%;
    }
*/
    ul.anamenu > li:hover > ul {
        opacity: 1;
        visibility: visible;
        top: 35px;

    }

    ul.anamenu ul li:hover > ul {
        visibility: visible;
        opacity: 1;
        left: 200px;
        z-index: 1;

    }

    ul.anamenu ul li ul li:hover {
        background-color: #ededed;

    }

    ul.anamenu ul li:hover {
        background-color: #ededed;

    }

    ul.anamenu ul li > ul li:hover > a {
        color: #0099cc;

    }

    ul.anamenu ul li:hover > a {
        color: #0099cc;

    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disgovde">

    <div class="icgovde">
        <div class="ustmenu">
         <div class="ustsag">
                <div class="menu" style="display: flex;">
                    <ul class="anamenu">
                        <li><a href="index.php">ANASAYFA</a></li>
                        <li><a href="hakkimizda/hakkimizda-1">HAKKIMIZDA</a></li>
                        <li><a href="kategori/urunlerimiz"><span class="asagiok"></span>ÜRÜNLERİMİZ</a>
                            <ul class="altmenu">
                                <li><a href="kategori/genel-celik"><span class="sagok"></span>Genel Çelik</a>
                                    <ul class="altmenu">
                                        <li><a href="kategori/imalat-celigi"><span class="sagok"></span>İmalat Çeliği</a>
                                            <ul class="altmenu" style="left: 200px; right: 0px;">
                                                <li><a href="detay/1040">1040</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="hizmetler/hizmetler">HİZMETLER</a></li>
                        <li><a href="referanslar/bayilikler">BAYİLİKLER</a></li>
                        <li><a href="galeri/galeri">GALERİ</a></li>
                        <li><a href="iletisim/iletisim">İLETİŞİM</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <div class="cizgi"></div>
</div>

1 Ответ

0 голосов
/ 25 апреля 2019

Вы должны использовать медиазапрос для стилизации по-разному в зависимости от ширины экрана.

Следуя первым принципам для мобильных устройств, отформатируйте раскрывающийся список, чтобы он открывался по вертикали, а затем в настройках CSS, например, такой запрос. 

@media screen and (min-width: 768px) {
  .anamenu ul {
    // Modify dropdown styling to open horizontally.
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...