Форум АНТИЧАТ

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)
-   PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)
-   -   Меню на jquery (https://forum.antichat.xyz/showthread.php?t=189744)

nec 23.03.2010 23:43
Меню на jquery
 
Скачал меню гармошкой на jquery, отдельно пашет а как в дизайн сайта встраиваю, так не открывается.прописано все точно сайт _http://lanspak.ru есть мысли?

m0Hze 24.03.2010 00:06
Можно код в студию? Определение ф-ции, html меню,и css меню.А то там в css такая каша,что не разберешь,что куда относиться.

Godfather Bulan 24.03.2010 00:15
Вот это говнокод... покажи ппример того, что хочешь сделать

nec 24.03.2010 12:10
Пример меню http://test.mastertur.ru/

Код css меню

Код:

#ojaccord-menu {

        width: 220px;

        margin:0px;

        padding:0px;

        margin:auto;

}

div.menu_list {       

        font-size:12px;

        list-style:none;

        font-weight:bold;

}

#ojaccord-menu p.menu_head {

        cursor: pointer;

        position: relative;

        background-image:url('i/menu_bg0.gif');

        background-position:100% 0;

        background-repeat:no-repeat;

        color:#26370A;

        height:32px;

        line-height:32px;

        padding:0 0 0 20px;

        position:relative;

        margin:0px;

}



#ojaccord-menu p.active,

#ojaccord-menu p.active a {

        color:#6F3700;

}

#ojaccord-menu p.active:hover,

#ojaccord-menu p.active a:hover {

        color:#6F3700;

}



#ojaccord-menu p.menu_head.active:hover,

#ojaccord-menu p.menu_head:hover {

        background-position:100% -32px;

}



#ojaccord-menu p.menu_head.active {

        background-position:100% -64px;

}



#ojaccord-menu p.menu_head a {

        color:#26370A;

        text-decoration:none;

        display:block;

}



/******* SUB MENU STLE ********/



#ojaccord-menu div.menu_body {

        display:none;

        border:1px solid #A1C67B;

        border-top:0;

        border-bottom:0;

}



#ojaccord-menu div.menu_body li {

        margin:0;

        padding:0;

        display:block;

        list-style:none;

        border-left:10px double #A1C67B;

        background:none;

}



#ojaccord-menu div.menu_body li a{

        display:block;

        color:#000;

        text-decoration:none;

        padding:2px 0 2px 10px;

        border-bottom:1px solid #A1C67B;

        font-weight:normal;

}



#ojaccord-menu div.menu_body li a:hover {

        background: #d5e5c1;

}



#ojaccord-menu div.menu_body li a.sub_active {

        color:#990000;

        font-weight:bold;

}



#ojaccord-menu div.menu_body ul {

        margin:0;

        padding:0;

        list-style:none;

}



#ojaccord-menu div.menu_body li ul li {

        border-left:0;

        padding:0;

}





/* for level 3 */

#ojaccord-menu div.menu_body li ul li a{

        padding-left:20px;

}



/*for Level 4 */

#ojaccord-menu div.menu_body li ul li ul li a{

        padding-left:30px;

}



/*for Level 5 */

#ojaccord-menu div.menu_body li ul li ul li ul li a{

        padding-left:40px;

}



/*for Level 6 */

#ojaccord-menu div.menu_body li ul li ul li ul li ul li a{

        padding-left:50px;

}
Определение ф-ции

Код:
jQuery(document).ready(function()
{
        //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
        jQuery("#secondpanelkjlb p.menu_head").click(function()
    {
              jQuery(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        });
        //slides the element with class "menu_body" when mouse is over the paragraph
        jQuery("#firstpanelkjlb p.menu_head").mouseover(function()
    {
                jQuery(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
        });
});
Само HTML меню

Код:

 <div id="ojaccord-menu">
            <div id="secondpaneejlae" class="menu_list">
                   
                <p class="menu_head "><a  href="/level1-item1">Level1 item1</a></p>
                                <div class="menu_body">
                                        <ul>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item1/dummy-item1">Dummy Item1</a>
                                                       
                                  </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item1/dummy-item2">Dummy Item2</a>
                                                       
                                                                        <ul>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item1">Dummy Item1</a>
                                                        </li>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item2">Dummy Item2</a>
                                                        </li>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item3">Dummy Item3</a>
                                                        </li>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item1/dummy-item2/dummy-item4">Dummy Item4</a>
                                                        </li>
                                </ul>
                                </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item1/dummy-item3">Dummy Item3</a>
                                                       
                                  </li>
                                                        </ul>
                </div>
                   
                <p class="menu_head ">Level1 item2</p>
                                <div class="menu_body">
                                        <ul>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item2/dummy-item1">Dummy Item1</a>
                                                       
                                  </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item2/dummy-item2">Dummy Item2</a>
                                                       
                                  </li>
                                                        </ul>
                </div>
                   
                <p class="menu_head "><a  href="http://demo.joomseller.com/level1-item3">Level1 item3</a></p>
                       
                <p class="menu_head ">Level1 item4</p>
                                <div class="menu_body">
                                        <ul>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item4/dummy-item1">Dummy Item1</a>
                                                       
                                  </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item4/dummy-item2">Dummy Item2</a>
                                                       
                                  </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item4/dummy-item3">Dummy Item3</a>
                                                       
                                  </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item4/dummy-item4">Dummy Item4</a>
                                                       
                                  </li>
                                                        </ul>
                </div>
                   
                <p class="menu_head ">Level1 item5</p>
                                <div class="menu_body">
                                        <ul>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item5/dummy-item1">Dummy Item1</a>
                                                       
                                                                        <ul>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item5/dummy-item1/dummy-item1">Dummy Item1</a>
                                                <ul>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item5/dummy-item1/dummy-item1/dummy-item3">Dummy Item3</a>
                                                        </li>
                                        <li class="oj-accord_li">
                                <a  href="http://demo.joomseller.com/level1-item5/dummy-item1/dummy-item1/dummy-item2">Dummy Item2</a>
                                                        </li>
                                </ul>
                                </li>
                                </ul>
                                </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item5/dummy-item2">Dummy Item2</a>
                                                       
                                  </li>
                                            <li class="oj-accord_li">
                            <a  href="http://demo.joomseller.com/level1-item5/dummy-item3">Dummy Item3</a>
                                                       
                                  </li>
                                                        </ul>
                </div>
                        </div>
        </div>

m0Hze 24.03.2010 12:56
В html коде, замени:
Код:
<div id="secondpaneejlae" class="menu_list">
на
Код:
<div id="firstpanelkjlb" class="menu_list">
Глупые ошибки, впредь проверяй свой код на них, прежде чем идти на форум. На сайте с тестом можно было посмотреть исходный вариант html, и просто скопировать.


Время: 15:50