Выпадающее меню

Поделиться1Вт, 23 Авг 2011 01:40:01

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

Мне нужна помощь. не могу разобраться я с этотими кодами, хоть убейте.
Нужно вот такое меню

(которое на шапке)
Прошу меня не посылать в темы с кодом этого меню, я уже сто раз его перечитала и ничего у меня не получается. Помогите для этого форума http://fatariya.ru/ сделать меню.
хотелось бы чтобы оно было наверху. (в самом) вот в таком виде.

фон выпадающего меню вот такое

И обьясните ~~как блондинке,~~ как "развлетвлять ссылки".

Отредактировано Swetynasty (Вт, 23 Авг 2011 16:45:24)

0

Поделиться2Вт, 23 Авг 2011 01:54:08

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

вот что то типа того...

0

Поделиться3Вт, 23 Авг 2011 12:10:22

Автор: Jack Ketch
Заслуженный
Зарегистрирован: Вт, 21 Июн 2011
Сообщений: 45
Уважение: +4
Позитив: -2
Последний визит:
Пн, 2 Ноя 2015 20:08:58

Swetynasty
Может уберете скрытый текст?)
Вам сделать его по клику или при наведении?

0

Поделиться4Вт, 23 Авг 2011 16:45:53

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

Jack Ketch написал(а):

Вам сделать его по клику или при наведении?

думаю при наведении

0

Поделиться5Вт, 23 Авг 2011 17:33:22

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Swetynasty
Здравствуйте.

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

Мне нужна помощь. не могу разобраться я с этотими кодами, хоть убейте.Нужно вот такое меню

Код:

<style type="text/css"> 
#menu-css {
  margin: 0; 
  padding: 0; 
}
 
#menu-css li { 
  display: inline-block;
  padding: 0.5em;
  margin: 1em 2% 1em auto;
  width: 120px;
  border: 1px solid #000;
  background-color: #ffffcc;
  text-align: center;
}
 
#menu-css li ul { 
  position: absolute; 
  margin-top: 5px;
  margin-left: -6px;
  z-index: 1000;
  display: none; 
  width: 130px;
  padding: 0 !important;
}
 
#menu-css li:hover ul {
  display: block;
}
 
#menu-css li li {
  display: block;
  float: none;
  width: 100%;
  padding: 0.5em 0 ;
  background-color: #ffffcc;
  border-style: none;
  margin: 0;
}
 
#menu-css li li:hover {
  position: relative;
  z-index: 1000;
  background-color: #ffffcc;
}
</style>

<ul id="menu-css"> 
 <li> 
  Один
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
  Два
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
  Три
    <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
  Четыре
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
</ul>

Цвета подберёте сами.

0

Поделиться6Вт, 23 Авг 2011 17:56:19

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

rps, эм... я хотела не цвета, а картинки.

0

Поделиться7Вт, 23 Авг 2011 18:12:57

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Swetynasty
Ну впишите вместо слов

Код:

<img src="Адрес изображения" alt="image" />

Цвета везде поставьте transparent.

0

Поделиться8Вт, 23 Авг 2011 18:49:33

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

rps, ага вот попытка

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

0

Поделиться9Вт, 23 Авг 2011 18:58:53

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

Да и еще, как сделать фон выпадающего меню, картинкой?
я вот так сделала

Код:

  background-image: url("http://forumupload.ru/uploads/000d/a3/05/53-1.jpg";)

не реагирует.

0

Поделиться10Вт, 23 Авг 2011 19:32:39

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Swetynasty

Код:

<style type="text/css"> 
#menu-css {
  margin: 0; 
  padding: 0; 
  position: relative;
  z-index: 1000;
  width: 920px;
}
 
#menu-css li { 
  display: inline-block;
  padding: 0;
  margin: 1em -5px 1em 0;
  border-style: none;
  background-color: transparent;
  text-align: center;
}
 
#menu-css li ul { 
  position: absolute; 
  z-index: 1000;
  display: none; 
  width: 150px;
  padding: 0 !important;
}
 
#menu-css li:hover ul {
  display: block;
}
 
#menu-css li li {
  display: block;
  float: none;
  width: 100%;
  padding: 0.5em 0;
  background-image: url(http://forumupload.ru/uploads/000d/a3/05/53-1.jpg);
  border-style: none;
  margin: 0;
}
 
#menu-css li li:hover {
  position: relative;
  z-index: 1000;
  background-color: ;
}
</style>

<ul id="menu-css"> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/50-1.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/51-1.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/51-2.jpg" alt="image" />
    <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/52-1.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
<li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/52-2.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 

 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/52-3.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
</ul>

0

Поделиться11Вт, 23 Авг 2011 19:42:30

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Сегодня 00:00:20

Код:

	<style type="text/css"> 
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 700; left: 500px; top: 250px
}
</style>
<style type="text/css"> 
#menu-css {
  margin: 100; 
  padding: 100; 
}
 
#menu-css li { 
  display: inline-block;
  padding: 0.2em;
  margin: 1em 2% 1em auto;
  width: 110px;
  border: 0px solid #000;
  background-color: transparent;
  text-align: center;
}
 
#menu-css li ul { 
  position: absolute;
  background:#fff;
  margin-top: 5px;
  margin-left: -6px;
  z-index: 1000;
  display: none; 
  width: 130px;
  padding: 0 !important;
}
 
#menu-css li:hover ul {
  display: block;
}
 
#menu-css li li {
  display: block;
  float: none;
  width: 100%;
  padding: 0.5em 0 ;
  background-image: url("http://forumupload.ru/uploads/000d/a3/05/53-1.jpg";)
  border-style: none;
  margin: 0;
}
 
#menu-css li li:hover {
  position: relative;
  z-index: 1000;
  background-color: ;
}
</style>

> Временно вставил > background:#fff;

0

Поделиться12Ср, 24 Авг 2011 12:56:27

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

rpsспасибо
Deff кривовото получилось. Они друг на друга ложилися..

Как цвет буков поменять??
И как сделать так чтобы главное меню(форум, участники...) не уезжало вниз

0

Поделиться13Чт, 25 Авг 2011 16:47:23

Автор: Swetynasty
Заслуженный
Зарегистрирован: Пн, 28 Июн 2010
Сообщений: 284
Уважение: +3
Позитив: +77
Пол: Женский
Последний визит:
Сб, 22 Авг 2020 19:23:36

0

Поделиться14Пт, 26 Авг 2011 23:43:33

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

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

Как цвет буков поменять??

Код:

<style type="text/css"> 
#menu-css {
  margin: 0; 
  padding: 0; 
  position: relative;
  z-index: 1000;
  width: 920px;
}
 
#menu-css li { 
  display: inline-block;
  padding: 0;
  margin: 1em -5px 1em 0;
  border-style: none;
  background-color: transparent;
  text-align: center;
}
 
#menu-css li ul { 
  position: absolute; 
  z-index: 1000;
  display: none; 
  width: 150px;
  padding: 0 !important;
}
 
#menu-css li:hover ul {
  display: block;
}
 
#menu-css li li {
  display: block;
  float: none;
  width: 100%;
  padding: 0.5em 0;
  background-image: url(http://forumupload.ru/uploads/000d/a3/05/53-1.jpg);
  border-style: none;
  margin: 0;
  color: #fff;
}
 
#menu-css li li:hover {
  position: relative;
  z-index: 1000;
  background-color: ;
}
</style>

<ul id="menu-css"> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/50-1.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/51-1.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/51-2.jpg" alt="image" />
    <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/52-1.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
<li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/52-2.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 

 <li> 
<img src="http://forumupload.ru/uploads/000d/a3/05/52-3.jpg" alt="image" />
  <ul> 
   <li>Подсказка 1</li> 
   <li>Подсказка 2</li> 
   <li>Подсказка 3</li> 
   <li>Подсказка 4</li> 
   <li>Подсказка 5</li> 
   <li>Подсказка 6</li> 
  </ul> 
 </li> 
</ul>

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

И как сделать так чтобы главное меню(форум, участники...) не уезжало вниз

Первое окно стиля:

/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}

#pun-title table {background-image : url(-);
border: none;
height: 450[px;
width: 100%;
}

Вместо выделенного поставьте меньшее значение. Например, 370.

0

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

Меню навигации

Пользовательские ссылки

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

Выпадающее меню

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

Поделиться1Вт, 23 Авг 2011 01:40:01

Поделиться2Вт, 23 Авг 2011 01:54:08

Поделиться3Вт, 23 Авг 2011 12:10:22

Поделиться4Вт, 23 Авг 2011 16:45:53

Поделиться5Вт, 23 Авг 2011 17:33:22

Поделиться6Вт, 23 Авг 2011 17:56:19

Поделиться7Вт, 23 Авг 2011 18:12:57

Поделиться8Вт, 23 Авг 2011 18:49:33

Поделиться9Вт, 23 Авг 2011 18:58:53

Поделиться10Вт, 23 Авг 2011 19:32:39

Поделиться11Вт, 23 Авг 2011 19:42:30

Поделиться12Ср, 24 Авг 2011 12:56:27

Поделиться13Чт, 25 Авг 2011 16:47:23

Поделиться14Пт, 26 Авг 2011 23:43:33