2

リスト内のリンクの1つにカーソルを合わせると、ページ外からアニメーション化する2つのリンクを取得し、他のリンクの隣で終了するナビゲーションバーがあります。

現在のナビゲーション リンク:

<div class="links">
  <ul>
     <li>
         <a href="#">link 1</a>
     </li>
     <li>
         <a href="#">link 2</a>
     </li>
     <li>
         <a href="#">link 3</a>
     </li>
  </ul>
</div>

および .links の css:

.links ul {
    white-space: nowrap;
    list-style-type: none;
    position: fixed;
    top: 8px;
    left: 60%;
    z-index: 4; 
    width: auto;
    height: 67px;
}

.links li  {
    white-space: nowrap;
    display: inline-block;
    margin-right: 30px;
    z-index: 4;
    height: 40px;
}

そして、ここに関連するcssと、現在適切に機能するアニメーションがあります。

.extralinks {
    position: fixed;
    top: 8px;
    left: 90%;
    animation-name: slidey;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
/* Safari and Chrome */
    -webkit-animation-name: slidey;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
    z-index: 4;
}

@keyframes slidey {
    0% {left: 90%; top: 8px;}
    100% {left: 40%; top: 8px;}
}

@-webkit-keyframes slidey /* Safari and Chrome */ {
    0% {left: 90%; top: 8px;}
    100% {left: 40%; top: 8px;}
}

.links li:nth-child(3) {
    background-color: Red;
}

.extralinks のマークアップ

<div class="extralinks">
<ul>
    <li>
       <a href="#">link 4</a>
    </li>
    <li>
       <a href="#">link 5</a>
    </li>
</ul>
</div>

誰かが「リンク 3」にカーソルを合わせると、アニメーション リンクが右からスライドしてリンクの隣で終わるようにする必要があります。アニメーションをリストの「リンク 3」に正確にリンクする方法がよくわかりません。何か助けはありますか？私は javascript/jquery の使用に反対するつもりはありません。どちらにも精通していません。

ありがとうございました！

4

1 に答える 1

0

私はあなたの目標を正確に理解していませんが、いくつかの仮定を立てて、jsFiddleをまとめました。:hover アニメーションであると想定したため、代わりに css 遷移を使用しました。これにより、サブメニューを元の位置に戻すことができました。

* {
    padding:0;
    margin:0;
}
.links {
    width:100%;
}
.links > menu {
    width:100%;
    text-align:center;
}

.links menu li  {
    display: inline-block;
    position:relative;
    padding:0.75em 1em;
}
.l3 .extralinks {
    position:absolute;
    top:2em;
    left:100%;
    z-index: 4;

    -webkit-transition:all 1s ease-in-out 0s;
    -moz-transition:all 1s ease-in-out 0s;
    -o-transition:all 1s ease-in-out 0s;
    -ms-transition:all 1s ease-in-out 0s;
    transition:all 1s ease-in-out 0s;
}
.l3:hover .extralinks {
    left:0;    
}
.l3:hover .extralinks li {
    display:block;
}
.links li:nth-child(3) {
    background-color: Red;
}

    <div class="links">
      <menu>
         <li>
             <a href="#">link 1</a>
         </li>
         <li>
             <a href="#">link 2</a>
         </li>
         <li class="l3">
             <a href="#">link 3</a>
             <menu class="extralinks">
                 <li>
                     <a href="#">link 4</a>
                 </li>
                 <li>
                     <a href="#">link 5</a>
                 </li>
             </menu>
         </li>
      </menu>
    </div>
于 2013-04-18T02:26:55.830 に答える