VPF::Помогите переделать меню. - Форум программистов

Nicholas

Дата 30.10.2013, 14:50 (ссылка)

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

Загрузка ...

Опытный

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

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

Вот есть меню, надо сделать чтобы при нажатом (развернутом) пункте у ячейки менялся фон. В JavaScript увы я полный ноль, не могу сообразить как сделать. smile

Код


<style type="text/css">
.menu2 {height:30px;width: 270px;text-align: left; margin-top:1px;} 
.menu2 a:link, .menu2 a:visited {color:#CC5D28;padding-left:20px;line-height:30px;display:block;font-weight:normal;background: #ffffff ;border-top: 1px solid #CC5D28;border-right: 1px solid #CC5D28;border-left: 1px solid #CC5D28 ;border-bottom: 1px solid #CC5D28;text-align: left; margin-top:1px;} 
.menu2 a:hover {color:#000000;text-shadow:0 0 5px ;padding-left:20px;line-height:30px;display:block;font-weight:normal;background: #ffffff ;text-align: left; margin-top:1px;}
</style>
<span class="menu2"><a onclick="$('#menu2').slideToggle(400);" href="javascript://"><b>Категория 1</b></a></span> 
<div id="menu2" style="display:none"><span class="menu"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div> 

<span class="menu2"><a onclick="$('#menu3').slideToggle(400);" href="javascript://"><b>Категория 2</b></a></span> 
<div id="menu3" style="display:none"><span class="menu"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div> 

<span class="menu2"><a onclick="$('#menu4').slideToggle(400);" href="javascript://"><b>Категория 3</b></a></span> 
<div id="menu4" style="display:none"><span class="menu"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div> 

<span class="menu2"><a onclick="$('#menu5').slideToggle(400);" href="javascript://"><b>Категория 4</b></a></span> 
<div id="menu5" style="display:none"><span class="menu"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div> 

<span class="menu2"><a onclick="$('#menu6').slideToggle(400);" href="javascript://"><b>Категория 5</b></a></span> 
<div id="menu6" style="display:none"><span class="menu"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div> 

<span class="menu2"><a onclick="$('#menu7').slideToggle(400);" href="javascript://"><b>Категория 6</b></a></span> 
<div id="menu7" style="display:none"><span class="menu" align="left"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div> 

<span class="menu2"><a onclick="$('#menu8').slideToggle(400);" href="javascript://"><b>Категория 7</b></a></span> 
<div id="menu8" style="display:none"><span class="menu"> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
<li><a href="/" title="">Ссылка</a></li> 
</span></div>

evr

Дата 3.11.2013, 22:28 (ссылка)

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

Загрузка ...

Новичок

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

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

Как-то так:

Код


<html>

<head>
    <meta charset="UTF8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
    var toggleMenuItem = function(sender, submenu) {
        submenu.slideToggle(400);
        $(sender).toggleClass('menuExpanded');
    }
    </script>

    <style type="text/css">
    .menuExpanded {
        background-color: #e5ae93 !important;
    }
    .menu2 {
        height: 30px;
        width: 270px;
        text-align: left;
        margin-top:1px;
    }
    .menu2 a:link, .menu2 a:visited {
        color:#CC5D28;
        padding-left:20px;
        line-height:30px;
        display:block;
        font-weight:normal;
        background: #ffffff;
        border-top: 1px solid #CC5D28;
        border-right: 1px solid #CC5D28;
        border-left: 1px solid #CC5D28;
        border-bottom: 1px solid #CC5D28;
        text-align: left;
        margin-top:1px;
    }
    .menu2 a:hover {
        color:#000000;
        text-shadow:0 0 5px;
        padding-left:20px;
        line-height:30px;
        display:block;
        font-weight:normal;
        background: #ffffff;
        text-align: left;
        margin-top:1px;
    }
    </style>
</head>

<body>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu2'))" href="javascript://"><b>Категория 1</b></a>
    </span>
    <div id="menu2" style="display:none">
        <span class="menu">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu3'))" href="javascript://"><b>Категория 2</b></a>
    </span>
    <div id="menu3" style="display:none">
        <span class="menu">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu4'))" href="javascript://"><b>Категория 3</b></a>
    </span>
    <div id="menu4" style="display:none">
        <span class="menu">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu5'))" href="javascript://"><b>Категория 4</b></a>
    </span>
    <div id="menu5" style="display:none">
        <span class="menu">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu6'))" href="javascript://"><b>Категория 5</b></a>
    </span>
    <div id="menu6" style="display:none">
        <span class="menu">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu7'))" href="javascript://"><b>Категория 6</b></a>
    </span>
    <div id="menu7" style="display:none">
        <span class="menu" align="left">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
    <span class="menu2"><a onclick="toggleMenuItem($(this), $('#menu8'))" href="javascript://"><b>Категория 7</b></a>
    </span>
    <div id="menu8" style="display:none">
        <span class="menu">
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
            <li><a href="/" title="">Ссылка</a>
            </li>
        </span>
    </div>
</body>

</html>

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