3

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

введите сюда описание изображения

4
  • Количество пунктов меню строго ограничено?
    – Airat
    10 мая 2015 в 17:22
  • как вариант использовать карту-изображений htmlbook.ru/html/img/usemap
    – soledar10
    10 мая 2015 в 17:27
  • Определенное количество пунктов меню 10 мая 2015 в 18:11
  • Насчет usermap.. Надо сделать пункты меню просто текстом, а не изображением. 10 мая 2015 в 18:16

2 ответа 2

4

Вариант на 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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>меню 1</li>
  <li>меню 2</li>
  <li>меню 3</li>
  <li>меню 4</li>
  <li>меню 5</li>
  <li>меню 6</li>
  <li>меню 7</li>
  <li>меню 8</li>
  <li>меню 9</li>
  <!--<li>меню 10</li>-->
</ul>

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

3

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

Пример 1:

http://jsfiddle.net/2o57tvpg/

<img src="https://i.stack.imgur.com/otGeK.png" width="307" height="382" alt="Навигация по сайту"  usemap="#navigation">
 <p><map name="navigation">
     <area shape="poly" coords="92,58,91,42,180,44,186,43,186,56,184,60" href="#" alt="Пункт 1" title="Пункт 1" />
  <area shape="poly" coords="119,128,117,115,169,112,219,117,226,118,226,127,224,128,224,131" href="#" alt="Пункт 2" title="Пункт 2" />
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="#" alt="Пункт 3" title="Пункт 3" />
     <area shape="poly" coords="126,188,129,173,172,174,231,181,232,190,215,191" href="#" alt="Пункт 3" title="Пункт 3" />
  <area shape="poly" coords="120,257,124,247,149,248,181,256,204,260,225,257,227,266,218,269,196,270" href="#" alt="Пункт 4" title="Пункт 4" />
  <area shape="poly" coords="88,338,93,324,130,323,154,329,161,340,180,337,202,332,226,332,237,330,238,339,176,343" href="#" alt="Пункт 5" title="Пункт 5" /> 
  </map></p>

Пример 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;
}
<nav>       
    <div class="arc">Изображение дуги</div>
    <ul>
        <li class="menu-item-1"><a href="#">Пункт 1</a>
        <li class="menu-item-2"><a href="#">Пункт 2</a> 
        <li class="menu-item-3"><a href="#">Пункт 3</a> 
        <li class="menu-item-4"><a href="#">Пункт 4</a> 
        <li class="menu-item-5"><a href="#">Пункт 5</a>    
    </ul>
</nav>

1
  • любопытно, через новомодный shapes подобное можно сделать? Пример
    – romeo
    10 мая 2015 в 18:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.