border в качестве украшения меню

Trifler Blog

border в качестве украшения меню

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

В данном случае, речь пойдет о горизонтальном меню.

Хрестоматийный пример, как html-кода, так и стилей.

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

html и css

<ul id="menu">
  <li><a href="#">Home<b></b><u></u></a></li>
  .
  .
  .
  <li><a href="#">Login<b></b><u></u>/a></li>
</ul>

#menu {
  background-color:#fff;
  list-style:none;
  text-align:center;
  margin:0;
  padding:0;
}
#menu li {float:left;padding:0;margin:0;}
#menu a {
  background-color:#e6eaff;
  border-bottom:2px solid blue;
  color:blue;
  display:block;
  font:bold 12px arial;
  margin:0 1px;
  padding:5px 15px;
  position:relative;
  text-decoration:none;
}
#menu a:hover {
  background-color:#000;
  border-bottom:2px solid red;
  color:#fff;
}
#menu a b,
#menu a u {
  border-top:5px solid #fff;
  position:absolute;top:0;
  overflow:hidden;height:0;
}
#menu a b {
  border-right:5px solid #e6eaff;
  left:0;_left:-15px;
}
#menu a u {border-left:5px solid #e6eaff;right:0;}
#menu a:hover b {
  border-right:5px solid #000;
  border-top:5px solid #fff;
}
#menu a:hover u {
  border-left:5px solid #000;
  border-top:5px solid #fff;
}

Что может получиться, если обнулять те или иные border-ы посмотрите сами.

Дефолт:

/

Обнулен левый border:

/

Обнулен правый border:

/

Для усмирения IE6, в секции #menu a b, выделено цветом, указанное значение должно соответствовать величине горизонтального padding-а для #menu a. Это решает проблему размеров места отведенного под текст ссылки, иначе придется делать фиксированную ширину для нее, со всеми вытекающими от сюда негативными последствиями.

Задавая иной размер border-а, возможно, кое-где потребуется дополнительная правка, легко можно изменить наклон отрезанного уголка.

Вот собственно и все.

На страничке с линками на примеры ищем ссылку menu_border.

Комментарии к этой заметке больше не принимаются.


Рейтинг популярности - на эти заметки чаще всего ссылаются:

banner counters.php

leftcounters
width:160px;
height:160px;

banner counters.php

centercounters
width:160px;
height:160px;

banner counters.php

rightcounters
width:160px;
height:160px;

Горизонтальный banner counters.php - width:494px;

январь, 2009
пн вт ср чт пт сб вс
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
free  counters