Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Корректировка стандартного горизонтального меню

Корректировка стандартного горизонтального меню

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО
#1 20 ноября 2013 в 21:09
Вопрос в следующем.
Стандартное меню построено так, что при наведении на пункт выпадающее подменю располагается на странице в XX пикселей от верха. Соответственно, если вставить выше меню что-то — то выпадающее подменю, так и располагается на том же уровне, относительно страницы, а не относительно пункта меню.
Пробовал править, меню разлетается (т е. не корректно отображается в ряде браузеров).

Как грамотно исправить стандартный код меню, чтобы выпадающее подменю всегда было на месте?
InstantGu.ru
0
#2 20 ноября 2013 в 21:15
Самый простой выход — не размешать в позицию topmenu ничего лишнего)
Добавьте новую позицию в шаблон над или под, не нужно будет ничего исправлять…
«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?
0
#3 20 ноября 2013 в 21:43
Не в этом дело.
Если саму позицию topmenu сместить выше или ниже, то выпадающий список меню отображается на прежнем месте.
Потомучто в css для выпадающего ul стоит

  1. position: absolute;
  2. top: 110px;
Значит выпадающее подменю находится с 110 пикселах сверху страницы.
Если меню будет в другом месте то выпадающий список согласно css
InstantGu.ru
0
#4 20 ноября 2013 в 21:49


absolute —
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?
0
#5 21 ноября 2013 в 02:02

absolute —
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

• Mike •
Попробую перевести на человеческий laugh
kreator, • Mike •, говорит вам, чтобы вы назначили свойство position:relative элементу li вашего меню, да задали выпадающему ul свойство top равное высоте заданой для li (лучше, минус 1-2 пикселя).
Украинский для инстант
0
#6 21 ноября 2013 в 17:21

trac.instantcms.ru/changeset/1378

Исправления меню
«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?
0
#7 21 ноября 2013 в 19:08
Два раза по треку попробовал не получилось, если не сложно, поправьте пожалуйста.
Сейчас у меня меню вот:

  1. /******************************* Верхнее меню *********************************/
  2. #topmenu{
  3.     overflow: hidden;
  4.     margin-top: 15px;
  5.     margin-bottom: 10px;
  6.     background: url(../images/menubar.jpg) repeat-x;
  7.     border-radius: 0 0 8px 8px;
  8.     -moz-border-radius: 0 0 8px 8px;
  9.     width: 940px;
  10.     clear: both;
  11. }
  12.  
  13. #topmenu .menu{ list-style:none; margin:0; padding:0; }
  14. #topmenu .menu li a{ text-decoration:none; }
  15. #topmenu .menu li{
  16.     list-style: none;
  17.     margin: 0;
  18.     padding: 0;
  19.     height: 35px;
  20.     line-height: 35px;
  21.     display: inline-block;
  22. 	zoom: 1;
  23.     font-size: 12px;
  24. 	text-transform: uppercase;
  25. 	font-weight: bold;
  26. }
  27.  
  28. #topmenu .menu li.selected{
  29.     background:url(../images/menubg.jpg) repeat-x left top #375E93;
  30. }
  31.  
  32. #topmenu .menu li.selected a.selected{
  33.     color:#fff;
  34.     text-decoration:none;
  35.     text-shadow:0 1px 0 #000;
  36. }
  37.  
  38. #topmenu .menu li a:hover,
  39. #topmenu .menu li a.hover{
  40.     background:url(../images/menubg-hover.jpg) repeat-x center top #375E93;
  41.     color:#000 !important;
  42.     text-shadow:0 1px 0px #FFF !important;
  43. }
  44.  
  45. #topmenu .menu li a{
  46.     padding: 0px 10px;
  47.     color: #1F3451;
  48.     height: 35px;
  49.     line-height: 35px;
  50.     display: inline-block;
  51. }
  52.  
  53. #topmenu ul li ul {
  54.     display:none;
  55.     position: absolute;
  56.     top: 110px;
  57. 	width: 200px;
  58. 	background: #E9E9E9;
  59. 	color: #000;
  60.     padding:0px;
  61.     z-index:1000;
  62.     box-shadow:1px 1px 3px #000;
  63.     -moz-box-shadow:1px 1px 3px #000;
  64. }
  65. #topmenu ul li ul li ul {
  66.     display:none;
  67.     position: relative;
  68.     margin-top:-155px;
  69.     left:200px;
  70. 	width: 200px;
  71. 	background: #E9E9E9;
  72. 	color: #000;
  73.     padding:0px;
  74.     z-index:1000;
  75.     box-shadow:1px 1px 3px #000;
  76.     -moz-box-shadow:1px 1px 3px #000;
  77. }
  78.  
  79. #topmenu ul li ul li,  #topmenu ul li ul li a{
  80.     display:block;
  81.     width:100%;
  82. }
  83.  
  84. #topmenu ul li ul li a{
  85.     padding:0px !important;
  86.     text-decoration:none;
  87. }
  88. #topmenu ul li ul li a span{
  89.     margin:0px 10px;
  90.     padding:0px;
  91. }
  92.  
  93. #topmenu ul li ul li a.selected span{
  94.     text-decoration:none;
  95. }
  96.  
  97. .pathway{
  98.     padding:0 20px 10px;
  99. }
InstantGu.ru
0
#8 21 ноября 2013 в 19:17 
  1.  
  2. /******************************* Верхнее меню *********************************/
  3. #topmenu{
  4.     margin-top:15px;
  5.     margin-bottom:10px;
  6.     background:url(../images/menubar.jpg) repeat-x center bottom;
  7.     border-radius:8px;
  8.     -moz-border-radius:8px;
  9.     box-shadow: 0 0 5px #000;
  10.     -moz-box-shadow: 0 0 5px #000;
  11.     width:940px;
  12.     clear: both;
  13.     display:table;
  14.     table-layout: fixed;
  15. }
  16. #topmenu .menu{ list-style:none; margin:0; padding:0; position:relative; }
  17. #topmenu .menu li a{ text-decoration:none; }
  18. #topmenu .menu li{
  19.     list-style:none;
  20.     margin:0;
  21.     padding:0;
  22.     height:40px;
  23.     line-height:40px;
  24.     display:block;
  25. 	zoom: 1;
  26.     font-size:18px;
  27.     float:left;
  28.  
  29. }
  30.  
  31. #topmenu .menu li.selected{
  32.     background:url(../images/menubg.jpg) repeat-x left top #375E93;
  33. }
  34.  
  35. #topmenu .menu li.selected a.selected{
  36.     color:#fff;
  37.     text-decoration:none;
  38.     text-shadow:0 1px 0 #000;
  39. }
  40.  
  41. #topmenu .menu li a:hover,
  42. #topmenu .menu li a.hover{
  43.     background:url(../images/menubg-hover.jpg) repeat-x center top #375E93;
  44.     color:#000 !important;
  45.     text-shadow:0 1px 0px #FFF !important;
  46. }
  47.  
  48. #topmenu .menu li a{
  49.     padding:0px 10px;
  50.     color:#1F3451;
  51.     height:40px;
  52.     line-height:40px;
  53.     display:block;
  54. }
  55.  
  56. #topmenu ul li ul {
  57.     display:none;
  58.     position: absolute;
  59.     top: 40px;
  60. 	width: 200px;
  61. 	background: #E9E9E9;
  62. 	color: #000;
  63.     padding:0px;
  64.     z-index:1000;
  65.     box-shadow:1px 1px 3px #000;
  66.     -moz-box-shadow:1px 1px 3px #000;
  67. }
  68. #topmenu ul li ul li ul {
  69.     display:none;
  70.     top:0;
  71.     left:200px;
  72. 	width: 200px;
  73. 	background: #E9E9E9;
  74. 	color: #000;
  75.     padding:0px;
  76.     z-index:1000;
  77.     box-shadow:1px 1px 3px #000;
  78.     -moz-box-shadow:1px 1px 3px #000;
  79. }
  80.  
  81. #topmenu ul li ul li,  #topmenu ul li ul li a{
  82.     display:block;
  83.     width:100%;
  84.     position:relative;
  85. }
  86.  
  87. #topmenu ul li ul li a{
  88.     padding:0px !important;
  89.     text-decoration:none;
  90. }
  91. #topmenu ul li ul li a span{
  92.     margin:0px 10px;
  93.     padding:0px;
  94. }
  95.  
  96. #topmenu ul li ul li a.selected span{
  97.     text-decoration:none;
  98. }
  99.  
  100. это из 1378 тот же «кусок»
  101.  
«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?
0
#9 21 ноября 2013 в 19:37
Все работает +
InstantGu.ru
0
Как вывести заглушку?
InstantShop

Похожие темы

Привязать шаблон html к стандартному шаблону

Дизайн / Графика / Искусство Создана 2 года назад 5 сообщений

Как вывести категории контента в горизонтальном меню

Релизы 2.X Создана 4 года назад 3 сообщения

[ЕСТЬ РЕШЕНИЕ] Как в Moderne зафиксировать главное горизонтальное меню при прокрутке страницы?

Дизайн / Графика / Искусство Создана 3 года назад 4 сообщения

[ЕСТЬ РЕШЕНИЕ] Разделитель, горизонтальная черта в меню - как добавить?

Вопросы настройки InstantCMS Создана 2 года назад 5 сообщений

Горизонтальный виджет контента

Разработка дополнений Создана 2 года назад 9 сообщений

[ЕСТЬ РЕШЕНИЕ] Шрифт в мобильной теме

Дизайн / Графика / Искусство Создана 4 года назад 5 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.