Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


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


Уменьшить размеры выпадающего меню и размеры панели навигации.

Сообщений 1 страница 20 из 27

1

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

http://file-up.net/big_9b567b01edabf45c4c20140109164512.jpg

http://visitorfriend.ru/

0

2

Вдумчивый написал(а):

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

Размер выпадающего меню первый уровень:

Общий размер всего блока:

#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;}

+1

3

kolobdur74, спасибо! Примерно разобрался с этими размерами. Но..., не могу настроить следующее:

http://file-up.net/big_6c3cb56307d4a3cfec20140109172501.jpg

Уж слишком между выпадающими меню большое расстояние. Не могу отрегулировать.... А крайнее меню упирается  в край таблицы форума - не видно ничего что там... :dontknow:

http://visitorfriend.ru/

Отредактировано Вдумчивый (Чт, 9 Янв 2014 20:34:58)

0

4

Вдумчивый написал(а):

Уж слишком между выпадающими меню большое расстояние. Не могу отрегулировать....

Вы изменили размер для первого уровня, но не изменили здесь:

#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;
}

0

5

kolobdur74 написал(а):

Да и еще забыл вам сказать - там вам линии мешают, попробуйте добавить:

Добавить куда -  в дополнение к скрипту? :flag:

0

6

kolobdur74 написал(а):

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)

0

7

kolobdur74 Оставил как было... Конкретных шагов не наблюдается, к сожалению... :dontknow:

0

8

Вдумчивый написал(а):

Добавить куда -  в дополнение к скрипту?

Туда же внутрь тегов: <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>

+1

9

kolobdur74 написал(а):

У них размер должен быть меньше, а у вас больше..Вот поправил и добавил, попробуйте в таком виде поставить:

Во, уже лучше!!! Спасибо, дружище! Только все равно упирается меню в край форума...Что-то, явно не то. :dontknow:

0

10

Вдумчивый написал(а):

Во, уже лучше!!! Спасибо, дружище! Только все равно упирается меню в край форума...Что-то, явно не то.

Это из-за Администрирования - у остальных пользователей отображение нормальное..
Потому что открывается влево - для Администрирования надо делать открытие вправо..

Замените этот код:

#userpol, #userpol li, #userpol li ul {
z-index: 1000;
}

На:

#userpol, #userpol li, #userpol li ul {
z-index: 1000 !important;
}

0

11

kolobdur74, гляньте, пожалуйста... - вроде сдвигов больших не намечается - по прежнему упирается в край...Хотя, уже намного лучше!

http://visitorfriend.ru/

0

12

kolobdur74, извините за беспокойство, я вам порядком поднадоел. Оставим в сторону наши проблемы...Спасибо и пока. http://forumupload.ru/uploads/0000/14/1c/346394-1.gif

Вдумчивый написал(а):

kolobdur74, гляньте, пожалуйста...

Глянуть может только админ...

0

13

Вдумчивый написал(а):

вроде сдвигов больших не намечается - по прежнему упирается в край...Хотя, уже намного лучше!

Ну, попробуйте такой вариант:

Код:
<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>

Когда поставите сделайте скриншот..

0

14

kolobdur74 написал(а):

Ну, попробуйте такой вариант:

То, что надо! Хотя...- наезжает... На крайнем спойлере не видно ссылок.

http://file-up.net/big_2bcae4a7f4bfb8046920140113112053.jpg

http://visitorfriend.ru/

Отредактировано Вдумчивый (Пн, 13 Янв 2014 14:28:27)

0

15

Попробуйте здесь увеличить отступ:

kolobdur74 написал(а):

#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;}

0

16

kolobdur74, а как сделать с голубыми полосками, как здесь на форуме, очень красиво. :flag:


http://file-up.net/big_5f1ab1a179a8a6c38120140113122753.jpg

0

17

kolobdur74 написал(а):

Попробуйте здесь увеличить отступ:

Никакого толку... , опускается вниз и все. Поставил 300 px, уж куда больше... :dontknow:

0

18

Вдумчивый написал(а):

а как сделать с голубыми полосками, как здесь на форуме, очень красиво.

Вдумчивый написал(а):

Никакого толку... , опускается вниз и все. Поставил 300 px, уж куда больше...

Сейчас мне надо убежать - давайте сделаем так: выложите полный код выпадающего меню, который у вас есть, а я полностью сделаю нормально у себя на тестовом и выложу вам готовый сегодня вечером или завтра..Хорошо? Сделать как на форуме техподдержки?

0

19

kolobdur74 написал(а):

Сделать как на форуме техподдержки?

Да!

kolobdur74 написал(а):

выложите полный код выпадающего меню

Пост 13.  (Или это не полный...Как он должен выглядеть - хрен его знает.)

Отредактировано Вдумчивый (Вт, 14 Янв 2014 08:39:58)

0

20

Вдумчивый
Вообщем вот, тестируйте:

Код:
<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>

+1


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