Сообщений в теме: 7

[fe-s]

Здравствуйте! Как можно в меню сделать выделенные вкладки по принципу, указанному здесь:

Хотелось бы сделать третий (наилучший вариант).

[Vaccina]

Реализовать первый вариант можно, если изменить стиль

найти в main.css

#mainmenu li a:hover {

и заменить на

#mainmenu li a:hover,  #mainmenu li a.selected {

Это в основном для темы "Сияние"

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

[fe-s]

Vaccina (13 Апрель 2011 - 19:04) писал:

Реализовать первый вариант можно, если изменить стиль

найти в main.css

#mainmenu li a:hover {

и заменить на

#mainmenu li a:hover,  #mainmenu li a.selected {

Это в основном для темы "Сияние"

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

У меня Лайт шаблон, там нет такого в файле main.css

[Vaccina]

Могу вам порекомендовать тогда следующее.

Для этого нужно будет только поправить немного файл main.css

Находим следующий класс

#mainNav table td div {
	background: url("http://img.distribute.ru/web/upload/assets/images/4/3195/nav_item_bg.gif") repeat-x scroll left bottom #FFFFFF;
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
}

Заменяем его на

#mainNav table td div {
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
	margin-top: -2px;
}

Далее, находим класс

#mainNav table td div a:link, #mainNav table td div a:visited {
	color: #666666;
	display: block;
	height: 26px;
	padding: 4px 10px 0;
}

Заменяем его на

#mainNav table td div a:link, #mainNav table td div a:visited {
	background: url("http://img.distribute.ru/web/upload/assets/images/4/3195/nav_item_bg.gif") repeat-x scroll left bottom transparent;
	color: #666666;
	display: block;
	height: 26px;
	padding: 4px 10px 0;
}

И последний класс

#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {
	color: #D48020;
	text-decoration: none;
}

заменяем на

#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {
	color: #D48020;
	margin-top: 2px;
	text-decoration: none;
}

С теми изменениями, что у вас уже есть, это будет походить на 3й вариант предложенный вами в 1м посте.

[fe-s]

Вроде получилось, только в Google chrome все отображается нормально, как и должно, а вот в опере и IE все по-старому, либо же некорректно.

[Vaccina]

Хм. попробуйте немного подправить классы в main.css

Что бы получилось так:

Найти

#mainNav table td div {
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
	margin-top: -2px;
}

Заменить на

#mainNav table td div {
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
}

Далее найти

#mainNav table td div a:link, #mainNav table td div a:visited {
	background: url("nav_item.gif") repeat-x scroll left bottom transparent;
	color: #666666;
	display: block;
	height: 26px;
	padding: 4px 10px 0;
}

и заменить на

#mainNav table td div a:link, #mainNav table td div a:visited {
	background: url("nav_item.gif") repeat-x scroll left bottom transparent;
	color: #666666;
	height: 26px;
	padding: 7px 10px;
	* padding: 1px 10px;
	* display:block;	
}

Далее найти

#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {
	color: #D48020;
	margin-top: 2px;
	text-decoration: none;background-position:bottom right;
}

Заменить на

#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {
	color: #D48020;
	padding: 7px 10px 12px;
	* padding: 1px 10px 3px;
	text-decoration: none;background-position:bottom right;
}

[fe-s]

Поменял, как сказали. Получилось вот что:

Вернул обратно

[Vaccina]

Ошибка получилась в том. что путь к изображению был не верен.

Т.е все проделываете, то же самое что и выше постом, и заменяете

background: url("nav_item.gif") repeat-x scroll left bottom transparent;

на

background: url("http://img.distribute.ru/web/upload/assets/images/4/3195/nav_item_bg.gif") repeat-x scroll left bottom transparent;