Каскадный режим | Линейный режим

7Lexus · 24.10.2012 06:10:50

Опять обращаюсь с просьбой помочь к Вам, Верховный!.

Дано: код спойлера
Задача: добавить еще один уровень вложенности в разделе "Категория_2" в "Подподкатегория_6"

Сам код:

Код:

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style>

    #nav_menu_content{

    display:inline:block;

    width:730px;

    }

    #nav_menu_content ul {

        display: none;

    }

    #nav_menu_content > li {

    margin:4px 0 4px 12px;

    padding:2px 4px;

        border:1px solid red!important;

    background-color: #E0EDED;

    font-size:120%;

    text-shadow:1px 1px 1px #83A0A0;

    }

    #nav_menu_content > li > ul > li{

    margin:4px 0 4px 12px;

    padding:2px 4px;

        border:1px solid blue!important;

    text-shadow:none;

    font-size:80%;

        background-color: #C1C1E5;

    }

    #nav_menu_content > li > ul > li  > ul > li{

    margin:4px 0 4px 12px;

    font-size:90%;

    padding:2px 4px;

        border:1px solid green!important;

        background-color: #BCDEBC;

    }

</style>

<script type="text/javascript">

function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}

 function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}

</script>

<body>

<ul class='left_nav_menu' id='nav_menu_content'>

    <li><a href='#'>Категория_1</a>

        <ul>

            <li><a href="#">Подкатегория_1</a>

                <ul>

                    <li><a href="view_cat.php?...">Подподкатегория_1</a></li>

                </ul>

            </li>

            <li><a href="#">Подкатегория_2</a>

                <ul>

                    <li><a href="view_cat.php?...">Подподкатегория_2</a></li>

                    <li><a href="view_cat.php?...">Подподкатегория_3</a></li>

                </ul>

            </li>

            <li><a href="#">Подкатегория_3</a>

                <ul>

                    <li><a href="view_cat.php?...">Подподкатегория_4</a></li>

                    <li><a href="view_cat.php?...">Подподкатегория_5</a></li>

                </ul>

            </li>

        </ul>

    </li>

    <li><a href='#'>Категория_2</a>

        <ul>

            <li><a href="#">Подкатегория_4</a>

                <ul class="material_cat">

                    <li><a href="view_cat.php?...">Подподкатегория_6</a></li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

<script type="text/javascript">

        var nav = $("#nav_menu_content"),

            uls = nav.find("ul");

    var coci_MENU= getcookie( "MENU" );

    if (coci_MENU) {

    setcookie( "MENU",coci_MENU ,30*3600*24*1000 );

    // тут получаем индексы из куки и перебираем их:

        var showedElems = ( coci_MENU || "" ).split(",");

        for( var i = 0; i < showedElems.length; i++ ) {

            // отображаем при загрузке то что надо.

            $( uls[ showedElems[ i ] ] ).show();

        }}

        nav.find("a").click(function() {

     var Lnk=$(this).attr("href");

       if(Lnk=''||Lnk.indexOf('#')==0){

          setcookie( "MENU",1 ,-1);

        }

            var self = $(this).next();

            if ( self.length  > 0 ) {

                var showedElems = [];

                uls.each(function( index ){

                    if ( this === self[0] ) {

                        if ( self.css('display') == "none" ) {

                            showedElems[ showedElems.length ] = index;

                        }

                        $( this ).slideToggle( 200 );

                    } else if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {

                        $( this ).slideUp( 200 );

                    } else {

                        showedElems[ showedElems.length ] = index;

                    }

                });

                // эту переменную  суём в куки,

                setcookie( "MENU", showedElems.join(",") ,30*3600*24*1000 );

                return false;

            }

        });

</script>

Как это выглядит - можно посмотреть на admshel-forum.ucoz.ru/publ/spojler/1-1-0-2

***Admin*** · 24.10.2012 08:45:49

Либо я что-то не так понял, либо задача совсем простая. Unknown

Вы это имели ввиду:
[Изображение: spoiler.png]

Если да, то достаточно просто добавить еще один уровень вложенности <ul> -> <li>, при этом удалив ссылку из тега <a>, чтобы не перекидывало на другую страничку:

Код:

<ul class='left_nav_menu' id='nav_menu_content'>

     <li><a href='#'>Категория_1</a>

         <ul>

             <li><a href="#">Подкатегория_1</a>

                 <ul>

                     <li><a href="view_cat.php?...">Подподкатегория_1</a></li>

                 </ul>

             </li>

             <li><a href="#">Подкатегория_2</a>

                 <ul>

                     <li><a href="view_cat.php?...">Подподкатегория_2</a></li>

                     <li><a href="view_cat.php?...">Подподкатегория_3</a></li>

                 </ul>

             </li>

             <li><a href="#">Подкатегория_3</a>

                 <ul>

                     <li><a href="view_cat.php?...">Подподкатегория_4</a></li>

                     <li><a href="view_cat.php?...">Подподкатегория_5</a></li>

                 </ul>

             </li>

         </ul>

     </li>

     <li><a href='#'>Категория_2</a>

         <ul>

             <li><a href="#">Подкатегория_4</a>

                 <ul class="material_cat">

                     <li><a href="#">Подподкатегория_6</a>

                         <ul class="material_cat">

                             <li><a href="view_cat.php?...">Подподкатегория_66</a>

                             <li><a href="view_cat.php?...">Подподкатегория_67</a>

                         </ul>

                     </li>

                 </ul>

             </li>

         </ul>

     </li>

 </ul>

7Lexus · 26.10.2012 13:31:40

Только у меня Подподкатегория_66 и Подподкатегория_67 не обрамляются как у Вас на картинке на сером фоне, а идут друг за другом с новой строки.
Что я не так сделал?

***Admin*** · 26.10.2012 13:54:56

Так пропишите для данного уровня вложенности свой стиль. Например, вот такой:

Код:

#nav_menu_content > li > ul > li  > ul > li > ul > li{

     margin:4px 0 4px 12px;

     font-size:90%;

     padding:2px 4px;

         border:1px solid green!important;

         background-color: #CCCCCC;

     }

7Lexus · 26.10.2012 16:45:35

Удалено как повтор.
(почему-то дублируются сообщения).

А в целом - всё. Ответ полный и исчерпывающий.
Спасибо огромное!

7Lexus · 10.11.2012 17:30:06

Снова я и снова с просьбой )))

Что-то надо подправить, чтобы при наведении на пункты меню была подсветка на линке.
И, по возможности увеличить вложенность.

Это код:

Код:

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

<script type="text/javascript" src="http://admshel.ru/includes/Scripts/jquery.min.js"></script>

<STYLE type="text/css">

#menu { 

  float: left;

  width: 300px;

}

#menu, #menu ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

}

#menu li { 

  cursor: pointer;

  background: #94C5EB;

  border-bottom: 1px solid #444;

}

#menu li a {

  text-decoration: none;

}

#menu > li > a { 

  padding: 2px 10px;

  font-weight:bold;

}

#menu li li { 

  cursor: auto;

  border: 0;

  padding: 0 14px;

  background-color: #fff;

}

#disclaimer, #intro {

  width: 400px;

}

    </STYLE>

    <script type="text/javascript">

$(document).ready(function() {

  $('#menu > li > ul' )

    .hide()

    .click(function(event) {

        event.stopPropagation();

    });

    $('#menu > li').toggle(function() {

        $(this).find('ul').slideDown();

  }, function() {

      $(this).find('ul').slideUp();

  });

});

    </script>

        <nav role="navigation">

            <ul id="menu">

              <li><a href="#">Постановления</a>

                <ul class="active">

                  <li><a href="#">2007</a></li>

                  <li><a href="#">2008</a></li>

                  <li><a href="#">2009</a></li>

                  <li><a href="#">2010</a></li>

                  <li><a href="#">2012</a></li>

                </ul>

              </li>

              <li><a href="#">Пояснение</a>

                <ul>

                  <li><a href="#">СВЕДЕНИЯ об имущественном положении и доходах Глав сельсоветов Шелаболихинского района и членов их семей за период с 01 января 2011 года по 31 декабря 2011 года</a></li>

                  <li><a href="#">Доклад о достигнутых значениях показателей для оценки эффективности деятельности органов местного самоуправления Шелаболихинского района за 2011 год и их планируемых значениях на 3-летний период.</a></li>

                </ul>

              </li>

              <li><a href="#">Решения</a>

                <ul>

                  <li><a href="#">2007</a></li>

                  <li><a href="#">2008</a></li>

                  <li><a href="#">2009</a></li>

                  <li><a href="#">2010</a></li>

                  <li><a href="#">2012</a></li>

                </ul>

              </li>

              <li><a href="#">Нормативные правывые акты</a>

                <ul>

                  <li><a href="#">2007</a></li>

                  <li><a href="#">2008</a></li>

                  <li><a href="#">2009</a></li>

                  <li><a href="#">2010</a></li>

                  <li><a href="#">2012</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>

        </nav>

Вот так это выглядит - admshel-forum.ucoz.ru/publ/menu/1-1-0-2

***Admin*** · 10.11.2012 22:16:53

По-моему скрипт немного кривоват и его надо серьезно дорабатывать, чтобы добавить еще один уровень.
Я бы посоветовал Вам оставить предыдущий вариант, т.к. он подходит для любого количества вложений.

Для подсветки используйте стили, например:

Код:

#menu  li> ul> li:hover {

background-color:f00;

}

7Lexus · 11.11.2012 07:52:08

Спасибо огромное. Действительно в этом варианте вложения и смотрелись бы чересчур перегружено.
Подсветка - то, что надо!

7Lexus · 07.02.2013 19:24:10

Здравствуйте. Давно к вам не обращался, но точно знаю, что вы поможете.
Вот есть код для спойлера - не могу заставить его открываться.
На источнике - mk-template.blogspot.ru/p/spoiler.html, откуда взят 2-й вариант все работает, у меня не хочет.
В чем загвоздка?

Код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">

$(&quot;.box .block&quot;).show();

$(&quot;.closed .block&quot;).hide();

$(&quot;div.hide&quot;).click(function(){

$(this).toggleClass(&quot;show&quot;).next().slideToggle(&quot;medium&quot;);

});

</script>

<STYLE type="text/css">

.container {

width: 99%;

display:block;

margin: 0 auto;

}

.box_title {

font-size:14px; /* 14px - размер название спойлера */

font-family:candara;

}

.block_text {

font-size:12px; /* 12px - размер текста */

font-family:candara;

}

</STYLE>

<STYLE type="text/css">

.box {

background:#fff;

margin-bottom:20px;

padding:0;

position: relative;

overflow: hidden;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

 border-left: 3px solid #438fbf;

 background: #f8f9f9;

}

.box_title{

font-weight:700;

color:#444;

background: #f8f9f9;

margin:0 -10px 1px -10px;

padding:4px;

padding-left: 15px;

padding-right: 45px;

-webkit-box-shadow:0 0 10px #DCDCDC inset;

-moz-box-shadow:0 0 10px #DCDCDC inset;

box-shadow:0 0 10px #DCDCDC inset;

border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

}

.block {

padding:0;

}

.block_text {

padding:6px;

}

.box div.hide {

display: block;

width: auto;

padding:1px;

line-height: 17px;

position: absolute;

right: 5px;

top: 4px;

cursor: pointer;

font-size: 10px;

text-transform: uppercase;

text-align: center;

border: solid 1px #aaa;

background: #f5f5f5;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-webkit-box-shadow:0 0 4px #DCDCDC inset;

-moz-box-shadow:0 0 4px #DCDCDC inset;

box-shadow:0 0 4px #DCDCDC inset;

}

.box div.hide:hover {

background: #fff;

}

.box div.hide span.h {display: block;}

.box div.hide span.s {display: none;}

.box div.show span.h {display: none;}

.box div.show span.s {display: block;}

.closed div.hide span.h {display: none;}

.closed div.hide span.s {display: block;}

.closed div.show span.h {display: block;}

.closed div.show span.s {display: none;}

</style>

<div class="container">

<div class="box closed">

<div class="box_title">Title (Название)<br>

</div>

<div class="hide"><span class="s">Показать</span>

<span class="h">Скрыть</span></div>

<div class="block" style="display: none;">

<div class="block_text">Ваш скрытый текст...<br>

</div></div></div></div>

***Admin*** · 07.02.2013 20:09:24

Все просто!

Перенесите JavaScript код, отвечающий за открытие/закрытие спойлера в конец странички.

Код:

<script type="text/javascript">

 $('.box .block').show();

 $('.closed .block').hide();

 $('div.hide').click(function(){

 $(this).toggleClass('show').next().slideToggle('medium');

 });

</script>

Каскадный режим \| Линейный режим Собственный спойлер для сайта
Автор	Сообщение