超出範圍的菜單

我在網站中間有一個居中的菜單，並且以這樣的方式應用轉換：如果單擊其中一個元素，則整個菜單移動到屏幕的最終左側以這種形式/。但問題在於，菜單中的部分單詞在到達左端時正在消失。請幫忙嗎？超出範圍的菜單

的jsfiddle：https://jsfiddle.net/yejcbz7p/

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); 
});

來源

2015-06-23 mikeb

更改您點擊功能，這一點：

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，這將根據列表中的內容滾動。

來源

2015-06-23 17:13:07

謝謝您的支持 – mikeb

歡迎您:) –

在.permahover li中更改left的百分比。例如，40%。看看這裏：https://jsfiddle.net/yejcbz7p/1/

來源

2015-06-23 16:50:40 TheOnlyError

嘿人，它的蘭迪他們阻止我的帳戶刪除幾個問題。感謝它的工作 – mikeb

沒有問題，我的榮幸:) – TheOnlyError

**但問題是，菜單中的部分單詞在到達左端時消失**，用您的方法，問題仍然存在，請檢查「 Eeeeeeee Eee.' –

而不是使用left: -46%;你應該只使用text-align: left。

列表項寬度爲其父項的100％。如果設置了left: -46%，則只能更改元素的最左側位置（寬度不會更改）。文本將仍然居中（基於你的CSS），所以文本的位置取決於你在那裏得到了多少文本。

來源

2015-06-23 16:53:55 Dekel

超出範圍的菜單

回答

相關問題