Верстка меню по дуге

#html #css #вёрстка #menu

Каким образом можно сверстать меню такого типа? Нужно расположить элементы меню по дуге.


    

Ответы

Ответ 1

Вариант на jquery. Впрочем, значения отступов можно один раз посчитать и прописать
для каждого пункта меню отдельно в css.



function curvemenu(selector, radius, step) {
  var lis = $(selector),
    mid = lis.length / 2 - 0.5,
    ymid = step * mid,
    radius2 = radius * radius,
    offset = Math.sqrt(radius2 - ymid * ymid);
  lis.each(function(idx, el) {
    var y = step * (idx - mid);
    var x = Math.sqrt(radius2 - y * y);
    $(el).css("margin-left", (x - offset) + "px");
  });
}

curvemenu("li", 120, 20);
li {
  line-height: 20px;
  list-style: none
}


  
меню 1
  
меню 2
  
меню 3
  
меню 4
  
меню 5
  
меню 6
  
меню 7
  
меню 8
  
меню 9
  





radius - радиус окружности, по дуге которой будут располагаться элементы меню. step
- высота пункта меню.


Ответ 2

Использование usemap

Пример 1: 

http://jsfiddle.net/2o57tvpg/




 





Пример 2: - позиционирование

http://jsfiddle.net/0braeda5/



*{
    padding: 0;
    margin: 0;
}

nav{
    font-family: 'segoe ui', sans-serif;
    font-size: 16px;
    position: relative;
}
nav .arc,
nav ul{
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
.arc{    
    width: 300px;
    height: 300px;
    background: #f00;
    text-align: center;
    line-height: 300px;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
}

nav > ul{
    list-style: none;
}
nav > ul > li{
    margin: 15px 0;     
}
nav > ul > li.menu-item-1{position: relative; left: -35px;}
nav > ul > li.menu-item-2{position: relative; left: -10px;}
nav > ul > li.menu-item-4{position: relative; left: -20px;}
nav > ul > li.menu-item-5{position: relative; left: -40px;}

nav > ul > li a{
    display: inline-block;
    *display: inline;
    zoom: 1;
    padding: 5px 15px;
    background: #ccc;
    color: #000;
    text-decoration: none;
}
nav > ul > li a:hover{
    color: #fff;
    background: #555;
}
nav > ul > li a:active{
    color: #fff;
    background: #000;
}
       
    
Изображение дуги
    

        
Пункт 1
        
Пункт 2 
        
Пункт 3 
        
Пункт 4 
        
Пункт 5