Все мы уже привыкли что меню на сайте всегда выглядит в виде списка. Поэтому мы продолжаем дальше пробовать и изменять дизайн меню. В этой статье мы сделаем меню в виде списка. Так же не стоит останавливаться на одном месте и этот метод вы можете использовать где угодно если нужно одну часть текста прижать к левой стороне, а другую к правой. Меню в виде огловления очень практично если вам нужно с одной стороны вывести название категории и с другой кол-во новостей.

И так начнем. Для начала напишем простой HTML код обычного меню:

<ul id="list">
<li><span>11</span> <a href="#">CSS</a><br /></li>
<li><span>20</span> <a href="#">HTML</a><br /></li>
<li><span>35</span> <a href="#">jQuery</a><br /></li>
<li><span>62</span> <a href="#">javascript</a><br /></li>
</ul>

Далее предадим меню css стиль:

ul#list {list-style:none;width:320px;}
#list li {background:url(botline.gif) repeat-x 0 0.85em;}
#list li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#list li span {float:right;background:#FFF; padding 0 0 0 4px;}
#list li br {clear:both;}

botline.gif - это картинка нижнего прочерка. Вы можете сделать ёё просто белой и тогда будет эффект что одна часть текста с права, а другая с лева.

Спасибо за внимание.

Добавлено: 09 Мая 2018 17:08:37 Добавил: Андрей Ковальчук Нравится 0

Добавить