Здравствуйте! Как можно в меню сделать выделенные вкладки по принципу, указанному здесь:
Хотелось бы сделать третий (наилучший вариант).
0
Меню
Автор fe-s, 13 апр. 2011 08:22
Сообщений в теме: 7
#1
Отправлено 13 Апрель 2011 - 08:22
#2
Отправлено 13 Апрель 2011 - 19:04
Реализовать первый вариант можно, если изменить стиль
найти в main.css
и заменить на
Это в основном для темы "Сияние"
Что касается реализации второго и третьего варианта, то в данном случае нужно что бы меню было не неотъемлемой частью дизайна, контента. Т.е нужно перерисовывать дизайн или меню.
найти в main.css
#mainmenu li a:hover {
и заменить на
#mainmenu li a:hover, #mainmenu li a.selected {
Это в основном для темы "Сияние"
Что касается реализации второго и третьего варианта, то в данном случае нужно что бы меню было не неотъемлемой частью дизайна, контента. Т.е нужно перерисовывать дизайн или меню.
#3
Отправлено 13 Апрель 2011 - 23:48
Vaccina (13 Апрель 2011 - 19:04) писал:
Реализовать первый вариант можно, если изменить стиль
найти в main.css
и заменить на
Это в основном для темы "Сияние"
Что касается реализации второго и третьего варианта, то в данном случае нужно что бы меню было не неотъемлемой частью дизайна, контента. Т.е нужно перерисовывать дизайн или меню.
найти в main.css
#mainmenu li a:hover {
и заменить на
#mainmenu li a:hover, #mainmenu li a.selected {
Это в основном для темы "Сияние"
Что касается реализации второго и третьего варианта, то в данном случае нужно что бы меню было не неотъемлемой частью дизайна, контента. Т.е нужно перерисовывать дизайн или меню.
У меня Лайт шаблон, там нет такого в файле main.css
#4
Отправлено 14 Апрель 2011 - 01:58
Могу вам порекомендовать тогда следующее.
Для этого нужно будет только поправить немного файл main.css
Находим следующий класс
Заменяем его на
Далее, находим класс
Заменяем его на
И последний класс
заменяем на
С теми изменениями, что у вас уже есть, это будет походить на 3й вариант предложенный вами в 1м посте.
Для этого нужно будет только поправить немного файл 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м посте.
#5
Отправлено 14 Апрель 2011 - 09:15
Вроде получилось, только в Google chrome все отображается нормально, как и должно, а вот в опере и IE все по-старому, либо же некорректно.
#6
Отправлено 14 Апрель 2011 - 17:48
Хм. попробуйте немного подправить классы в 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; }
#8
Отправлено 15 Апрель 2011 - 01:26
Ошибка получилась в том. что путь к изображению был не верен.
Т.е все проделываете, то же самое что и выше постом, и заменяете
на
Т.е все проделываете, то же самое что и выше постом, и заменяете
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;
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных