Семантически правильная карта сайта в HTML - PullRequest
Новая
       13

Семантически правильная карта сайта в HTML

1 голос
/ 22 января 2010

Я пытаюсь разработать / оформить главное меню / карту сайта для нашего сайта.

Суть в том, что меню должно выглядеть как дерево каталогов, и каждый элемент меню должен либо расширяться, чтобы открывать больше пунктов меню, либо ссылаться на другую страницу на сайте.

Кроме того, каждый элемент должен иметь функциональные возможности, добавляемые в приложение «Избранное» сайтов, чтобы каждый пользователь мог быстрее находить элементы, которые скрыты глубоко в структуре меню.

Из-за моего безумного OCD, чтобы убедиться, что все сделано правильно и в соответствии с наилучшими возможными стандартами, у меня возникают проблемы с получением семантически правильной и доступной разметки.

Вот что у меня так далеко: 

<ul>
    <li>
        <ul>
            <li>
                <a href="example1.html">Collapse "Menu Item 1"</a>
            </li>
            <li>
                <a href="example2.html">Add "Menu Item 1" to Favourites</a>
            </li>
            <li>
                <a href="example1.html">Menu Item 1</a>
                <ul>
                    <li>
                        <ul>
                            <li>
                                <a href="example3.html">Open "Menu Item 1's
                                First Child"</a>
                            </li>
                            <li>
                                <a href="example4.html">Add "Menu Item 1's
                                First Child" to Favourites</a>
                            </li>
                            <li>
                                <a href="example3.html">Menu Item 1's First 
                                Child</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>
                                <a href="example5.html">Open "Menu Item 1's
                                Second Child"</a>
                            </li>
                            <li>
                                <a href="example6.html">Add "Menu Item 1's
                                Second Child" to Favourites</a>
                            </li>
                            <li>
                                <a href="example5.html">Menu Item 1's Second
                                Child</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="example7.html">Expand "Menu Item 2"</a>
            </li>
            <li>
                <a href="example8.html">Add "Menu Item 2" to Favourites</a>
            </li>
            <li>
                <a href="example7.html">Menu Item 2</a>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="example9.html">Open "Menu Item 3"</a>
            </li>
            <li>
                <a href="example10.html">Add "Menu Item 3" to Favourites</a>
            </li>
            <li>
                <a href="example9.html">Menu Item 3</a>
            </li>
        </ul>
    </li>
</ul>

Как видите, вещи начинают становиться очень сложными очень быстро.

Это лучший способ передать эту информацию, или я слишком усложняю вопрос?

Можете ли вы придумать для меня лучший способ сделать это?

Ответы [ 2 ]

1 голос
/ 22 января 2010

IMO, вы используете этот список неправильно. Свернуть / Открыть / Добавить в избранное ... эти элементы не принадлежат дереву, но вы относитесь к ним, как если бы они были его частью.

Ваше дерево должно иметь следующую структуру: 

<ul>
  <li>
    <span>menu item 1<span>
    <ul>
      <li>
        <span>child node 1</span>
      </li>
      <li>
        <span>child node 2</span>
      </li>
    </ul>
  </li>
  ...
</ul>

Это основание дерева. Теперь вы должны добавить действия (открыть / добавить ... и т. Д.). Они могут быть размещены как другой, независимый список после span элемента. Затем просто используйте class, чтобы отделить список childNodes от списка actions : 

...
<li>
  <div>
    <span>menu item 1</span>
    <ul class="actions"> ... </ul>
  </div>
  <ul class="childNodes"> ... </ul>
</li>
...

Ну ... в теории классы не требуются, но с классами работать гораздо проще, чем ... ul > li > div > ul селекторы и т. Д.

Согласно первому комментарию

Базовая функциональность сайта не должна опираться на JavaScript. Вот почему я считаю, что добавление всего дерева с использованием JS - плохая идея. Действия вроде add to favs должны быть доступны без JS, но вы можете свободно контролировать это действие и перезаписывать его функциональность. Итак, в HTML у вас есть: 

<a href="/tree/action/add_to_favs?id=123">Add to favs</a>

Но используя JS, вы делаете что-то вроде этого (псевдокод): 

actionLink.addEventListener("click", function...
  var id = take id: 123
  do ajax request here
  return false;
});

Это лучший способ обеспечить хорошую доступность и функциональность одновременно.

Об открытии / развале действий. Это требует JS по своей природе, поэтому JS может добавить их в список действий. Но еще раз ... помните о "не-JS пользователей". HTML / CSS должен отображать целое дерево - JS должен свернуть его ветви.

0 голосов
/ 25 января 2010

Иногда я делаю так, как указано в ответе Крозина выше, но на большом сайте может быть невозможно загрузить такое большое дерево (я построил системы для сайтов с более чем 100 тыс. Страниц).

Гибридным решением является загрузка в дерево, чтобы путь к родительской странице содержал только текущий путь, а затем отображались все дочерние элементы родительского. Затем добавьте поведение JavaScript для добавления дополнительных частей дерева.

Выполнение этих действий означает, что просмотр без JS может полностью перемещаться по сайту, но просмотр JS получает расширенные функциональные возможности, и все это без снижения производительности при построении всего дерева.

...