Выдвижная панель Wordpress

@Divil · Регистрация: 11.04.2012

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
<header role=""></header>
    <nav><ul role="navigation">
<li><a><img>text</a></li>
<li><a><img>text</a></li>
<button id="hide">&times;</button>
</ul></nav>
    <div id="content" role=""></div>
    <footer role=""></footer>

как можно сделать не полную выдвижную/задвижную вертикальную панель на jquery?
P.S. Подобно навигационной панели в админке вордпресса.
Заранее благодарен!!!

@Az Rieil · 11.08.2014, 22:33

Написано куча уже готовых плагинов на слайдер. Если хочешь сам пройти через ад, пожалуйста - делаем блок с фиксированной шириной, затем пихаем туда слайдер и присваиваем блоку

CSS
1
overflow:hidden;z-index:1

И слайдеру

CSS
1
z-index:0;position:relative:left:-(ширина слайдера)px;

И с помощью метода animate меняем значение left.
Это один из возможных вариантов, реализация слайдера может быть по разному.

@Divil · 11.08.2014, 22:36 **[ТС]**

Сообщение от Az Rieil

Написано куча уже готовых плагинов на слайдер

можете порекомендовать какой-нибудь?
я искал, только то что надо не нашел...или я что-то не то искал

@Az Rieil · 11.08.2014, 22:38

Ой, обронил.

@Divil · 11.08.2014, 22:42 **[ТС]**

так это все слайдеры, причем здесь они?
в них идет прокрутка чего-то, а мне надо как на скрине(в админке вордпресс): нажал кнопку, форма сократилась до определенного размера, еще нажал, вернулась в норму

@Eva Rosalene · 11.08.2014, 22:49

Divil, да нет, там как раз боковые панели

@Divil · 11.08.2014, 22:50 **[ТС]**

эмм...первый раз другая ссылка открылась почему-то...с кучей слайдеров

@Divil · 18.08.2014, 13:04 **[ТС]**

вот я ее сделал, работает как надо)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
            var sidebar = true;
            
            $('#hide').click(function(){
                if(sidebar) {
                    $('#sidebar').animate({'width': '50px'}, 500);
                    $('#content').animate({'margin-left': '70px'}, 500);
                    sidebar = false;
                } else {
                    $('#sidebar').animate({'width': '180px'}, 500);
                    $('#content').animate({'margin-left': '200px'}, 500);
                    sidebar = true;
                }
            });         
        });

Единственная проблема, как сохранить состояние сайдбара при перезагрузке страницы?
Т.е. допустим, уменьшил сайдбар и чтобы при перезагрузке он таким же и остался, а не возвратился в начальную позицию(180px)?

@Az Rieil · 19.08.2014, 00:11

куки.

@Eva Rosalene · 19.08.2014, 00:33

LocalStorage

@Divil · 22.08.2014, 22:56 **[ТС]**

Кликните здесь для просмотра всего текста

HTML5
1
2
<aside id="sidebar"><button id="hide">Скрыть панель</button></aside>
    <section id="content"></section>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* sidebar */
$(document).ready(function(){
    // Проверка на HTML5-хранилище
    function supportsLocalStorage() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    }
    
    var wdt, mrgleft;
    var sidebar;
    // Проверяем данные в хранилище
    if(localStorage['sidebar'] == null) {
        localStorage['sidebar'] = 'true';
    }
    //console.log(localStorage['sidebar']);
    
    // Проверяем значение sidebar
    // Если true - значит расширенное меню
    if(localStorage['sidebar']) {
        localStorage['wdt'] = '180px';
        localStorage['mrgleft'] = '200px';
    } else {
        localStorage['wdt'] = '50px';
        localStorage['mrgleft'] = '70px';
    }
    //console.log(localStorage['wdt']);
    //console.log(localStorage['mrgleft']);
    $('#sidebar').animate({'width': localStorage['wdt']}, 500);
    $('#content').animate({'margin-left': localStorage['mrgleft']}, 500);
    
    // 
    function LSClick(w, ml, sd) {
        $('#sidebar').animate({'width': w}, 500);
        $('#content').animate({'margin-left': ml}, 500);
        localStorage['wdt'] = w;
        localStorage['mrgleft'] = ml;
        localStorage['sidebar'] = sd;
        console.log(sd);
    }
    
    $('#hide').click(function(){
        if(localStorage['sidebar']) {
            // Запуск
            LSClick('50px', '70px', 'false');
        } else {
            // Запуск
            LSClick('180px', '200px', 'true');
        }
    });
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#sidebar {
    width: 180px; /* Ширина элемента */
    float: left; /* Выравнивание элемента по левой стороне */
    font-size: 13pt; /* Размер шрифта текста */
    height: 800px; /* Минимальная высота элемента */
    padding: 10px; /* Поля вокруг элемента */
    background: #5577b2; /* Цвет фона */
    border-right: #777 solid 1px;
}
#content {
    margin-left: 200px; /* Отступ слева и справа */
    font-size: 13pt; /* Размер шрифта текста */
    height: 800px; /* Минимальная высота элемента */
    background: #fff; /* Цвет фона */
    padding: 10px; /* Поля вокруг элемента */
}

Тестирование
Сделал, только в данном коде всегда вылезает окошко с true...только как ее решить ума не приложу...

JavaScript
1
2
3
4
5
6
7
8
9
10
$('#hide').click(function(){
        if(localStorage['sidebar']) {
            LSClick('50px', '70px', false);
            alert("true");
        } else {
            LSClick('180px', '200px', true);
            alert("false");
        }
        console.log(localStorage['sidebar']);
    });

@Divil · 24.08.2014, 21:44 **[ТС]**

так что, может кто объяснить в чем проблема?

@samurr · 24.08.2014, 21:46

Спасибо, долго искал

@Divil · 24.08.2014, 21:49 **[ТС]**

Сообщение от samurr

Спасибо, долго искал

эмм...за что спасибо то?)

@Eva Rosalene · 24.08.2014, 22:12

Сообщение от Divil

эмм...за что спасибо то?)

Видисо, код пригодился

Divil, за передачу false как строки вас интерпретатор и бьёт.

JavaScript
1
2
'false' ? true : false; // => true
false ? true : false; // => false

Добавлено через 50 секунд
Хм. А во втором коде вроде норм. Что за?

@samurr · 24.08.2014, 22:15

перепутал, не сюда это)

@Divil · 24.08.2014, 22:18 **[ТС]**

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* sidebar */
$(document).ready(function(){
    // Проверка на HTML5-хранилище
    function supportsLocalStorage() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    }
            
    //if (!supportsLocalStorage()) { return false; };
    // Удалить removeItem(ключ); clear();
    // Перехват storage события
    /*if (window.addEventListener) {
        window.addEventListener("storage", handle_storage, false);
    } else {
        window.attachEvent("onstorage", handle_storage);
    };
    function handle_storage(e) {
        if (!e) { e = window.event; }
    }*/
    
    // Очистка всего хранилища
    //localStorage.clear();
    
    var wdt, mrgleft;
    var sidebar;
    
    // Проверяем данные в хранилище
    if(localStorage['sidebar'] == null || localStorage['sidebar'] == 'undefined') {
        localStorage['sidebar'] = true;
    }
    //console.log(localStorage['sidebar']);
    
    // Проверяем значение sidebar
    // Если true - значит расширенное меню
    if(localStorage['sidebar']) {
        localStorage['wdt'] = '180px';
        localStorage['mrgleft'] = '200px';
    } else {
        localStorage['wdt'] = '50px';
        localStorage['mrgleft'] = '70px';
    }
    //console.log(localStorage['wdt']);
    //console.log(localStorage['mrgleft']);
    $('#sidebar').animate({'width': localStorage['wdt']}, 500);
    $('#content').animate({'margin-left': localStorage['mrgleft']}, 500);
    
    // 
    function LSClick(w, ml, sd) {
        localStorage['wdt'] = w;
        localStorage['mrgleft'] = ml;
        localStorage['sidebar'] = sd;
        $('#sidebar').animate({'width': w}, 500);
        $('#content').animate({'margin-left': ml}, 500);
        //console.log(w);
        //console.log(ml);
        console.log(localStorage['sidebar']);
    }
    //console.log(localStorage['sidebar']);
    $('#hide').click(function(){
        if(localStorage['sidebar']) {
            LSClick('50px', '70px', false);
            alert("true");
        } else {
            LSClick('180px', '200px', true);
            alert("false");
        }
        //console.log(localStorage['sidebar']);
    });
});

вот весь js код, и все равно не работает

@Eva Rosalene · 24.08.2014, 22:22

Ох чёрт. localStorage хранит ТОЛЬКО строки. И проверять надо как

JavaScript
1
2
localStorage['sidebar'] == 'true';
localStorage['sidebar'] == 'false';

Добавлено через 1 минуту
Вот вам: ссылочка

Добавлено через 50 секунд
Даже так: дубль-4

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function supportsLocalStorage() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    }
    
    var wdt, mrgleft;
    var sidebar;
    // Проверяем данные в хранилище
    if(localStorage['sidebar'] == null) {
        localStorage['sidebar'] = 'true';
    }
    //console.log(localStorage['sidebar']);
    
    // Проверяем значение sidebar
    // Если true - значит расширенное меню
    if(localStorage['sidebar'] == 'true') {
        localStorage['wdt'] = '180px';
        localStorage['mrgleft'] = '200px';
    } else {
        localStorage['wdt'] = '50px';
        localStorage['mrgleft'] = '70px';
    }
    //console.log(localStorage['wdt']);
    //console.log(localStorage['mrgleft']);
    $('#sidebar').animate({'width': localStorage['wdt']}, 500);
    $('#content').animate({'margin-left': localStorage['mrgleft']}, 500);
    
    // 
    function LSClick(w, ml, sd) {
        $('#sidebar').animate({'width': w}, 500);
        $('#content').animate({'margin-left': ml}, 500);
        localStorage['wdt'] = w;
        localStorage['mrgleft'] = ml;
        localStorage['sidebar'] = sd;
        console.log(sd);
    }
    
    $('#hide').click(function(){
        if(localStorage['sidebar'] == 'true') {
            // Запуск
            LSClick('50px', '70px', 'false');
        } else {
            // Запуск
            LSClick('180px', '200px', 'true');
        }
    });

@Divil · 03.09.2014, 21:00 **[ТС]**

решил улучшить панельку, добавив картинок

HTML5
1
<a href=""><img src="{{ PATH_IMG }}nav/system.png" alt=""><span id="txt_menu">Система</span></a>...

их там несколько

JavaScript
1
2
3
4
5
6
7
8
9
$('#hide').click(function(){
        if(localStorage['sidebar'] == 'true') {
            LSClick('50px', '70px', 'false');
            $('#txt_menu').fadeOut( "slow" );;
        } else {
            LSClick('160px', '180px', 'true');
            $('#txt_menu').fadeIn( "slow" );;
        }
    });

вроде все правильно сделал, а текст скрывается, но только у первого списка, а остальные остаются...
как сразу выделить все span'ы с id='#txt_menu' ?

@Divil · 07.09.2014, 12:03 **[ТС]**

Уже не надо, решил проблему(забыл что id уникальная штука), поменял на классы и все заработало!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Az Rieil 39 / 39 / 43 Регистрация: 14.07.2014 Сообщений: 230
	11.08.2014, 22:38
	Ой, обронил. 1

@Divil 8 / 8 / 10 Регистрация: 11.04.2012 Сообщений: 611
	11.08.2014, 22:42 [ТС]
	так это все слайдеры, причем здесь они? в них идет прокрутка чего-то, а мне надо как на скрине(в админке вордпресс): нажал кнопку, форма сократилась до определенного размера, еще нажал, вернулась в норму 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	11.08.2014, 22:49
	Divil, да нет, там как раз боковые панели 0

@Divil 8 / 8 / 10 Регистрация: 11.04.2012 Сообщений: 611
	11.08.2014, 22:50 [ТС]
	эмм...первый раз другая ссылка открылась почему-то...с кучей слайдеров 0

@Az Rieil 39 / 39 / 43 Регистрация: 14.07.2014 Сообщений: 230
	19.08.2014, 00:11
	куки. 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	19.08.2014, 00:33
	LocalStorage 0

@Divil 8 / 8 / 10 Регистрация: 11.04.2012 Сообщений: 611
	24.08.2014, 21:44 [ТС]
	так что, может кто объяснить в чем проблема? 0

@samurr 0 / 0 / 0 Регистрация: 19.08.2014 Сообщений: 50
	24.08.2014, 21:46
	Спасибо, долго искал 0

@samurr 0 / 0 / 0 Регистрация: 19.08.2014 Сообщений: 50
	24.08.2014, 22:15
	перепутал, не сюда это) 0

@Divil 8 / 8 / 10 Регистрация: 11.04.2012 Сообщений: 611
	07.09.2014, 12:03 [ТС]
	Уже не надо, решил проблему(забыл что id уникальная штука), поменял на классы и все заработало! 0