水平ナビゲーションでアクティブなメニューを中央に配置する方法

Question

私の計画は、単一のページのWebサイトにループの水平メニューを作成することですが、それを行うことはできません。水平ナビゲーションにアクティブメニューを集中させる方法はありますか？説明は添付の画像を参考にしてください。

ピック1は、ナビゲーションの外観となり、ユーザーは番号2をクリックすると、数2がアクティブになり、場所がメニューの中心になります。

お知らせください。あなたがアドバイスをしたくない

Answer 1

HTML

<ul> 
     <li>menu 01</li> 
     <li>menu 02</li> 
     <li class="active">menu 03</li> 
     <li>menu 04</li> 
     <li>menu 05</li> 
    </ul> 

CSS

body{ 
    text-align: center; 
}*{ 
    margin: 0; 
    padding: 0; 
} 
ul{ 
    margin-top: 50px; 
} 
li{ 
    display: inline-block; 
    width: 120px; 
    list-style: none; 
} 
li.active{ 
    color: red; 
} 

jQueryの

$(document).ready(function() { 
    var nextActiveElement; 
    var currentActiveElement = $("li.active").text(); 
    $("li").click(function(){ 
     nextActiveElement = $(this).text(); 
     $(this).text(currentActiveElement); 
     currentActiveElement = nextActiveElement; 
     $("li.active").text(nextActiveElement); 
    }); 
});