Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Lediboss в Ср 27 Июн - 3:54

Здравствуйте. Никак не получается сделать кнопки основного меню (пока только дополнительные), чтобы у них выпадало разворачивающее меню..перепробовала много вариантов (с вашего форума), но не получается. Пробовала так последний раз. Подскажите как сделать? cray Кнопка "Download" - в конце меню


Последний раз редактировалось: Lediboss (Ср 27 Июн - 6:25), всего редактировалось 1 раз(а)

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Ср 27 Июн - 6:24

Попробовала сделать кнопки дополнительного меню. Две текстовых получились, а вот кнопка "Новости" не раскрывает подменю. Всё проверила.

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Ср 27 Июн - 10:20

Сейчас ни одна кнопка не работает. Нужно видеть код самих доп. пунктов, которые Вы добавляете.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Ср 27 Июн - 12:05

Спасибо! По первой кнопке "Download" брала Здесь
В хтмл вставила не всё - так мне нужна одна кнопка, а там было несколько - может тут и ошиблась?
Код:
<ul id="menu_p">
<ul>
<li><a href="http://contacts.rambler.ru">Контакт</a></li>
<li><a href="http://nichrome.rambler.ru">nichrome</a></li>
<li><a href="http://icq.rambler.ru">АськаICQ</a></li>
<li><a href="http://firefox.rambler.ru">firefox</a></li>
</ul>
а в css вторую большую таблицу.Всё сохранила.
По кнопке №2 (Новости) - создала новую страницу скрипта и туда поставила вот этот
Код:
jQuery(document).ready(function(){

jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
return false
});

});

а в CSS вот это
Код:
.titl_link {
display:inline-block;
position: relative;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
z-index: 999;
}

/* Кнопка меню */
.upp, .upp2 {
text-align:center;
margin-bottom: 10px;
margin-right: 3px;
}

/* Разворачивающаяся панель */
.slide_link {
display: none;
width: 200px;
border: 2px solid #006699;
background-color:#fff;
position: absolute;
z-index: 999;
top: 27px;
}

/* Ссылки на разворачивающейся панели */
.slide_link a {
display: block;
background-color:#eee;
padding: 2px 5px 2px;
margin-bottom: 5px;
}

/* Ссылки на разворачивающейся панели при наведении */
.slide_link a:hover {
background-color: #006699;
color: #fff;
}


Которые у меня получились текстом "Голосуем" и "My Lands" я тоже хочу в кнопки превратить, но пока не добью хотя бы одну, то пусть будет так. И немного непонятно как кнопку поставить вместо ссылки "My Lands"
В шаблон overall_header поставила после этого
<div id="page-body">
Вот это

<div id="twomenu">

<div class="titl_link">
<a href="#" class="upp"><img src="http://img-fotki.yandex.ru/get/6214/33959814.9/0_764ab_30e224f8_M.jpg" alt="Новости" title="Новости" /></a>
<div class="slide_link">
<a href="Моя ссылка">Все соцсети</a>
<a href="Моя ссылка">Твиттер</a>
<a href="Моя ссылка">В долларах</a>
</div></div>

<div class="titl_link">
<a href="http://mlgame.ru/?bonus=2265118" class="upp2">Играть My Lands</a>
</div></div>

<div class="titl_link">
<a href="http://wp.me/p1sdXV-2I" class="upp2">Голосуем</a>
</div></div>

</div>

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Чт 28 Июн - 19:42

Дана мне кто-нибудь поможет?

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Пт 29 Июн - 19:10

То есть у Вас код и скрипт от одного варианта меню, а CSS - от другой.
Удаляйте все. Проще переделать, чем исправлять.

Итак, у Вас должны быть кнопки:

"Download"
которая разворачивает блок
<a href="http://contacts.rambler.ru">Контакт</a>
<a href="http://nichrome.rambler.ru">nichrome</a>
<a href="http://icq.rambler.ru">АськаICQ</a>
<a href="http://firefox.rambler.ru">firefox</a>

"Новости"
которая разворачивает блок
<a href="Моя ссылка">Все соцсети</a>
<a href="Моя ссылка">Твиттер</a>
<a href="Моя ссылка">В долларах</a>

Так?

Кнопки
"Играть My Lands"
"Голосуем"
ничего разворачивать не должны?
Тогда добавляйте их через ПА: http://help.forum2x2.ru/t11217-topic#100775



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Пт 29 Июн - 19:38

Спасибо! Да это должно быть так:
"Download"
которая разворачивает блок
Код:
<a href="http://contacts.rambler.ru">Контакт</a>
<a href="http://nichrome.rambler.ru">nichrome</a>
<a href="http://icq.rambler.ru">АськаICQ</a>
<a href="http://firefox.rambler.ru">firefox</a>
"Новости"
которая разворачивает блок
Код:
<a href="Моя ссылка">Все соцсети</a>
<a href="Моя ссылка">Твиттер</a>
<a href="Моя ссылка">В долларах</a>
А про кнопки "Играть My Lands" "Голосуем" я поняла и добавлю, как вы посоветовали через ПА. Вы мне датите готовы код на первые две кнопки?

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Dana Domirani в Пт 29 Июн - 20:52

1. В шаблон overall_header (Верхняя часть страницы) после {GENERATED_NAV_BAR} ставите код:
Код:
<ul id="menu_p">
  <li>
      <a href="#">Download</a>
      <ul>
        <li><a href="http://contacts.rambler.ru">Контакт</a></li>
        <li><a href="http://nichrome.rambler.ru">nichrome</a></li>
        <li><a href="http://icq.rambler.ru">АськаICQ</a></li>
        <li><a href="http://firefox.rambler.ru">firefox</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Новости</a>
      <ul>
        <li><a href="Моя ссылка">Все соцсети</a></li>
        <li><a href="Моя ссылка">Твиттер</a></li>
        <li><a href="Моя ссылка">В долларах</a></li>
      </ul>
  </li>
</ul>
Сохраняете, публикуете (нажав на plus ).

2. В CSS добавляете:
Код:
#menu_p, #menu_p ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
#menu_p {
        width: 100%;
        margin: 2px auto;
        border: 2px solid #DEE3E7;
        background: #111 url(http://hitskin.com/themes/12/59/78/i_back_title.png) repeat-x top center;
        height: 30px;
}
#menu_p:before, #menu_p:after {
        content: "";
        display: table;
}
#menu_p:after {
        clear: both;
}
#menu_p {
        zoom:1;
}
 
#menu_p li {
        float: left;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
        height: 30px;
        line-height: 30px;
}
 
#menu_p a {
        float: left;
        padding: 0 30px;
        color: #fff;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #556B2F;
        outline: none;
        height: 30px;
        line-height: 30px;
}
 
#menu_p li:hover > a {
        color: #666;
        text-shadow: none;
}
 
*html #menu_p li a:hover {
        color: #666;
}
 
#menu_p ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 28px;
        left: 0;
        z-index: 999;
        background-color: #688F06;
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}
 
#menu_p li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}
 
#menu_p ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
}
 
#menu_p ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        border-bottom: 1px dashed #ddd;
}

#menu_p ul li:last-child {
        border-bottom: 1px solid #444;
}
 
#menu_p ul a {
        width: 130px;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        outline: none;
        height: 30px;
        line-height: 30px;
}
 
#menu_p ul a:hover {
        background-color: #95C51B;
        border: none;
}
Сохраняете.


А старые настройки CSS для предыдущего меню —
Код:
#menu_p {
        width: 960px;
        margin: 2px auto;
        border: 1px solid #222;
        background-color: #111;
}
#menu_p:before, #menu_p:after {
        content: "";
        display: table;
}
#menu_p:after {
        clear: both;
}
#menu_p {
        zoom:1;
}
 
#menu_p li {
        float: left;
        border-right: 1px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
}
 
#menu_p a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
        outline: none;
}
 
#menu_p li:hover > a {
        color: #00CED1;
}
 
*html #menu_p li a:hover {
        color: #00CED1;
}
 
#menu_p ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 999;
        background: #444;
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}
 
#menu_p li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}
 
#menu_p ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
 
#menu_p ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
 
#menu_p ul li:last-child {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}
 
#menu_p ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        outline: none;
}
 
#menu_p ul a:hover {
        background-color: #111;
}
обязательно удалите!

Если все сделано правильно, появится меню:



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22102
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8886

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Сб 30 Июн - 11:19

Спасибо, Даночка! У меня всё получилось)) 13 Всё работать начало, когда я даже ещё в CSS не добавляла - там правда панелька только чёрная была. А когда добавила, то стала по цвету форума) Вы умничка! Сейчас ещё с кнопками теми двумя разберусь. Если не трудно ещё тут же напишите правильные последовательные действия для отдельной кнопки к главному меню (а то рыть форум опять не хочется)
Код:
http://mlgame.ru/?bonus=2265118">Играть My Lands</a>

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Сб 30 Июн - 11:22

И ещё Дана: можно как-то сделать, чтобы подпункты в раскрывающемся меню открывались не на этой странице форума, а открывали новую?

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

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

Сообщение автор molniya в Сб 30 Июн - 13:27

Замени код этот
Код:
<a href="http://contacts.rambler.ru">Контакт</a>

на этот
Код:
<a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>
и тогда будет открыватсся в другом окне.

molniya
 

Мужчина

Сообщения : 1071
Регистрация : 2010-11-15
Благодарности : 165

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор molniya в Сб 30 Июн - 13:30

Дана скажите пожалуйста, а как добавить дополнительные кнопки к этому меню, например после слово НОВОСТИ я немогу добавить ещё пару кнопок. Подскажите пожалуйста как это сделать, а то у меня что то не получилось.

molniya
 

Мужчина

Сообщения : 1071
Регистрация : 2010-11-15
Благодарности : 165

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Lediboss в Сб 30 Июн - 23:47

Спасибо! у меня получилось)

Lediboss
 

Женщина

Сообщения : 39
Возраст : 59
Регистрация : 2008-07-14
Благодарности : 0

Без предупреждений

http://inkognito.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения