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

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

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


Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню


Создаем выплывающее меню

Сообщений 121 страница 140 из 144

121

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

можешь еще сделать так, чтобы не налезали друг на друга пункты меню ( при выпадении (двойном)

ты про то, что правый блок наезжает на левый? если да, то в этой строке стиля выставь значение отступа 175

/* 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: 175px;}

0

122

Установил скрипт выпадающего меню для навигации, ссылки переместились вразброс. Как уравновесить?
http://s019.radikal.ru/i611/1204/ce/349f080ed38f.jpg

0

123

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

Как уравновесить?

дайте ссылку на форум

0

124

http://visitorfriend.ru/

0

125

Вдумчивый
попробуйте вот такой стиль меню

Код:
<style type="text/css">
#pun-navlinks{display: block;position: relative;z-index: 9999;opacity: 0.9;filter: alpha(opacity=90);}
#pun-navlinks ul li {margin: 0px 10px 0px 0px;float: left;display: inline;list-style: none;position: relative;height: 24px;padding-left: 25px;padding-right: 0.4em;}
#pun-navlinks ul ul {padding: 0px 0px 12px 0px;width: 175px;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: 164px;float: left;display: block !important;text-align:center;}
/* 2nd Menu */
#pun-navlinks ul li:hover li a, #pun-navlinks ul li.iehover li a {float: none;color: #fff;}
#pun-navlinks ul ul ul li:first-child a:after {content: '';position: absolute;left: -6px;top: 50%;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #444;}
/* 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;font-weight:bold;text-transform: uppercase;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;}
/* 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: 175px;}
#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;}
</style>

0

126

Вдумчивый, нажмите на кнопочку указанную на скрине:

http://uploads.ru/t/m/G/h/mGhQ2.png

Вдумчивый, похоже у вашего монитора разрешение 800*600. Увеличьте его.

Отредактировано RUSSIAN_GOBLIN (Чт, 19 Апр 2012 21:47:38)

0

127

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

Вдумчивый
попробуйте вот такой стиль меню

Ничего не получается..., все по прежнему. А куда предложенный скрипт вставить?

0

128

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

Вдумчивый, похоже у вашего монитора разрешение 800*600. Увеличьте его.

Я думал про это... Но это кому как. ^^

0

129

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

А куда предложенный скрипт вставить?

это скрипт, а код стиля, соответственно в html-верх

0

130

Все по старому...

0

131

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

это скрипт, а код стиля, соответственно в html-верх

Так вот: ничего не изменилось почему-то...
http://visitorfriend.ru/

Отредактировано Вдумчивый (Чт, 19 Апр 2012 22:04:26)

0

132

Romych, надо уменьшить расстояние между пунктами меню, мож тогда влезут...

Отредактировано RUSSIAN_GOBLIN (Чт, 19 Апр 2012 22:16:52)

0

133

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

ничего не изменилось почему-то...

а так попробуйте, замените предыдущий код на этот

Код:
<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: 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 {
  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: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: 175px;}
#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;}
</style>

0

134

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

надо уменьшить расстояние между пунктами меню, мож тогда влезут...

дык, я уже уменьшил

+1

135

Romych, спасибо, вроде все выравнилось, но сейчас другая проблема - одновременно выезжают 2 контейнерадруг на друга , в середине которых полоска. Что это такое?

Вот что вышло:

http://s019.radikal.ru/i631/1204/cf/7959589bb569.jpg
http://visitorfriend.ru/

0

136

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

#pun-navlinks ul li ul {
  width: 175px;
  display: none;
  position: absolute;
  z-index: 90;

z-index похоже надо сделать больше.

0

137

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

z-index похоже надо сделать больше.

Думаете? Проверим...

0

138

Ничего не изменилось... Наезжают друг на друга...

Отредактировано Вдумчивый (Чт, 19 Апр 2012 22:38:31)

0

139

Вдумчивый,  если сделать равным 10000 может и не будет полосы...

0

140

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

Наезжают друг на друга...

Гостю не видно... Скрин бы.

0


Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню