Ребята, помогите уменьшить размеры выпадающего меню и размеры панели навигации.
Уменьшить размеры выпадающего меню и размеры панели навигации.
Сообщений 1 страница 20 из 27
Поделиться2Чт, 9 Янв 2014 20:04:18
Ребята, помогите уменьшить размеры выпадающего меню и размеры панели навигации.
Размер выпадающего меню первый уровень:
Общий размер всего блока:
#pun-navlinks ul li ul {
width: 175px;
display: none;
position: absolute;
z-index: 90;
top: 30px;
left: -35px;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
Размер ссылок:
#pun-navlinks ul ul li {
width: 164px;
float: left;
display: block !important;
width: 100%;
text-align: center;
font-weight: bold;
padding: 0.5em 0 !important;
margin: 0 !important;
position: static !important;
}
Для второго уровня размер:
#pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 175px;}
Поделиться3Чт, 9 Янв 2014 20:28:55
kolobdur74, спасибо! Примерно разобрался с этими размерами. Но..., не могу настроить следующее:
Уж слишком между выпадающими меню большое расстояние. Не могу отрегулировать.... А крайнее меню упирается в край таблицы форума - не видно ничего что там...
Отредактировано Вдумчивый (Чт, 9 Янв 2014 20:34:58)
Поделиться4Чт, 9 Янв 2014 20:39:01
Уж слишком между выпадающими меню большое расстояние. Не могу отрегулировать....
Вы изменили размер для первого уровня, но не изменили здесь:
#pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 175px;}
Вот у вас отступ в 25 пикселей и выходит.. Должны размеры соответствовать друг другу..
Да и еще забыл вам сказать - там вам линии мешают, попробуйте добавить:
#userpol, #userpol li, #userpol li ul {
z-index: 1000;
}
Поделиться5Чт, 9 Янв 2014 20:57:07
Да и еще забыл вам сказать - там вам линии мешают, попробуйте добавить:
Добавить куда - в дополнение к скрипту?
Поделиться6Чт, 9 Янв 2014 21:01:17
left: 175px;
Вопрос: оставить так, как вы предлагаете? Конкретнее...
Может подправите, а то, что-то у меня не сдвигается с мертвой точки.
<style type="text/css"> #pun-navlinks { opacity: 0.9; filter: alpha(opacity=90); text-align: center !important; } #pun-navlinks ul li { margin: 0 15px 0 0; padding: 0.9em 0 !important; position: relative; } #pun-navlinks ul li ul { width: 150px; display: none; position: absolute; z-index: 90; top: 30px; left: -35px; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #pun-navlinks ul ul li { width: 160px; float: left; display: block !important; width: 100%; text-align: center; font-weight: bold; padding: 0.5em 0 !important; margin: 0 !important; position: static !important; } #pun-navlinks ul li:hover ul { display: block !important; } /* 2nd Menu */ #pun-navlinks ul li:hover li a { color: #fff; } /* 2nd Menu Hover Persistence */ #pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a { background: #555; color: #ffcc33 !important; text-decoration: none; font-weight: bold; padding: 5px 4px; } /* Do Not Move - Must Come Before display: DarkOliveGreen2 */ #pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 150px;} #pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: DarkOliveGreen2;} </style>
Отредактировано Вдумчивый (Чт, 9 Янв 2014 21:05:17)
Поделиться7Чт, 9 Янв 2014 21:08:18
kolobdur74 Оставил как было... Конкретных шагов не наблюдается, к сожалению...
Поделиться8Чт, 9 Янв 2014 21:14:09
Добавить куда - в дополнение к скрипту?
Туда же внутрь тегов: <style type="text/css"></style> то бишь вот так:
<style type="text/css">
#pun-navlinks {
opacity: 0.9;
filter: alpha(opacity=90);
text-align: center !important;
}#pun-navlinks ul li {
margin: 0 15px 0 0;
padding: 0.9em 0 !important;
position: relative;
}#pun-navlinks ul li ul {
width: 150px;
display: none;
position: absolute;
z-index: 90;
top: 30px;
left: -35px;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}#pun-navlinks ul ul li {
width: 160px;
float: left;
display: block !important;
width: 100%;
text-align: center;
font-weight: bold;
padding: 0.5em 0 !important;
margin: 0 !important;
position: static !important;
}#pun-navlinks ul li:hover ul {
display: block !important;
}/* 2nd Menu */
#pun-navlinks ul li:hover li a {
color: #fff;
}/* 2nd Menu Hover Persistence */
#pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a {
background: #555;
color: #ffcc33 !important;
text-decoration: none;
font-weight: bold;
padding: 5px 4px;
}
/* Do Not Move - Must Come Before display: DarkOliveGreen2 */
#pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 150px;}
#pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: DarkOliveGreen2;}#userpol, #userpol li, #userpol li ul {
z-index: 1000;
}
</style>
Может подправите, а то, что-то у меня не сдвигается с мертвой точки.
У вас еще с ссылками размеры не совпадают:
#pun-navlinks ul ul li {
width: 160px;
float: left;
display: block !important;
width: 100%;
text-align: center;
font-weight: bold;
padding: 0.5em 0 !important;
margin: 0 !important;
position: static !important;
}
У них размер должен быть меньше, а у вас больше..Вот поправил и добавил, попробуйте в таком виде поставить:
<style type="text/css"> #pun-navlinks { opacity: 0.9; filter: alpha(opacity=90); text-align: center !important; } #pun-navlinks ul li { margin: 0 15px 0 0; padding: 0.9em 0 !important; position: relative; } #pun-navlinks ul li ul { width: 150px; display: none; position: absolute; z-index: 90; top: 30px; left: -35px; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #pun-navlinks ul ul li { width: 140px; float: left; display: block !important; width: 100%; text-align: center; font-weight: bold; padding: 0.5em 0 !important; margin: 0 !important; position: static !important; } #pun-navlinks ul li:hover ul { display: block !important; } /* 2nd Menu */ #pun-navlinks ul li:hover li a { color: #fff; } /* 2nd Menu Hover Persistence */ #pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a { background: #555; color: #ffcc33 !important; text-decoration: none; font-weight: bold; padding: 5px 4px; } /* Do Not Move - Must Come Before display: DarkOliveGreen2 */ #pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 150px;} #pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: DarkOliveGreen2;} #userpol, #userpol li, #userpol li ul { z-index: 1000; } </style>
Поделиться9Чт, 9 Янв 2014 21:33:54
У них размер должен быть меньше, а у вас больше..Вот поправил и добавил, попробуйте в таком виде поставить:
Во, уже лучше!!! Спасибо, дружище! Только все равно упирается меню в край форума...Что-то, явно не то.
Поделиться10Чт, 9 Янв 2014 21:51:12
Во, уже лучше!!! Спасибо, дружище! Только все равно упирается меню в край форума...Что-то, явно не то.
Это из-за Администрирования - у остальных пользователей отображение нормальное..
Потому что открывается влево - для Администрирования надо делать открытие вправо..
Замените этот код:
#userpol, #userpol li, #userpol li ul {
z-index: 1000;
}
На:
#userpol, #userpol li, #userpol li ul {
z-index: 1000 !important;
}
Поделиться11Чт, 9 Янв 2014 22:10:32
kolobdur74, гляньте, пожалуйста... - вроде сдвигов больших не намечается - по прежнему упирается в край...Хотя, уже намного лучше!
Поделиться12Чт, 9 Янв 2014 22:42:44
kolobdur74, извините за беспокойство, я вам порядком поднадоел. Оставим в сторону наши проблемы...Спасибо и пока.
kolobdur74, гляньте, пожалуйста...
Глянуть может только админ...
Поделиться13Чт, 9 Янв 2014 22:45:37
вроде сдвигов больших не намечается - по прежнему упирается в край...Хотя, уже намного лучше!
Ну, попробуйте такой вариант:
<style type="text/css"> #pun-navlinks { opacity: 0.9; filter: alpha(opacity=90); text-align: center !important; } #pun-navlinks ul li { margin: 0 15px 0 0; padding: 0.9em 0 !important; position: relative; } #pun-navlinks ul li ul { width: 150px; display: none; position: absolute; z-index: 90; top: 30px; left: -35px; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #pun-navlinks ul ul li { width: 140px; float: left; display: block !important; width: 100%; text-align: center; font-weight: bold; padding: 0.5em 0 !important; margin: 0 !important; position: relative !important; } #pun-navlinks ul li:hover ul { display: block !important; } /* 2nd Menu */ #pun-navlinks ul li:hover li a { color: #fff; } /* 2nd Menu Hover Persistence */ #pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a { background: #555; color: #ffcc33 !important; text-decoration: none; font-weight: bold; padding: 5px 4px; } /* Do Not Move - Must Come Before display: DarkOliveGreen2 */ #pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;right: 150px;} #pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: DarkOliveGreen2;} #userpol, #userpol li, #userpol li ul { z-index: 1000; } </style>
Когда поставите сделайте скриншот..
Поделиться14Пн, 13 Янв 2014 14:21:46
Ну, попробуйте такой вариант:
То, что надо! Хотя...- наезжает... На крайнем спойлере не видно ссылок.
Отредактировано Вдумчивый (Пн, 13 Янв 2014 14:28:27)
Поделиться15Пн, 13 Янв 2014 15:27:31
Попробуйте здесь увеличить отступ:
#pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;right: 150px;}
Поделиться16Пн, 13 Янв 2014 15:28:47
kolobdur74, а как сделать с голубыми полосками, как здесь на форуме, очень красиво.
Поделиться17Пн, 13 Янв 2014 15:35:56
Попробуйте здесь увеличить отступ:
Никакого толку... , опускается вниз и все. Поставил 300 px, уж куда больше...
Поделиться18Пн, 13 Янв 2014 16:02:46
а как сделать с голубыми полосками, как здесь на форуме, очень красиво.
Никакого толку... , опускается вниз и все. Поставил 300 px, уж куда больше...
Сейчас мне надо убежать - давайте сделаем так: выложите полный код выпадающего меню, который у вас есть, а я полностью сделаю нормально у себя на тестовом и выложу вам готовый сегодня вечером или завтра..Хорошо? Сделать как на форуме техподдержки?
Поделиться19Вт, 14 Янв 2014 08:39:07
Сделать как на форуме техподдержки?
Да!
выложите полный код выпадающего меню
Пост 13. (Или это не полный...Как он должен выглядеть - хрен его знает.)
Отредактировано Вдумчивый (Вт, 14 Янв 2014 08:39:58)
Поделиться20Вт, 14 Янв 2014 17:04:32
Вдумчивый
Вообщем вот, тестируйте:
<style> /*выпадающее меню*/ #pun-navlinks{display: block;position: relative;z-index: 9999;opacity: 0.9;filter: alpha(opacity=90);} #pun-navlinks ul li {margin: 0 15px 0 0;float: left;display: inline;list-style: none;position: relative;height: 24px;} #pun-navlinks ul ul {padding: 0px 0px 12px 0px;width: 290px;list-style: none;display: none;position: absolute;top: 24px;left: -5px;border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111); -moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;} #pun-navlinks ul ul li {width: 290px;float: left;display: block !important;padding-bottom: 8px;padding-top: 8px;text-align:center; -moz-transition: background-color .3s ease-in;-webkit-transition: background-color .3s ease-in;-o-transition: background-color .3s ease-in;transition: background-color .3s ease-in;} /* 2nd Menu */ #pun-navlinks ul li:hover li a, #pun-navlinks ul li.iehover li a {background: none !important;float: none;color: #fff; } /* 2nd Menu Hover Persistence */ #pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a, #pun-navlinks ul li.iehover li a:hover, #pun-navlinks ul li.iehover li.iehover a {color: #ffcc33;text-decoration:none;text-shadow: 0 1px 0 #000;} #pun-navlinks ul ul li:hover {background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background-image: -webkit-linear-gradient(#04acec, #0186ba);background-image: -o-linear-gradient(#04acec, #0186ba);background-image: -ms-linear-gradient(#04acec, #0186ba);background-image: linear-gradient(#04acec, #0186ba); -moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px; -moz-transition: background-color 0.01s;-webkit-transition: background-color 0.01s;-o-transition: background-color 0.01s;transition: background-color 0.01s;} /* Do Not Move - Must Come Before display:block for Gecko */ #pun-navlinks ul li:hover ul ul, #pun-navlinks ul li:hover ul ul ul, #pun-navlinks ul li.iehover ul ul, #pun-navlinks ul li.iehover ul ul ul {display: none;position: absolute;top: 0;left: 289px;} #pun-navlinks ul li:hover ul, #pun-navlinks ul ul li:hover ul, #pun-navlinks ul ul ul li:hover ul, #pun-navlinks ul li.iehover ul, #pun-navlinks ul ul li.iehover ul, #pun-navlinks ul ul ul li.iehover ul {display: block;} #pun-navlinks ul ul ul li:first-child a:after {content: '';position: absolute;right: -6px;top: 50%;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #444;} #pun-navlinks ul.container li ul#adminUL li ul.adsubnav { right: 289px !important; left: -289px !important; } </style>