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

Поделиться121Сб, 17 Мар 2012 11:40:23

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

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

Instagram drumman.1

Поделиться122Чт, 19 Апр 2012 21:10:49

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

Установил скрипт выпадающего меню для навигации, ссылки переместились вразброс. Как уравновесить?

0

Поделиться123Чт, 19 Апр 2012 21:18:36

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

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

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

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

0

Instagram drumman.1

Поделиться124Чт, 19 Апр 2012 21:21:48

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

http://visitorfriend.ru/

0

Поделиться125Чт, 19 Апр 2012 21:44:17

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

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

Код:

<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

Instagram drumman.1

Поделиться126Чт, 19 Апр 2012 21:45:50

Автор: RUSSIAN_GOBLIN
Cтарожил
Зарегистрирован: Пн, 8 Окт 2007
Сообщений: 2554
Уважение: +708
Позитив: +596
Пол: Мужской
Последний визит:
Вт, 5 Окт 2021 21:21:25

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

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

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

0

Поделиться127Чт, 19 Апр 2012 21:57:39

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

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

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

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

0

Поделиться128Чт, 19 Апр 2012 21:58:37

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

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

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

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

0

Поделиться129Чт, 19 Апр 2012 22:01:21

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

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

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

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

0

Instagram drumman.1

Поделиться130Чт, 19 Апр 2012 22:02:46

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

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

0

Поделиться131Чт, 19 Апр 2012 22:03:37

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

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

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

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

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

0

Поделиться132Чт, 19 Апр 2012 22:16:42

Автор: RUSSIAN_GOBLIN
Cтарожил
Зарегистрирован: Пн, 8 Окт 2007
Сообщений: 2554
Уважение: +708
Позитив: +596
Пол: Мужской
Последний визит:
Вт, 5 Окт 2021 21:21:25

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

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

0

Поделиться133Чт, 19 Апр 2012 22:18:09

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

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

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

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

Код:

<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

Instagram drumman.1

Поделиться134Чт, 19 Апр 2012 22:18:47

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2708
Уважение: +4085
Позитив: +2378
Пол: Мужской
Последний визит:
Пн, 18 Ноя 2024 23:40:35

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

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

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

+1

Instagram drumman.1

Поделиться135Чт, 19 Апр 2012 22:28:33

Автор: Вдумчивый
Заслуженный
Зарегистрирован: Чт, 5 Янв 2012
Сообщений: 631
Уважение: +82
Позитив: +156
Пол: Мужской
Последний визит:
Ср, 6 Сен 2023 17:48:26

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

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

http://visitorfriend.ru/