21 марта

Создание стрелочек у меню без картинок

Веб-мастеру — Метки: css, javascript, без картинок, веб-дизайн — Pion2er1420 дней назад

Вот один способ сделать стрелочки в меню при наведении без картинок. Сложного ничего, зато отлично работает работает Пример

файл CSS:

.menu_ico {margin:20px auto;width:200px;}
.menu_ico a {color:red;display:block;font:bold 12px Tahoma,helvetica,sans-serif;position:relative;text-decoration:none;}
.menu_ico a:hover {color:#red;}
.menu_ico dl {font:bold 13px Tahoma,arial;margin:0;padding:10px;}
.menu_ico dt {color:gray;}
.menu_ico dd {list-style-type:none;margin:0;padding:2px 0 0 10px;position:relative;}
.menu_ico dd b {
  border-top:#fff 5px solid;
  border-right:#fff 5px solid;
  border-bottom:#fff 5px solid;
  border-left:red 5px solid;
  display:none;
  position:absolute;left:1px;top:4px;z-index:2;
  overflow:hidden;
  height:1px;
}
.menu_ico dd:hover b {display:block;margin:0 0 0 -6px;}
*html .menu_ico dd {behavior:url(hover.htc);}
*html .menu_ico dd.hover b {display:block;margin:0 0 0 -6px;}

файл html:

<!-- Не забываем описать тип документа -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<!-- Само меню -->
<div class="menu_ico">
<dl>
  <dt>Menu</dt>
  <dd><b></b><a href="#">Menu - 1</a></dd>
  <dd><b></b><a href="#">Menu - 2</a></dd>
  <dd><b></b><a href="#">Menu - 3</a></dd>
  <dd><b></b><a href="#">Menu - 4</a></dd>
</dl>
</div>

Создадим еще файлик Hover.htc с этим кодом, чтобы в IE работал :hover

Файл hover.htc:

<attach for=element event=onmouseover handler=lasto>
<attach for=element event=onmouseout handler=gordi>
<script>
function lasto(){element.className='hover';}
function gordi(){element.className='';}
</script>

Все права на записи принадлежат порталу PION.RU. При использовании любой информации с данного сайта, обратная ссылка «открытая» для поисковых машин на эту страницу обязательна! В противном случае вы нарушатете закон Российской Федерации об авторском праве и смежных правах. Статья 7.3

Похожие записи: