Выпадающее меню для форума

Поделиться381Чт, 27 Янв 2011 23:29:49

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5812
Позитив: +6438
Пол: Мужской
Последний визит:
Вс, 5 Май 2024 22:04:40

Выпадающее меню при наведении курсора с несколькими пунктами (вставлять в HTML верх)
Пример на двух пунктах меню - возможность сколько влезет:

<BR>
<BR>
<BR>
<div style="position: absolute; left:40px; top:0px;">
<table>
<tr>
<td valign="top">

<div style="border:solid 1px black; background-color:#002233;" onmouseover="menu1.style.display='block';"

onmouseout="menu1.style.display='none';"><p style="color:LightCyan;">Название вашего меню 1<br>
компьютере</p>

<div style="line-height:165%; display:none; border:solid 0px green; background-color:LightCyan;" id="menu1" >
<a href="Ваша ссылка 1">Ваше название 1</a><br>
<a href="Ваша ссылка 2">Ваше название 2</a><br>
<a href="Ваша ссылка 3">Ваше название 3</a><br>
</div>
</div>
</td>
<td valign="top">

<div style="border:solid 1px black; background-color:#002233;" onmouseover="menu2.style.display='block';"

onmouseout="menu2.style.display='none';"><p style="color:LightCyan;">Название вашего меню 2</p><br>

<div style="line-height:165%; display:none; border:solid 1px green; background-color:LightCyan;" id="menu2" >
<UL type="">
<LI><a href="Ваша ссылка 4">Ваше название 4</a></LI>
<LI><a href="Ваша ссылка 5">Ваше название 5</a></LI>
<LI><a href="Ваша ссылка 6">Ваше название 6</a></LI>
</UL>
</div>
</div>
</td>

и т.д.
в конце ставите:
</tr>
</table>
</div>

Где: красным отмечен отступ вашего форума для общего меню;
коричневым - отступ с левого края всех меню;
фиолетовым - цвет фона вашего конкретного меню (для остальных надо дублировать);
голубым - цвет названия вашего данного меню (для остальных надо дублировать);
синим - цвет фона подменю (для остальных надо дублировать);
и зеленым отмечены толщина и цвет границы меню и подменю (border:solid 1px black; и border:solid 0px green; соответственно);
line-height:165%; - высота строк подменю; (дублировать для других меню тоже надо)

Вот мой скрипт в оригинале первых двух меню для сравнения:

<BR>
<BR>
<BR>
<div style="position: absolute; left:40px; top:0px;">
<table>
<tr>
<td valign="top">

<div style="border:solid 1px black; background-color:#002233;" onmouseover="menu1.style.display='block';"

onmouseout="menu1.style.display='none';"><p style="color:LightCyan;">Все о персональном<br>
компьютере</p>

<div style="line-height:165%; display:none; border:solid 0px green; background-color:LightCyan;" id="menu1" >
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=22">Персональные компьютеры</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=23">Платформы</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=2">Видеокарты</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=24">Мониторы</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=25">Периферия и комплектующие</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=3">Windows и системное ПО</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=26">Альтернативное ПО</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=37">Ноутбуки, нетбуки, планшеты <br>и другие девайсы</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=16">Компьютерные услуги</a><br>
<a href="http://digitalferrum.bbmy.ru/viewforum.php?id=7">Разное</a>
<br>
</div>
</div>
</td>
<td valign="top">

<div style="border:solid 1px black; background-color:#002233;" onmouseover="menu2.style.display='block';"

onmouseout="menu2.style.display='none';"><p style="color:LightCyan;">Планета Игр</p><br>

<div style="line-height:165%; display:none; border:solid 1px green; background-color:LightCyan;" id="menu2" >
<UL type="">
<LI><a href="http://digitalferrum.bbmy.ru/viewforum.php?id=28">Анонс !!!</a></LI>
<LI><a href="http://digitalferrum.bbmy.ru/viewforum.php?id=27">Игровой Портал</a></LI>
</UL>
</div>
</div>
</td>
</tr>
</table>
</div>

Посмотреть пример можно здесь: http://digitalferrum.bbmy.ru/

Отредактировано kolobdur74 (Пт, 28 Янв 2011 01:07:48)

0

Поделиться382Сб, 29 Янв 2011 13:58:53

Автор: Squirrel
Заслуженный
Зарегистрирован: Чт, 18 Мар 2010
Сообщений: 11
Уважение: +3
Позитив: 0
Пол: Женский
Последний визит:
Вт, 8 Мар 2011 11:27:49

Скажите, пожалуйста, а как настраивается расстояние между контейнерами?
Чтобы контейнеры были не как тут, а с промежутками между собой?
Заранее спасибо.

0

Поделиться383Сб, 29 Янв 2011 14:18:08

Автор: Kven
Заслуженный
Зарегистрирован: Сб, 24 Апр 2010
Сообщений: 35
Уважение: +9
Позитив: +3
Пол: Мужской
Последний визит:
Вс, 7 Июл 2013 20:23:26

Squirrel, расстояние между форумами или категориями? О каких контейнерах идёт речь?
Если можете, сделайте скрин и отметьте.

0

Поделиться384Сб, 29 Янв 2011 14:34:05

Автор: Squirrel
Заслуженный
Зарегистрирован: Чт, 18 Мар 2010
Сообщений: 11
Уважение: +3
Позитив: 0
Пол: Женский
Последний визит:
Вт, 8 Мар 2011 11:27:49

Kven, между _контейнерами_ из скрипта из первого сообщения.

0

Поделиться385Вс, 30 Янв 2011 15:26:45

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

http://gossip.rolbb.ru/
как сделать так, что бы при нажатии на кнопку, все не перескакивало в самый вверх?(

уже не нужно

Отредактировано Blonda (Вс, 30 Янв 2011 15:33:32)

0

Поделиться386Вс, 30 Янв 2011 16:30:58

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

Blonda написал(а):
как сделать так, что бы при нажатии на кнопку, все не перескакивало в самый вверх?(

Код:

<!-- Таблица 00 -->
<style>	
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 200px;
text-align: center;
font-size: 12px;
width: 720px;
}

.submenutext {
color: #fff;
display: none; 
height: 60px;
}


#MenuTxT {
 background:url(http://savepic.ru/2287761.png) no-repeat center;
text-shadow: #755a57 1px 1px 5px,#9C816C -1px -1px 5px,#91776b  1px 1px 1px;
}
</style>

<center><table style="width: 723px;">
 <tbody>
  <tr>
   <td>
    <div id="menu"> <b>
<span alt=#sm1 "style="cursor: pointer;">Кнопка 1</span>
<span alt=#sm2 "style="cursor: pointer;">Кнопка 2</span>
<span alt=#sm3 "style="cursor: pointer;">Кнопка 3</span>
<span alt=#sm4 "style="cursor: pointer;">Кнопка 4</span>
<span alt=#sm5 "style="cursor: pointer;">Кнопка 5</span>
           </b>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
Контент 1-й кнопки
</div>
     <div id="sm2" class="submenutext"><br /><br />

Контент 2-й кнопки
</div>
     <div id="sm3" class="submenutext"><br /><br />
Контент 3-й кнопки
</div>
     <div id="sm4" class="submenutext"><br /><br />
Контент 4-й кнопки
</div>
     <div id="sm5" class="submenutext"><br /><br />
Контент 5-й кнопки
</div>

</div><!--конец контента кнопок-->
   </td>
</tr>
 </tbody>
</table></center><!-- End/Таблица 00 -->
<script type="text/javascript"><!--Cкрипт Добавки Инфо-блока перед первой категорией -->
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
</script><!--End/Cкрипт Добавки Инфо -->

Отредактировано Deff (Вс, 30 Янв 2011 20:44:04)

0

Поделиться387Вс, 30 Янв 2011 19:49:19

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

Deff
теперь кнопки и не нажимаются дажеее

0

Поделиться388Вс, 30 Янв 2011 20:03:54

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

Blonda
Вы старый скрипт вынули ??
и ставьте код целиком - дайте ссылку на форум с установленным кодом, подскажу, где поправить

0

Поделиться389Вс, 30 Янв 2011 20:37:37

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

Deff
http://gossip.rolbb.ru/
воть)
поставила ваш скрипт)

0

Поделиться390Вс, 30 Янв 2011 20:43:27

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

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

поставила ваш скрипт)

На RusFF свои тараканы

Поменял код скопируйте еще раз

0

Поделиться391Вс, 30 Янв 2011 20:50:53

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

Deff
спасибо) а скажите, как там где коричневое, поставить свою картинку, типа на фон, и там где кнопка 1, кнопка 2 поменять на картинки?)

0

Поделиться392Вс, 30 Янв 2011 20:52:52

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

и что-то я не могу изменить ширину поля (ну там где коричневое) что бы в фон вписывался

0

Поделиться393Вс, 30 Янв 2011 21:17:07

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

Blonda Поставьте своё изображение

#MenuTxT {
background:url(http://savepic.ru/2287761.png) no-repeat center;
text-shadow: #755a57 1px 1px 5px,#9C816C -1px -1px 5px,#91776b 1px 1px 1px;
}

Ширина таблички задается тут >

<center><table style="width: 723px;">

Отредактировано Deff (Вс, 30 Янв 2011 21:17:35)

0

Поделиться394Вс, 30 Янв 2011 21:55:38

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

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

и там где кнопка 1, кнопка 2 поменять на картинки?)

можно?)

0

Поделиться395Вс, 30 Янв 2011 22:29:34

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

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

и там где кнопка 1, кнопка 2 поменять на картинки?)

Blonda
Да,конечно, - делайте у них(картинок) прозрачные уши(или фоновым цветом, тогда не потребуется последущей раздвижки картинок кнопок - если будут большие - обрежите

( у Вас как будто не свой форум и Вы его украли - Эксперименты поощряются - главное - если что случится 0 не выходите с форума - тогда вы всегда можете войти в Админку и временно удалить или отключить объявление
Вот эту ссылку http://gossip.rolbb.ru/admin_index.php --сделайте закладкой

Отредактировано Deff (Вс, 30 Янв 2011 22:32:29)

0

Поделиться396Вс, 30 Янв 2011 22:37:52

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

Deff

блин) я вас совсем не поняла)
в смысле про то, что типа как будто не мой форум)
почему?)
и что случиться может?)
я решила не делать картинки, мне хочется сделать там где слова "кнокпка 1""кнопка 2", слова таким цветом и с тенькю как в основных контейнерах)
как это можно сделать?)
а вот там где основа, наоборот обычный шрифт)

0

Поделиться397Вс, 30 Янв 2011 22:39:51

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

Blonda Ничего не может случится - просто Вы спросили как маленькая девочка у папы( я бы попробовал , потом если не получилось спросил

0

Поделиться398Вс, 30 Янв 2011 22:44:11

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

Deff
а вы не против быть папой, у маленькой девочки, то бишь у меня? :flirt:

вы ответите на мой вопрос?)

0

Поделиться399Вс, 30 Янв 2011 22:48:29

Автор: Blonda
Заслуженный
Зарегистрирован: Пт, 18 Дек 2009
Сообщений: 101
Уважение: 0
Позитив: +7
Последний визит:
Пн, 31 Янв 2011 18:41:37

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

и как вы считаете, дизайн нормальный?)

Отредактировано Blonda (Вс, 30 Янв 2011 22:55:15)

0

Поделиться400Вс, 30 Янв 2011 22:53:37

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Сегодня 14:56:14

#menu span {
padding: 7px 15px 7px;
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
font-size:34px;
color:red;
text-shadow: #FFFFFF 1px 3px 0px;
font-family: "Kunstler Script"!important;
}

Попробуйте добавить в код строки красным(если не понравится -числовые значения кода цвета - цвета и тени и Шрифт -поменяете

Тормозит скорее не таблица -а уходящая картинка в навигации - которая установленная скриптом ( попробуйте временно отключить скрипт картинок в меню навигации

Отредактировано Deff (Вс, 30 Янв 2011 22:56:45)

0

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

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

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

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

Выпадающее меню для форума

Сообщений 381 страница 400 из 560

Поделиться381Чт, 27 Янв 2011 23:29:49

Поделиться382Сб, 29 Янв 2011 13:58:53

Поделиться383Сб, 29 Янв 2011 14:18:08

Поделиться384Сб, 29 Янв 2011 14:34:05

Поделиться385Вс, 30 Янв 2011 15:26:45

Поделиться386Вс, 30 Янв 2011 16:30:58

Поделиться387Вс, 30 Янв 2011 19:49:19

Поделиться388Вс, 30 Янв 2011 20:03:54

Поделиться389Вс, 30 Янв 2011 20:37:37

Поделиться390Вс, 30 Янв 2011 20:43:27

Поделиться391Вс, 30 Янв 2011 20:50:53

Поделиться392Вс, 30 Янв 2011 20:52:52

Поделиться393Вс, 30 Янв 2011 21:17:07

Поделиться394Вс, 30 Янв 2011 21:55:38

Поделиться395Вс, 30 Янв 2011 22:29:34

Поделиться396Вс, 30 Янв 2011 22:37:52

Поделиться397Вс, 30 Янв 2011 22:39:51

Поделиться398Вс, 30 Янв 2011 22:44:11

Поделиться399Вс, 30 Янв 2011 22:48:29

Поделиться400Вс, 30 Янв 2011 22:53:37