Темы:

Меню в два столбца

Периодически, делая сайты на цмсине, меня посещала мысль – как сделать так, что бы сгенеренное меню выводилось в две колонки?
В очередной раз вопрос встал, когда нужно было переверстывать наш сайт у нас. Такое меню Вы сейчас можете увидеть в футере, в карте сайта. Естественно, этот вопрос с завидной регулярностью доводил до исступления – я искал и средства в селекторах цсс, и теги какие-нибудь пытался подобать, гуглил – ничего более-менее легковесного не получалось.
В предыдущих работах приходилось, чувствую себя ужасно виновато :) , делать два генеренных меню, чередуя – в одном левые, во втором правые ссылки. На нашем же сайте решил все-таки найти решение.
В очередной раз около часа потратил на поиски, пока до меня внезапно не сошло озарение (лол) можно же использовать поведение блочных элементов в ссылках! Оказалось все просто – задаем первой ссылке обтекание по правому борту – а все, последующим – по левому.

footer nav {
width:200px;
}
footer nav a {
text-decoration: none;
color:#737373;
display:block;
float:right;
width:50%;
}
footer nav a + a {
float:left;
}

Немного помучался с маржинами, пока не сообразил использовать ширину в 50%. Получилось вроде бы клево, но ссылки были ужасно широкими – например, на надпись «блог» что бы попасть, нужно было еще постараться:).
По-этому пришлось «обвернуть» их в <li> конечный вариант выглядит так:

footer nav {
width:200px;
float:left;
min-height:70px;
font-size: 11px;
}
footer strong {
float: left;
}
footer nav li {
text-decoration: none;
color:#737373;
display:block;
float:right;
width:50%;
list-style: none;
}
footer nav a {
text-decoration: none;
color:#737373;
}
footer nav a:hover {
text-decoration:underline;
}
footer nav li + li {
float:left;
}

коротко, четко, надежно. Надеюсь, кому-то поможет :) .

Верстка