VPF::dropdown menu с jquery - Форум программистов

StachelDraht

Дата 19.6.2009, 11:21 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

Привет!
Помогите пожалуйста дописать выпадающую менюшку. Взял за основу вот такое меню

Код


var timeout    = 400;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');
   }

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

Код


#jsddm
{    margin: 0;
    padding: 0}
    
    #jsddm  li
    {    float: left;
        list-style: none;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:12px;
        font-weight:bold;
        }

    #jsddm li a
    {    display: block;
        /*background: #20548E;*/
        padding: 5px 12px;
        text-decoration: none;
        /*border-right: 1px solid white;*/
        width: auto;
        white-space: nowrap;
        color:#151;
        }

    #jsddm li a:hover
    {    
        background-image:url(/templates/ljuna/images/menu/top.png);
        background: #B64271;
        color:#FFF;
    }
        
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            /*border-top: 1px solid white;*/
            color:#FFF;
            }
        
        #jsddm li ul li
        {    float: none;
            display: inline;
            }
        
        #jsddm li ul li a
        {    width: auto;
            background: #B64271;
            color:#FFF;
        }
        
        #jsddm li ul li a:hover
        {    
            background: #7F1616;
        }

Само меню разумеется делаю списком.

Код


<ul id="jsddm">
    <menu_link><li><a href="{href}"><img src="/templates/ljuna/images/menu_sep_m.jpg" border="0"/>&nbsp;{name}</a>
        <ul>
         <sub_menu>
             <sub_link><li><a href="{href}">{name}</a></li></sub_link>
                <sub_selected_link><li><a href="{href}">{name}</a></li></sub_selected_link>
            </sub_menu>
     </ul>
        </li>
    </menu_link>
    <menu_selected_link><li><a href="{href}"><img src="/templates/ljuna/images/menu_sep_m.jpg" border="0" />&nbsp;{name}</a>

    <ul>
    <sub_menu>

     <sub_link><li><a href="{href}">{name}</a></li></sub_link>
        <sub_selected_link><li><a href="{href}">{name}</a></li></sub_selected_link>

    </sub_menu>
    </ul>
    </li>
    </menu_selected_link>
</ul>

Вот у меня собственно вопрос
Как задать главному меню бэкграунд в том случае если курсор находится на подменю? Сейчас

Код


    #jsddm li a:hover
    {    
        background: #B64271;
        color:#FFF;
    }


Спасибо!

Это сообщение отредактировал(а) StachelDraht - 19.6.2009, 11:21

12345c

Дата 20.6.2009, 11:16 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

В jsddm_open() дописать присвоение класса с бэкграунд , а в jsddm_close() убрать.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

StachelDraht

Дата 20.6.2009, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

Присвоение класса к чему? К ul ?

StachelDraht

Дата 20.6.2009, 20:33 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

Простите, но все таки подскажите пожалуйста как присвоить первому <li новый background

Код


var menuitem = $(this).find('ul').css('background', 'url(top.jpg)');

Спасибо!

Это сообщение отредактировал(а) StachelDraht - 20.6.2009, 20:38

StachelDraht

Дата 10.7.2009, 18:08 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

Не, никак не получается...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »