Как реализовать сортировку категорий, как на сайте 220-volt.ru?

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

При этом автоматически сортируются по алфавиту.
Сортировку можно, конечно, и вручную - но вот стили? Загадка...
  • Вопрос задан
  • 3167 просмотров
Пригласить эксперта
Ответы на вопрос 5
morozovdenis
@morozovdenis
м?
<style>
a {
font-weight: bold
}
a.first-letter-bold:first-letter {
font-weight: 700;
}
</style>

<a class="first-letter-bold" href="/catalog/gajkoverty/">Гайковерты</a>


в каждом браузере сейчас есть инспектор html/css - там все такие вещи можно очень легко посмотреть
Ответ написан
andrex87
@andrex87 Автор вопроса
@morozovdenis Это то понятно, не понятно как они сделали так, чтобы все категории, что идут дальше на эту букву - НЕ выделяются..
clip2net.com/s/7bW3tO
clip2net.com/s/7bW8fk
Ответ написан
Комментировать
А что мешает использовать псевдоэлемент :first-letter?
Ответ написан
andrex87
@andrex87 Автор вопроса
@morozovdenis
<ul id="my_menu">
<li class="item-119"><a href="/accumulyator-otvertki.html">Аккумуляторные отвертки</a></li><li class="item-120"><a href="http://magpromtorg.ru/akkumulyator-drell.html">Аккумуляторные дрели (шуруповерты)</a></li><li class="item-144"><a href="http://magpromtorg.ru/apparaty-up-davl.html">Аппараты высокого давления</a></li><li class="item-374 deeper parent"><a href="http://magpromtorg.ru/autoinstrument.html">Автоинструмент</a><ul><li class="item-390"><a href="/2014-03-25-13-01-50/tortsevye-golovki.html">Торцевые головки</a></li><li class="item-391"><a href="/2014-03-25-13-01-50/domkraty.html">Домкраты</a></li></ul></li><li class="item-145 deeper parent"><a href="http://magpromtorg.ru/benzoinstr.html">Бензоинструмент</a><ul><li class="item-392"><a href="/benzoinstrument/gazonokosilki-benzinovye.html">Газонокосилки бензиновые</a></li><li class="item-393"><a href="/benzoinstrument/pily-tsepnye-benzinovye.html">Пилы цепные бензиновые</a></li><li class="item-394"><a href="/benzoinstrument/motopompy-benzinovye.html">Мотопомпы бензиновые</a></li><li class="item-395"><a href="/benzoinstrument/trimmery-benzinovye.html">Триммеры бензиновые</a></li><li class="item-396"><a href="/benzoinstrument/kosa-benzinovaya.html">Коса бензиновая</a></li></ul></li><li class="item-146"><a href="http://magpromtorg.ru/betonomeshalki.html">Бетономешалки</a></li><li class="item-176"><a href="http://magpromtorg.ru/bolgarki.html">Болгарки (УШМ)</a></li><li class="item-147"><a href="http://magpromtorg.ru/water-nasos.html">Водяные насосы</a></li><li class="item-121"><a href="http://magpromtorg.ru/drell.html">Дрели (электродрели)</a></li><li class="item-142"><a href="http://magpromtorg.ru/kraskopult.html">Краскопульты</a></li><li class="item-141"><a href="http://magpromtorg.ru/kompressory.html">Компрессоры воздушные</a></li><li class="item-128"><a href="http://magpromtorg.ru/lobziki.html">Лобзики (электролобзики)</a></li><li class="item-148"><a href="http://magpromtorg.ru/lazer.html">Лазерный инструмент</a></li><li class="item-124"><a href="http://magpromtorg.ru/mixer-stroit.html">Миксеры строительные</a></li><li class="item-129"><a href="http://magpromtorg.ru/nozhnicy.html">Ножницы электрические</a></li><li class="item-122"><a href="http://magpromtorg.ru/perforators.html">Перфораторы</a></li><li class="item-126"><a href="http://magpromtorg.ru/plitkorez.html">Плиткорезы электрические</a></li><li class="item-132"><a href="http://magpromtorg.ru/pily-cepnye.html">Пилы цепные (электропилы)</a></li><li class="item-133"><a href="http://magpromtorg.ru/pily-cerkular.html">Пилы циркулярные</a></li><li class="item-134"><a href="http://magpromtorg.ru/pily-lent.html">Пилы ленточные</a></li><li class="item-135"><a href="http://magpromtorg.ru/pily-torcovochnye.html">Пилы торцовочные</a></li><li class="item-136"><a href="http://magpromtorg.ru/pily-sabel.html">Пилы сабельные</a></li><li class="item-143"><a href="http://magpromtorg.ru/prom-pylesos.html">Промышленные пылесосы</a></li><li class="item-130"><a href="http://magpromtorg.ru/rubanki.html">Рубанки (электрорубанки)</a></li><li class="item-137"><a href="http://magpromtorg.ru/stanki-sverl.html">Станки сверлильные</a></li><li class="item-138"><a href="http://magpromtorg.ru/stanki-tokar.html">Станки токарные</a></li><li class="item-139"><a href="http://magpromtorg.ru/stanki-tochil-shlif.html">Станки точильные и шлифовальные</a></li><li class="item-149"><a href="http://magpromtorg.ru/svarochnoe-oborudovanie.html">Сварочное оборудование</a></li><li class="item-173"><a href="http://magpromtorg.ru/teplovoe-oborudovanie.html">Тепловое оборудование</a></li><li class="item-131"><a href="http://magpromtorg.ru/frezery.html">Фрезеры ручные</a></li><li class="item-140"><a href="http://magpromtorg.ru/feny-tex.html">Фены технические</a></li><li class="item-125"><a href="http://magpromtorg.ru/shlif-mash.html">Шлифовальные машины</a></li><li class="item-127"><a href="http://magpromtorg.ru/shtroborez.html">Штроборезы, бороздоделы</a></li><li class="item-150"><a href="http://magpromtorg.ru/electrostancii.html">Электростанции</a></li><li class="item-151 deeper parent"><a href="http://magpromtorg.ru/aksessuar.html">Аксессуары и расходники</a><ul><li class="item-397"><a href="/aksessuary-i-raskhodniki/akkumulyatory-dlya-shurupovertov.html">Аккумуляторы для шуруповертов</a></li><li class="item-398"><a href="/aksessuary-i-raskhodniki/diski-pilnye.html">Диски пильные</a></li><li class="item-399"><a href="/aksessuary-i-raskhodniki/sverla-po-metallu.html">Сверла по металлу</a></li><li class="item-400"><a href="/aksessuary-i-raskhodniki/sverla-po-derevu.html">Сверла по дереву</a></li><li class="item-401"><a href="/aksessuary-i-raskhodniki/sverla-po-betonu.html">Сверла по бетону</a></li><li class="item-402"><a href="/aksessuary-i-raskhodniki/zubila.html">Зубила</a></li><li class="item-403"><a href="/aksessuary-i-raskhodniki/sds-bury-i-koronki.html">SDS-буры и коронки</a></li></ul></li></ul>
Ответ написан
andrex87
@andrex87 Автор вопроса
ul#my_menu {
list-style-type: none; 
margin: 0; 
padding: 0;
margin-left:10PX;
position:relative;
margin-left: 16px;
width: 235px;
}

ul#my_menu li {
	display: block;
}

ul#my_menu li:hover {
  box-shadow: inset 0 0 8px #0061A1;
  position: relative;
  margin-left: 0;
}

ul#my_menu li:hover > ul {
	visibility: visible;
	box-shadow: inset 0 0 8px #0061A1;
	background: #f0f0f0;
}

ul#my_menu li:hover > a {
	box-shadow: inset 6 0 8px #0061A1;
	color: #D01820;
}

ul#my_menu li a {
  color: #0061A1; 
  text-decoration: none; 
  font-size:16px;
  font-family:Tahoma;
   width: 234px;
  display: block;
  text-indent:5px;
  
/* цвета фона и текста */
   color: #0061A1;
}

ul#my_menu li a:first-letter {
    
}


ul#my_menu li a:visited {
	display: block;
	width: 234px;
}

ul#my_menu li a:hover {
  color: #D01820;
}

/* ul#my_menu li a span{
  font-size: 18px; 
  padding: 10px 0 0 22px;
  display: block;  
} */

ul#my_menu li ul {
	/* border: solid 1px #a63414;
      border-radius: 5px;
      margin-top: 30px;
      margin-left: 108px;
      display: inline; */
	visibility: hidden;
    position: absolute;
  	left: 234px;
    top: 0px;
	padding: 0;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы