Question

我有一个位于网站中间的菜单，并且应用过渡，如果单击其中一个元素，整个菜单将以此形式移动到屏幕的最左侧。但问题是，当到达最后左侧时，菜单中的部分单词正在消失。有什么帮助吗？

HTML：

<div id="logo" class="logo">
    <img src="http://placehold.it/350x150" />
</div>
<p class="custom-class"><a href="">Go to the main website</a>

</p>
<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>Aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>Bbbbbbb</button>
        </li>
        <li id="item3">
            <button>Cccccccc </button>
        </li>
        <li id="item4">
            <button>Ddddddd </button>
        </li>
        <li id="item5">
            <button>Eeeeeeee Eee. </button>
        </li>
        <li id="item6">
            <button>Fffffffff </button>
        </li>
        <li id="item7">
            <button>Ggggggggg </button>
        </li>
    </ul>
</div>

CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

html {
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1.3em;
}

.custom-class {
    text-align: right;
    margin-top: -130px;
    margin-right: 20px;
}

a {
    color: #000000;
    text-decoration: none;
}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border-style: none;
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}

.logo {
    text-align: center;
    margin-top: 40px;
}

li {
    list-style-type: none;
    font-size: 1.5em;
    padding-top: 8px;
    text-align: center;
    border-style: none;
}

.menu li {
    position: relative;
    top: 90px;
    left: 0px;
}

#item7 {
    transition: opacity .8s, left .8s ease-out;
    -moz-transition: opacity .8s, left .8s ease-out;
    -webkit-transition: opacity .8s, left .8s ease-out;
    -o-transition: opacity .8s, left .8s ease-out;
}

#item6 {
    transition: opacity 1s, left 1s ease-out;
    -moz-transition: opacity 1s, left 1s ease-out;
    -webkit-transition: opacity 1s, left 1s ease-out;
    -o-transition: opacity 1s, left 1s ease-out;
}

#item5 {
    transition: opacity 1.2s, left 1.2s ease-out;
    -moz-transition: opacity 1.2s, left 1.2s ease-out;
    -webkit-transition: opacity 1.2s, left 1.2s ease-out;
    -o-transition: opacity 1.2s, left 1.2s ease-out;
}

#item4 {
    transition: opacity 1.4s, left 1.4s ease-out;
    -moz-transition: opacity 1.4s, left 1.4s ease-out;
    -webkit-transition: opacity 1.4s, left 1.4s ease-out;
    -o-transition: opacity 1.4s, left 1.4s ease-out;
}

#item3 {
    transition: opacity 1.6s, left 1.6s ease-out;
    -moz-transition: opacity 1.6s, left 1.6s ease-out;
    -webkit-transition: opacity 1.6s, left 1.6s ease-out;
    -o-transition: opacity 1.6s, left 1.6s ease-out;
}

#item2 {
    transition: opacity 1.8s, left 1.8s ease-out;
    -moz-transition: opacity 1.8s, left 1.8s ease-out;
    -webkit-transition: opacity 1.8s, left 1.8s ease-out;
    -o-transition: opacity 1.8s, left 1.8s ease-out;
    ;
}

#item1 {
    transition: opacity 2s, left 2s ease-out;
    -moz-transition: opacity 2s, left 2s ease-out;
    -webkit-transition: opacity 2s, left 2s ease-out;
    -o-transition: opacity 2s, left 2s ease-out;
}

#item1>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item2>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item3>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item4>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item5>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item6>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item7>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

.permahover li {
    opacity: 1;
    left: -46%;
}

.headlines li {
    font-size: 1.5em;
    color: #000000;
    transition: all 0.5s;
    cursor: pointer;
}

.headlines:hover li, .headlines.active li {
        /* PARENT HOVER */
    opacity: 0.4;
    cursor: pointer;
        /* Dim all */;
}

.headlines li:hover, .headlines li.active {
        /* SINGLE HOVER */
    opacity: 1;
        /* Max one */
    color: #000000;
    cursor: pointer;
}

@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }

    100% {
        -webkit-filter: grayscale(0%);
    };
}

@keyframes colorize {
    0% {
        filter: grayscale(100%);
    }

    100% {
        filter: grayscale(0%);
    };
}

JQUERY：

$(".menu").on("click", function() {
    $(".menu").addClass('permahover');
});


var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

Answer 1

在deparse中更改.permahover li的百分比。

例如，left。请在此处查看：https://jsfiddle.net/yejcbz7p/1/

Answer 2

您应该使用left: -46%;。

，而不是使用text-align: left

列表项宽度是其父级的100％。如果设置left: -46%，则只更改元素的最左侧位置（宽度不会改变）。文本仍将居中（基于您的CSS），因此文本的位置取决于您在那里获得了多少文本。

Answer 3

将您的点击功能更改为：

JS：

$(".menu").on("click", function () {
    //$(".menu").addClass('permahover');
    var v = 5000;   // just some big number
    $.each($(".menu li"),function(index,obj){
        //alert($(obj).offset().left)
        if(v > $(obj).find("button").offset().left){
            v = $(obj).find("button").offset().left;
        }
    });
    $(".menu li").animate({
        left : "-"+v.toString()
    },500);
});

选中此fiddle，这将根据列表中的内容滚动。

菜单超出范围

3 个答案: