Ребята, помогите уменьшить размеры выпадающего меню и размеры панели навигации.

Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Уменьшить размеры выпадающего меню и размеры панели навигации.
Ребята, помогите уменьшить размеры выпадающего меню и размеры панели навигации.

Ребята, помогите уменьшить размеры выпадающего меню и размеры панели навигации.
Размер выпадающего меню первый уровень:
Общий размер всего блока:
#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;}
kolobdur74, спасибо! Примерно разобрался с этими размерами. Но..., не могу настроить следующее:

Уж слишком между выпадающими меню большое расстояние. Не могу отрегулировать.... А крайнее меню упирается в край таблицы форума - не видно ничего что там...
Отредактировано Вдумчивый (Чт, 9 Янв 2014 20:34:58)
Уж слишком между выпадающими меню большое расстояние. Не могу отрегулировать....
Вы изменили размер для первого уровня, но не изменили здесь:
#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;
}
Да и еще забыл вам сказать - там вам линии мешают, попробуйте добавить:
Добавить куда - в дополнение к скрипту? 
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)
kolobdur74 Оставил как было... Конкретных шагов не наблюдается, к сожалению... 
Добавить куда - в дополнение к скрипту?
Туда же внутрь тегов: <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>У них размер должен быть меньше, а у вас больше..Вот поправил и добавил, попробуйте в таком виде поставить:
Во, уже лучше!!! Спасибо, дружище! Только все равно упирается меню в край форума...Что-то, явно не то. 
Во, уже лучше!!! Спасибо, дружище! Только все равно упирается меню в край форума...Что-то, явно не то.
Это из-за Администрирования - у остальных пользователей отображение нормальное..
Потому что открывается влево - для Администрирования надо делать открытие вправо..
Замените этот код:
#userpol, #userpol li, #userpol li ul {
z-index: 1000;
}
На:
#userpol, #userpol li, #userpol li ul {
z-index: 1000 !important;
}
kolobdur74, гляньте, пожалуйста... - вроде сдвигов больших не намечается - по прежнему упирается в край...Хотя, уже намного лучше!
kolobdur74, извините за беспокойство, я вам порядком поднадоел. Оставим в сторону наши проблемы...Спасибо и пока.
kolobdur74, гляньте, пожалуйста...
Глянуть может только админ...
вроде сдвигов больших не намечается - по прежнему упирается в край...Хотя, уже намного лучше!
Ну, попробуйте такой вариант:
<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>Когда поставите сделайте скриншот..
Ну, попробуйте такой вариант:
То, что надо! Хотя...- наезжает... На крайнем спойлере не видно ссылок.

Отредактировано Вдумчивый (Пн, 13 Янв 2014 14:28:27)
Попробуйте здесь увеличить отступ:
#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;}
kolobdur74, а как сделать с голубыми полосками, как здесь на форуме, очень красиво.

Попробуйте здесь увеличить отступ:
Никакого толку... , опускается вниз и все. Поставил 300 px, уж куда больше... 
а как сделать с голубыми полосками, как здесь на форуме, очень красиво.
Никакого толку... , опускается вниз и все. Поставил 300 px, уж куда больше...
Сейчас мне надо убежать - давайте сделаем так: выложите полный код выпадающего меню, который у вас есть, а я полностью сделаю нормально у себя на тестовом и выложу вам готовый сегодня вечером или завтра..Хорошо? Сделать как на форуме техподдержки?
Сделать как на форуме техподдержки?
Да!
выложите полный код выпадающего меню
Пост 13. (Или это не полный...Как он должен выглядеть - хрен его знает.)
Отредактировано Вдумчивый (Вт, 14 Янв 2014 08:39:58)
Вдумчивый
Вообщем вот, тестируйте:
<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>Вы здесь » Единый форум поддержки » Архив » Уменьшить размеры выпадающего меню и размеры панели навигации.