Может ли меню CSS сделать это?

Question

Можно ли сделать навигацию по выпадающему меню без использования javascript и показать изображение рядом с каждым элементом?

Также я бы хотел, чтобы это работало с таблицей, поэтому при наведении курсора на ячейку таблицы будет отображаться список ссылок со значком рядом с каждой. Я не уверен, возможно ли это вообще без использования javascript?

Есть что-то похожее на то, что я пытаюсь сделать в меню Photobucket альтернативный текст http://img2.pict.com/f9/72/7f/1437912/0/640/screenshot2b9.png

Answer 1

Возможно ли это? Да

Это рекомендуется? Нет

Вы по-прежнему должны поддерживать IE6 и ниже, который поддерживает псевдоселектор :hover только для тегов <a> с атрибутом href. У любого другого тега псевдоселектор :hover будет игнорироваться. Для любого другого браузера у вас не будет такого ограничения.

Используя тег <a>, вы накладываете на себя следующие ограничения:

• Нет суб <a> тегов, что означает, что меню в основном приведет к одному месту.
• Нет элементов уровня блока внутри тега <a> (что можно легко обойти, используя display: block на встроенных элементах. Это означает, что <div> нет <table> или любые другие элементы уровня блока .

В мире без Internet Explorer 6 и ниже это было бы тривиально. Но, учитывая, что по состоянию на июль 2009 года все еще 27,21% Интернета используют IE6 , вы, возможно, не захотите их выписывать.

Answer 2

Ну да. Если вы посмотрите на источник для страницы, вы увидите <ul>, заставляющий ее работать. Они, конечно, используют JS - я отключил JS в Firefox, а затем перезагрузил страницу, после чего меню перестало работать, но я не уверен, насколько это необходимо для самого меню.

Вы можете отобразить изображение рядом с каждым элементом меню, используя тег <img /> в HTML-файле (x) или используя background-image в CSS.

CSS-подход:

<style type="text/css" media="all">
ul li {display: inline; position: relative;}

ul li ul {display: none; }

ul li:hover ul {display: block; position: absolute; top: 0; left: 0; }

ul li ul li {padding-left: 10px; background: #fff url(path-to-image.png) top left no-repeat; }
</style>

<ul>
<li>First item</li>
<li>Second item
    <ul>
        <li>Sub-level one</li>
        <li>Sub-level two</li>
    </ul></li>
<li>Third item</li>
</ul>

(x) html-подход:

<style>... /* will still need to be styled according to your theme */ ...</style>

<ul>
<li><img src="menu-icon-1.png" alt="menu-icon" />First item</li>
<li><img src="menu-icon-2.png" alt="menu-icon" />Second item
    <ul>
        <li><img src="menu-icon-2-1.png" alt="menu-icon" />Sub-level one</li>
        <li><img src="menu-icon-2-2.png" alt="menu-icon" />Sub-level two</li>
    </ul></li>
<li><img src="menu-icon-3.png" alt="menu-icon" />Third item</li>
</ul>

Если вы хотите, чтобы пункты меню имели уникальные значки / изображения, связанные с ними, то вам нужно будет использовать определенные id s в (x) html, так что это не особенно и более удобно для использования. один подход в пользу другого.

Answer 3

Что касается поддержки IE6: Взгляните на ie7-js , это помогает решить множество проблем с обратной совместимостью, включая использование: hover для элементов, отличных от a. Я убедился, что он работает с решением CSS, представленным ricebowl.

РЕДАКТИРОВАТЬ: Хорошая особенность этого скрипта в том, что он используется только в IE5.5 и IE6 (и IE7, если вы используете последнюю версию). Последняя версия делает IE7 более похожим на IE8 при отображении страницы, что упрощает написание простого и качественного HTML / CSS.

Answer 4

Конечно можно. Списки - это не более чем <li> теги. Внутри тега <li> вы можете поместить все, что захотите:

<ul>
    <li>
       <img src="someimage.jpg" alt="alttext" />
       <p><a href="yourlink.html">Your link</a></p>
    </li>
</ul>

, а затем создайте эффект меню с вашим CSS

РЕДАКТИРОВАТЬ ах, я вижу, вы хотите использовать только таблицы. должен был прочитать более внимательно. если вы не хотите использовать javascript (почему, я не знаю), нет, не w / css и html, по крайней мере, не кросс-браузер. Вы можете сделать это с псевдоклассом :hover, который работает для любого элемента в современных браузерах, но

Answer 5

Вы можете создать меню, используя только HTML и CSS. Но для обработки всех событий [клавиатура и мышь] вам нужно использовать JavaScript.