списки меню HTML - PullRequest
Новая
       1

списки меню HTML

0 голосов
/ 03 февраля 2010

All 

<html>

<ul class="menu">
<li>
 <a href="">Header</a>
 <ul class="submenu">
    <li><img src=""/> Link 1</li>
    <li><img src=""/> Link 2</li>
 </ul>
 </li>
 </ul>
 </html>

Можно ли изменить код так, чтобы при наведении курсора мыши появлялись ссылки1 и ссылка2 ...

Ответы [ 3 ]

1 голос
/ 03 февраля 2010

Да - это можно сделать с помощью JavaScript или CSS. Здесь есть хорошая статья о том, как это сделать в CSS:

http://www.howtocreate.co.uk/tutorials/testMenu.html

Обновление: На самом деле это руководство выглядит намного лучше:

http://www.seoconsultants.com/css/menus/tutorial/

Найти хорошую информацию о меню только с CSS сложнее, чем я думал ...

0 голосов
/ 03 февраля 2010

Вы можете попробовать использовать комбинацию jQuery и CSS.

HTML: 

<ul class="menu">
    <li>
        <a href="" class="submenuLink">Header</a>
        <ul class="submenu">
            <li><img src=""/> Link 1</li>
            <li><img src=""/> Link 2</li>
        </ul>
    </li>
</ul>

CSS: 

ul.submenu
{
    display: none;
}

JQuery: 

$(document).ready(function() {
    $(".submenuLink").mouseover(function() {
        $(".submenu").css("display", "inline");
    });   
});

Вам просто нужно связать mouseoout, чтобы скрыть его снова, когда вы отводите мышь от «Заголовка».

0 голосов
/ 03 февраля 2010

с CSS или с JS?

Здесь с CSS: 

<html>
  <head>
    <style type="text/css">
      li:hover > ul {
        display:block;
      }
      .submenu {
        display:none;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>
        <a href="">Header</a>
        <ul class="submenu">
          <li><img src=""/> Link 1</li>
          <li><img src=""/> Link 2</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Но это, вероятно, не работает в IE6 и ниже (спасибо Andy E), так как не разрешить псевдоселектор :hover с другими селекторами, кромеa.

Есть лучшие подходы, но, поскольку ваш вопрос не очень конкретен, это мое решение.

Редактировать: Это будет 

li a:hover + ul {
    display:block;
}

Ссылка .

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...