Активный пункт меню в квадратных скобках

smalish · May 12, 2009

Добрый день!

Меню на моем сайте реализовано с помощью списка, который формируется динамически, оформляется шаблоном с помощью css.

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

Реализовать нужно с помощью css с поддержкой всеми браузерами, в т.ч. IE6.

Как это лучше сделать?

Спасибо!

s0rr0w · May 12, 2009

Добрый день!
Меню на моем сайте реализовано с помощью списка, который формируется динамически, оформляется шаблоном с помощью css.
При наведении курсора на пункт меню требуется выделить его, заключив в желтые квадратные скобки:
Реализовать нужно с помощью css с поддержкой всеми браузерами, в т.ч. IE6.
Как это лучше сделать?
Спасибо!

Фоновой картинкой

psywalker · May 12, 2009

smalish

Както раз я заморочился над этой проблемой и решение было следующим

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
   li span { visibility: hidden;}
	 li:hover span { visibility: visible;}
</style>
</head>

<body>
<ul>
   <li><span>[</span><a href="#">343</a><span>]</span></li>
   <li><span>[</span><a href="#">343</a><span>]</span></li>
   <li><span>[</span><a href="#">343</a><span>]</span></li>
</ul>


</body>
</html>

s0rr0w

Фоновой картинкой

Это решение плохо тем, что если у ссылки будет много слов, то картинка не поможет, а потом меньше картинок,тоже плюс :rolleyes:

Edited May 12, 2009 by psywalker

smalish · May 12, 2009

правая скобка должна прилегать к тексту пункта меню, а у всех пунктов разная ширина (разное количество символов)

psywalker · May 12, 2009

smalish

правая скобка должна прилегать к тексту пункта меню, а у всех пунктов разная ширина (разное количество символов)

А разве мой способ не решает вашу задачу?

smalish · May 12, 2009

<body>

<ul>

<li><span>[</span><a href="#">343</a><span>]</span></li>

</ul>

Это решение плохо тем, что если у ссылки будет много слов, то картинка не поможет, а потом меньше картинок,тоже плюс :rolleyes:

Мое меню формируется динамически в CMS, поэтому дописать SPAN я не могу (или не знаю как :blink: )

Edited May 12, 2009 by smalish

psywalker · May 12, 2009

аа, жаль, но может всётаки доберётесь до кода как нибудь? былобы здорово :rolleyes:

smalish · May 12, 2009

спасибо! :rolleyes:

s0rr0w · May 12, 2009

правая скобка должна прилегать к тексту пункта меню, а у всех пунктов разная ширина (разное количество символов)

И? Если делать правильно, все будет прилегать.

Контейнеру ставите левую скобку, а ссылке - правую.

smalish · May 12, 2009

И? Если делать правильно, все будет прилегать.
Контейнеру ставите левую скобку, а ссылке - правую.

а чуть подробнее?

s0rr0w · May 12, 2009

а чуть подробнее?

Рисуете фоновую картинку по высоте как скобки, а по ширине где-то в 500 пикселей. По углам ставите скобки.

li.active { background: url(menu.png) no-repeat };

li.active a { background: url(menu.png) no-repeat right center; }

smalish · May 12, 2009

Рисуете фоновую картинку по высоте как скобки, а по ширине где-то в 500 пикселей. По углам ставите скобки.
li.active { background: url(menu.png) no-repeat };
li.active a { background: url(menu.png) no-repeat right center; }

С левой скобкой все получилось, а вот с правой - какая-то она "тощая", обрезан у нее верх и низ (вместо скобки видна вертикальная палочка), да и если навести мышкой на пункт меню, не доведя до самой ссылки, то левая скобка появляется, а правая - нет!

Как можно это подправить?

s0rr0w · May 12, 2009

С левой скобкой все получилось, а вот с правой - какая-то она "тощая", обрезан у нее верх и низ (вместо скобки видна вертикальная палочка), да и если навести мышкой на пункт меню, не доведя до самой ссылки, то левая скобка появляется, а правая - нет!
Как можно это подправить?

Да, сделать ссылке display: inline-block; и установить нормальные padding'и

Sign In

Активный пункт меню в квадратных скобках

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information