정렬되지 않은 목록을 원으로 배치하는 방법은 무엇입니까?

Question

나는 this과 같은 페이지를 만들고 싶습니다만, 저는 단지 javascript/jquery를 배우고 있습니다. 나는 메뉴를 정말 좋아하지만, 정렬되지 않은 메뉴 목록을 서클에 배치하는 방법과 호버 효과를 만드는 방법을 모릅니다.

 <nav> 
      <ul> 
       <li><a href="#">Menu1</a></li> 
       <li><a href="#">Menu2</a></li> 
       <li><a href="#">Menu3</a></li> 
       <li><a href="#">Menu4</a></li> 
       <li><a href="#">Menu5</a></li> 
       <li><a href="#">Menu6</a></li> 
      </ul> 
     </nav> 

Answer 1

난 당신이 jsFiddle page에 무엇을 찾고 다시 시도 :

다음은 HTML 메뉴입니다. 버그가없는 것은 아닙니다만 원판 목록 작성에 필요한 jQuery와 CSS를 이해하는 데 도움이되기를 바랍니다.

CSS : 우리는 그들의 좌/상단 위치를 조작 할 수 있도록 내가 절대 방식으로 링크를 배치 한

a { 
position: absolute; 
text-decoration: none; 
border: 1px solid black; 
width:98px; 
height:98px; 
border-radius:50px; 
line-height:100px; 
text-align:center; 

}

. 폭과 높이는 테두리 반경의 약 절반이며 각 링크에 원형 모양을 부여합니다. CSS의 나머지 부분은 텍스트의 위치를 ​​지정하는 것입니다. 시작 jQuery 코드의

는 :

$(function() { 
circle_radius = 100; 
$links = $('nav ul li a'); 
total_links = $links.size(); 

제 1 가변 circle_radius는 원형 메뉴 자체 (아닌 개별 링크)의 반경이다.

$links은 nav 태그의 전체 링크 목록을 가져오고 total_links은 해당 nav에있는 링크의 수를 저장합니다. 이것은 각 링크의 위치를 ​​결정할 때 중요합니다.

더 jQuery 코드 : 우리가 할

$links.each(function(index) { 
    $(this).attr('data-index',index); 
    animateCircle($(this), 1); 
}); 

첫 번째 일이 $links에서 개별 링크의 각을 반복하고 여기에 인덱스 값을 추가하고 animateCircle(...)를 호출합니다. 링크 요소 자체와 다른 값을 전달합니다 (이 값은 마우스 오버 효과에 사용됩니다). 원에서

위치는 :

function animateCircle($link, expansion_scale) { 
    index = $link.attr('data-index'); 
    radians = 2*Math.PI*(index/total_links); 
    x = -(Math.sin(radians)*circle_radius*expansion_scale); 
    y = -(Math.cos(radians)*circle_radius*expansion_scale); 
    $link.animate({ 
     top: x+'px', 
     left: y+'px' 
    }, 200); 
} 

animateCircle(...)에서, 우리는 먼저 $link의 인덱스를 얻을 수 있습니다. 그런 다음 색인과 총 링크 수를 사용하여 $link의 위치의 각도 (라디안)를 계산하기 위해 좋은 오래된 trig를 사용합니다. 다음으로 을 사용하여 $link의 x 및 y 위치를 계산합니다. 참고, 여기에 expansion_scale이라는 항목이 있습니다.이 함수가이 함수에 전달되었습니다. 지금은 1에 불과하므로 x 및 y 값에는 영향을주지 않습니다. 마지막으로 x와 y 값을 얻으면 $link의 위쪽 및 왼쪽 속성에 새 값을 적용하여 애니메이션을 만듭니다. 마우스 오버에 원 애니메이션

:

$('li a').hover(function() { 
    animateCircle($(this), 1.5) 
}, function() { 
    animateCircle($(this), 1) 
}); 

이 효과는 animateCircle(...)와 지금 달성하기 쉽습니다. 이것은 expansion_scale가 마침내 출현하는 곳입니다.링크 위로 마우스를 가져 가면 expansion_scale이 1.535 인 animateCircle(...)으로 전화가 걸리므로 특정 링크가 다른 링크보다 1.5 배 더 멀리 나오게되어 깔끔한 효과를냅니다. 마지막으로 마우스 아웃하면 링크가 원래 위치로 돌아갑니다.

Answer 2

이 메뉴가 너무 멋지다 : https://github.com/liri/moonMenuJS

그것을 밖으로 시도, 당신은 그것을 적용하는 멋진 스타일을 만들 수 있습니다.