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

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

Раскрывающееся меню на HTML странице Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

Правила форума
для обязательного прочтения!

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

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

Я админ, не могу зайти!
(забыл / потерял пароль)

Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы
Последние темы
» ВПН
автор Danny_Marcelo Сегодня в 07:47

» Пропала вкладка "Обработка пользователей"
автор Svet007 Вчера в 07:39

» Как найти администратора?
автор PushPayer Ноябрь 21st 2024, 00:58

» Не корректное отображение картинок
автор VENEFICA. Ноябрь 15th 2024, 14:46

» Не меняется название форума
автор Aviator Ноябрь 14th 2024, 15:40

» Дублируется ссылка на форум в боковом меню
автор Чистый сталкер Октябрь 26th 2024, 21:13

» совет админам
автор лексей2222 Октябрь 23rd 2024, 05:45

» Проблема с гугл из-за Hitskin
автор Вултур Октябрь 21st 2024, 15:43

» [решено]Редактирвоание темы
автор AlexDarkTech Октябрь 13th 2024, 08:14

» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11

Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Раскрывающееся меню на HTML странице

Участников: 4

Бесплатный форум: форум поддержки :: Разное :: Ваши варианты туториалов

Перейти вниз

Раскрывающееся меню на HTML странице Empty Раскрывающееся меню на HTML странице

Сообщение автор Ilya Ноябрь 16th 2012, 00:37

ПА - Модули - Управление HTML страницами - Создать новую

Название указываете свое
Использовать верх низ форума - нет
Код HTML:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html><head>

    <meta name="keywords" content="введите ключевые слова">

            <title>Название страницы</title>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <meta name="description" content="Название страницы">

      <script type="text/javascript" src="http://cool-nestrelaite2010.narod2.ru/jquery-1.js"></script>

      <script type="text/javascript" src="http://cool-nestrelaite2010.narod2.ru/custom.js"></script>

    <script language="javascript">

      document.oncontextmenu = new Function("return false");

    </script>

            <style>

    ul.sdt_menu{
      margin-left:300;
      padding:0;
      list-style: none;
      font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
      font-size:14px;
      width:800px;
    }
    ul.sdt_menu a{
      text-decoration:none;
      outline:none;
    }
    ul.sdt_menu li{
      float:left;
      width:150px;
      height:85px;
      position:relative;
      cursor:pointer;
    }
    ul.sdt_menu li > a{
      position:absolute;
      top:85px;
      left:40px;
      width:150px;
      height:85px;
      z-index:12;
      background:transparent;
      -moz-box-shadow:2px 2px 2px #000 inset;
      -webkit-box-shadow:0px 0px 2px #000 inset;
      box-shadow:0px 0px 2px #000 inset;
    }
    ul.sdt_menu li a img{
      border:none;
      position:absolute;
      width:0px;
      height:0px;
      bottom:0px;
      left:85px;
      z-index:100;
      -moz-box-shadow:0px 0px 4px #000;
      -webkit-box-shadow:0px 0px 4px #000;
      box-shadow:0px 0px 4px #000;
    }
    ul.sdt_menu li span.sdt_wrap{
      position:absolute;
      top:23px;
      left:0px;
      width:150px;
      height:60px;
      z-index:15;
    }
    ul.sdt_menu li span.sdt_active{
      position:absolute;
      background:#111;
      top:85px;
      width:150px;
      height:0px;
      left:0px;
      z-index:14;
      -moz-box-shadow:0px 0px 4px #000 inset;
      -webkit-box-shadow:0px 0px 4px #000 inset;
      box-shadow:0px 0px 4px #000 inset;
    }
    ul.sdt_menu li span span.sdt_link,
    ul.sdt_menu li span span.sdt_descr,
    ul.sdt_menu li div.sdt_box a{
      margin-left:15px;
      text-transform:uppercase;
      text-shadow:2px 2px 1px #000;
    }
    ul.sdt_menu li span span.sdt_link{
      color:#fff;
      font-size:24px;
          font-weight:bold;
      float:left;
      clear:both;
    }
    ul.sdt_menu li span span.sdt_descr{
      color:#fe7800;
      float:left;
      clear:both;
      width:150px; /*For dumbass IE7*/
      font-size:10px;
          font-weight:bold;
      letter-spacing:1px;
    }
    ul.sdt_menu li div.sdt_box{
      display:block;
      position:absolute;
      width:150px;
      overflow:hidden;
      height:150px;
      top:170px;
      left:0px;
      display:none;
      background:#000;
    }
    ul.sdt_menu li div.sdt_box a{
      float:left;
      clear:both;
      line-height:30px;
      color:#FF9000;
    }
    ul.sdt_menu li div.sdt_box a:first-child{
      margin-top:15px;
    }
    ul.sdt_menu li div.sdt_box a:hover{
      color:#fff;
    }
    h3.b {text-shadow: 0 0 0.2em #FF9000, 0 0 0.2em #FF9000}

            span.reference{

                position:fixed;

                left:10px;

                bottom:10px;

                font-size:12px;

            }

            span.reference a{

                color:#ffffff;

                text-transform:uppercase;

                text-decoration:none;

                text-shadow:1px 1px 1px #000;

                margin-right:30px;

            }

            span.reference a:hover{

                color:#ff9000;

            }

            ul.sdt_menu{

                margin-top:40px;

            }

            h1.title{

                text-indent:-9000px;

                width:633px;

                height:69px;

            }

          </style>



        </head>

    <body style="background: url(ссылка на фон) no-repeat scroll center top rgb(0, 0, 0);" 100%"="" height="100%" "="">

          <div class="content">

            <h1 class="title">Название страницы</h1>

            <ul id="sdt_menu" class="sdt_menu">

                <li>

                  <a href="Ссылка на страницу">

                      <img src="Картинка" alt="Текст при отсутствии изображения" />

                      <span class="sdt_active"></span>

                      <span class="sdt_wrap">

                        <span class="sdt_link">Название кнопки</span>

                        <span class="sdt_descr">Комментарий к кнопке</span>

                  </span></a>

                </li>

                <li>

                  <a href="ссылка на страницу">

                      <img src="ссылка на страницу" alt="текст при отсутствии изображения" />

                      <span class="sdt_active"></span>

                      <span class="sdt_wrap">

                        <span class="sdt_link">Название кнопки</span>

                        <span class="sdt_descr">Комментарии к кнопке</span>

                      </span>

                  </a>

                </li>

            </ul>

          </div>

            <div>

          </div>



         

            <script type="text/javascript" src="http://cool-nestrelaite2010.narod2.ru/jquery_002.js"></script>

          <script type="text/javascript" src="http://cool-nestrelaite2010.narod2.ru/jquery.js"></script>

            <script type="text/javascript">

                jQuery(function() {

                    jQuery('#sdt_menu > li').bind('mouseenter',function(){

                  var jQueryelem = jQuery(this);

                  jQueryelem.find('img')

                      .stop(true)

                      .animate({

                        'width':'150px',

                        'height':'150px',

                        'left':'0px'

                      },400,'easeOutBack')

                      .andSelf()

                      .find('.sdt_wrap')

                      .stop(true)

                      .animate({'top':'140px'},500,'easeOutBack')

                      .andSelf()

                      .find('.sdt_active')

                      .stop(true)

                      .animate({'height':'150px'},300,function(){

                      var jQuerysub_menu = jQueryelem.find('.sdt_box');

                      if(jQuerysub_menu.length){

                        var left = '190px';

                        if(jQueryelem.parent().children().length == jQueryelem.index()+1)

                            left = '-150px';

                        jQuerysub_menu.show().animate({'left':left},200);

                      } 

                  });

                }).bind('mouseleave',function(){

                  var jQueryelem = jQuery(this);

                  var jQuerysub_menu = jQueryelem.find('.sdt_box');

                  if(jQuerysub_menu.length)

                      jQuerysub_menu.hide().css('left','0px');

                 

                  jQueryelem.find('.sdt_active')

                      .stop(true)

                      .animate({'height':'0px'},300)

                      .andSelf().find('img')

                      .stop(true)

                      .animate({

                        'width':'0px',

                        'height':'0px',

                        'left':'85px'},400)

                      .andSelf()

                      .find('.sdt_wrap')

                      .stop(true)

                      .animate({'top':'25px'},500);

                });

                });
            </script>

        </body></html>

Пример
Ilya
Ilya
Помощник
Помощник

Мужчина

Сообщения : 3249
Регистрация : 2011-10-29
Благодарности : 1519

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

https://help.forum2x2.ru

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

Раскрывающееся меню на HTML странице Empty Re: Раскрывающееся меню на HTML странице

Сообщение автор InGleb Октябрь 22nd 2013, 12:14

Спасибо огромное.
Поправил себе немного скрипт получилось отпадно!!!
InGleb
InGleb
 

Мужчина

Сообщения : 41
Возраст : 22
Регистрация : 2013-03-16
Благодарности : 6

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

http://photoshop-ru.2x2forum.ru/

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

Раскрывающееся меню на HTML странице Empty Re: Раскрывающееся меню на HTML странице

Сообщение автор UmaRee Октябрь 22nd 2013, 16:21

 Эх, и правда как классно! good good good Спасибо! 22 d_daisy d_daisy d_daisy 


Последний раз редактировалось: UmaRee (Октябрь 25th 2013, 04:03), всего редактировалось 2 раз(а)
UmaRee
UmaRee
 

Женщина

Сообщения : 245
Возраст : 44
Регистрация : 2013-08-05
Благодарности : 14

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

http://www.domdiet.com/

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

Раскрывающееся меню на HTML странице Empty Re: Раскрывающееся меню на HTML странице

Сообщение автор hamsa Октябрь 23rd 2013, 01:31

Спасибо огромное

rose rose rose 
hamsa
hamsa
 

Сообщения : 34
Регистрация : 2013-07-08
Благодарности : 4

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

http://www.canecorsoclub.net/

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

Вернуться к началу

- Похожие темы

Бесплатный форум: форум поддержки :: Разное :: Ваши варианты туториалов

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