Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 2518 Просмотров
*

hawk1

  • Захожу иногда
  • 124
  • 1 / 0
Вопрос по верстке меню
« : 26.11.2010, 12:22:23 »
В шаблоне должно быть верхнее и нижнее меню, причем верхнее выпадающее. CSS я определил так
Код
.topmenu {
float: left;
width: 900px;
background-color: #8f8ce3;
}
.topmenu#mainlevel {
text-align: left;
}

.topmenu #mainlevel a:link, a:hover, a:visited, a#active_menu:link, a#active_menu:hover, a#active_menu:visited {
color: #FFFFFF;
font-weight: 700;
}

.bottommenu {
float: left;
width: 900px;
background-color: #ebbec2;
}

.bottommenu#mainlevel {
text-align: center;
}

.bottommenu #mainlevel a:link, a:visited, a#active_menu:link, a#active_menu:visited {
color: #b45ca0;
text-decoration: none;
font-weight: 700;
width: 100pt;
}
.bottommenu #mainlevel a:hover, a#active_menu:hover {
color: #db818a;
text-decoration: none;
font-weight: 700;
width: 100pt;
}
Но во-первых пункты верхнего меню выводятся таким же цветом как и верхнего, а во-вторых селектор hover работает только для активного пункта. В чем дело? Оба меню горизонтальные.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Вопрос по верстке меню
« Ответ #1 : 27.11.2010, 02:33:56 »
... селектор hover работает только для активного пункта. В чем дело? Оба меню горизонтальные.
Потому что a#active_menu:hover имеет большую силу, чем a:hover и перебивает его по значимости.
А зачем использовать псевдоклассы :link и :visited, если у них один и тот же цвет?
Разберитесь со стилями и оптимизируйте их, так будет проще понять ошибки.
Может данная заметка натолкнет на идеи по реализации.
*

hawk1

  • Захожу иногда
  • 124
  • 1 / 0
Re: Вопрос по верстке меню
« Ответ #2 : 27.11.2010, 11:00:16 »
С нижним меню разобрался. Сделал так
Код
.bottommenu {
background-color: #ebbec2;
float: left;
width: 900px;
}
.bottommenu li {
display: inline;
list-style-type: none;
}
.bottommenu a:link, a:visited {
color: #800080;
text-decoration: none;
font-weight: 700;
}
.bottommenu a:hover {
color: #db818a;
text-decoration: none;
font-weight: 700;
}
Надеюсь правильно. Ттображается так как надо. Просто я первый раз меню верстаю.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Вопрос по верстке меню
« Ответ #3 : 27.11.2010, 12:40:21 »
Думаю, что можно сократить до такого:
Код: css
.bottommenu{
background-color: #ebbec2;
width: 900px;
}
.bottommenu li{
display: inline;
list-style-type: none;
}
.bottommenu a{
color: #800080;
text-decoration: none;
font-weight: bold;
}
.bottommenu a:hover{
color: #db818a;
}
Не знаю, float: left; для .bottommenu нужно ли? Мне кажется, что нет.
*

hawk1

  • Захожу иногда
  • 124
  • 1 / 0
Re: Вопрос по верстке меню
« Ответ #4 : 27.11.2010, 13:14:58 »
Верхнее меню сделал так
Код
.topmenu {
float: left;
width: 900px;
}
.topmenu li {
display: inline;
list-style-type: none;
}
.topmenu a {
font-weight: 700;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
.topmenu li ul {
display: none;
position: relative;
background-color: #f3e7e8;
border: 2px solid #999999;
width: 130px;
}
.topmenu li:hover ul {
display: block;
}
.topmenu li:hover ul li ul {
text-align: left;
height: 18px;
width: 126px;
}
.topmenu li:hover ul li a {
color: #bb2151;
text-decoration: none;
font-weight: normal;
text-transform: capitalize;
}
.topmenu li:hover ul li a:hover {
text-decoration: none;
background-color: #db818a;
}
Но во-первых выпадают только подпункты активного пункта меню, во-вторых пункты меню, идущие за тем, над которым находжится курсор мыши, выводятся ниже подпунктов, а не справа, в-третьих подпункты выводятся левеек родительского пункта с выравниванием по центру, а не по левому краю как должно быть. В чем дело?
« Последнее редактирование: 27.11.2010, 17:46:48 от hawk1 »
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: Вопрос по верстке меню
« Ответ #5 : 28.11.2010, 00:13:17 »
выпадают только подпункты активного пункта меню
Странно, может еще где стилями перебивается. Это лучше увидеть на рабочем примере.

пункты меню, идущие за тем, над которым находжится курсор мыши, выводятся ниже подпунктов, а не справа
Ну да, вы же их не позиционируете никак, вот они и сваливаются в поток.
Как вариант, можно добавить такое свойство:
Код: css
.topmenu li {position:relative;}
.topmenu li li ul {position:absolute;margin-left:130px;}
Но тут тоже надо поэкспериментировать.

подпункты выводятся левеек родительского пункта с выравниванием по центру, а не по левому краю как должно быть
Может это вылечит
Код: css
.topmenu li дш {text-align:left;}
Из-за чего отступ подменю сложно без живого примера понять.

Как говорится, ссылка лучше тысячи слов...
*

hawk1

  • Захожу иногда
  • 124
  • 1 / 0
Re: Вопрос по верстке меню
« Ответ #6 : 28.11.2010, 14:28:45 »
С меню разобрался. Единственное что нужно чтобы при наведении курсора на элемент подменю подсвечивался весь элемент списка по всей ширине.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вопрос по Komento

Автор Missile

Ответов: 9
Просмотров: 3101
Последний ответ 21.12.2022, 17:52:46
от Missile
Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

Ответов: 4
Просмотров: 3444
Последний ответ 29.12.2021, 23:15:38
от v42bis
Выпадающее меню

Автор DrShepard

Ответов: 10
Просмотров: 2979
Последний ответ 20.10.2021, 12:36:16
от DrShepard
Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 1464
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 1381
Последний ответ 27.11.2020, 11:33:58
от coliandra